나만의 블로그 만들기 1. HUGO와 친해지기

Preparation

이 블로그 포스트는 다음 패키지를 설치되었다는 가정 하에 작성되었습니다.

(MacOS에서는 homebrew를 통해 쉽게 설치가 가능합니다.)

HUGO 메인 페이지

.md 파일을 자동으로 .html로 만드는 것은 굉장히 힘든 작업입니다. 이 작업을 쉽게 만들기 위해 우리는 정적 웹사이트 생성기 중 하나인 HUGO를 사용합니다.

HUGO는 .md 포스트들을 .html로 변환하는 일 뿐만 아니라 다양한 블로그 테마를 쉽게 다운로드하여 수정할 수 있게 합니다. 또한 블로그의 Deploy나 기타 작업이 굉장히 빠르고 단순하여 프로그래밍을 모르는 사람들도 나만의 블로그를 쉽게 만들 수 있습니다.

Hugo를 직접 다운로드 해봅시다.

(Youtube 참고)

brew install hugo

homebrew 패키지 매니저를 이용해 다운로드 받습니다.

sudo apt install hugo    # Debian
sudo pacman install hugo # Arch

사용하는 Distro의 패키지 매니저를 이용해 다운로드 받습니다.

(Linux를 사용하신다면 더 이상의 설명은 필요 없으리라 생각합니다.)

진행하기 전, HUGO가 제대로 설치되었는지 확인해봅시다.

hugo version # 버전명이 나오면 정상적으로 설치됨.

이제 우리가 블로그 포스트 등을 저장할 폴더로 shell을 이동해줍니다.

# 저는 macos를 사용중이며, 저장하기 쉽게 Desktop에 파일을 저장해두었습니다.
cd ~/Desktop

이제 HUGO를 이용해 블로그 웹사이트를 만들어봅시다.

# hugo new site [블로그 이름]
hugo new site dirac042

블로그가 생성되었습니다! 이제 파일이 어떤 구조로 이루어져 있는지 확인해봅시다.

cd dirac042 # 방금 생성한 블로그 이름
ls

필자의 블로그 폴더

생성된 블로그 폴더의 역할을 간략하게 알아봅시다.

블로그의 테마를 설치하기 전에, git의 initialization을 해줘야합니다.

git init

(이 블로그 포스트는 여러분들이 이미 git의 설정을 완료했다는 가정하에 서술됩니다. 만약 여러분이 git 사용이 처음이시라면, git 사용법을 읽고 따라해 보시는 것을 권장드립니다.)

!주의: 이 커맨드는 현재 shell이 블로그 폴더 안에 들어가있어야 합니다!

pwd # 현재 shell 위치 확인
# ex. ~/Desktop/dirac042

HUGO Themes 웹사이트

HUGO Themes에서는 유저들이 HUGO로 만든 다양한 웹사이트 테마를 제공합니다.
이 곳에서 마음에 드는 테마를 다운로드 받으면 곧바로 내 블로그에서 사용할 수 있습니다.

마음에 드는 테마를 발견했다면 download 아이콘을 눌러봅시다.
대부분의 모드는 github submodule을 이용한 설치를 지원합니다.

# 예시 테마: Papermod
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

이렇게 submodule을 이용하면, 테마 제작자가 업데이트를 진행할 때, 쉽게 커맨드 하나로 업데이트 시켜줄 수 있습니다.

git submodule update --init --recursive

HUGO와 테마까지 모두 받았으면, 이제 테스트를 위해 한번 Deploy를 시켜봅시다.
shell이 블로그 폴더에 있는 상태에서 다음의 명령어를 사용하면 됩니다.

hugo server

그러면 굉장히 빠른 속도로 localhost에서 로컬파일을 이용해 블로그가 만들어집니다.
기본적으로 1313포트에서 생성되므로, http://localhost:1313 에 들어가 자신의 블로그를 확인해보도록 합시다.

필자의 블로그 구동 화면 (localhost)

이런 식으로 테마와 블로그가 제대로 나온다면, 축하드립니다!
여러분만의 블로그가 성공적으로 제작되었습니다.