서론

Hugo를 설치하고 테마를 적용하여 블로그 컨텐츠를 간단히 작성하고 로컬에서 서버를 구동하여 확인해보겠습니다.

Git 설치

Hugo를 설치하기 전에 먼저 Git이 설치되어있어야 합니다. Git은 코드 버전 관리 뿐만 아니라 테마를 설치하기 위해서와 블로그를 자동으로 배포할 때도 필요합니다.

sudo apt install git-all

Hugo 설치

sudo apt install hugo

# 버전확인
hugo version
# hugo v0.121.2+extended linux/amd64 BuildDate=2024-02-07T00:00:00+00:00 VendorInfo=Fedora:0.121.2-1.fc40

사이트 생성

사이트는 블로그 프로젝트명을 의미합니다. 예를 들어 my-blog라는 사이트를 생성하면 해당 프로젝트가 my-blog라는 폴더에 생성됩니다. 참고로 웹에서 표시되는 블로그 이름은 프로젝트 이름(사이트 이름)과 별개로 설정이 가능합니다. --format yml 옵션은 Hugo 를 설정하는 파일 확장자를 yml로 생성하며 기본값은 toml 입니다. toml보다는 yml이 사용하기 편리한 것 같아 옵션을 줬습니다.

hugo new site my-blog --format yml

사이트 테마 설정

테마는 https://themes.gohugo.io/themes 에서 볼 수 있습니다. 여기서는 PaperMod라는 테마를 설정했습니다. 적당한 테마를 선택해서 적용합니다. 많은 테마들이 git의 submodule을 사용하여 테마를 설치하기 때문에 git init을 통해 초기화합니다. 테마마다 적용 방법이 조금씩 달라서 반드시 공식문서에서 설치방법과 사용방법을 숙지하고 진행하시길 바랍니다.

PagerMod 테마

PageMod 테마의 설치방법입니다. PagerMod 테마 설치방법

cd my-blog

git init

# PaperMod 테마
# https://github.com/adityatelange/hugo-PaperMod/wiki/Installation
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
git submodule update --init --recursive # needed when you reclone your repo (submodules may not get cloned automatically)

테마를 적용한 뒤에는 반드시 hugo.yml 이나 hugo.toml 에 테마를 추가해야 합니다. 각 테마의 설치방법 문서를 참고합니다. 여기서는 PagerMod 테마를 추가했습니다.

echo "theme: [\"PaperMod\"]" >> hugo.yml

블로그 글 생성

블로그 글 작성을 위해 .md파일을 생성합니다. hugo new content 뒤에 경로와 .md를 입력하면 해당 경로에 .md파일이 자동으로 생성됩니다. 해당 파일은 프로젝트 루트경로의 content 폴더에 위치합니다. 예를 들어 아래와 같이 입력하면 프로젝트 루트 -> content 폴더 -> posts 폴더 -> hello-world.md 파일이 생성됩니다.

hugo new content posts/hello-world.md

사이트 미리보기

로컬(내pc)에서 서버를 띄워 블로그의 실제 모습을 미리볼 수 있습니다. 브라우저 주소창에 localhost:1313 을 입력하면 블로그에 접속 됩니다. -D 옵션은 draft 상태의 .md파일도 보여주는 옵션입니다.

처음 .md파일을 생성하면 문서의 맨 윗부분 meta부분에 draft = true로 설정되어 있으므로 hugo server만 하면 컨텐츠가 보이지 않습니다 이럴 땐 hugo server -D를 하거나 draft = true 부분을 지우거나 false로 바꿔줍니다. hugo server는 draft가 true가 아닌 것만 보여줍니다.

# draft = true 인 것도 보여줌
hugo server -D

# draft = true 인 것을 제외하고 보여줌
hugo server

사이트 빌드 (배포용)

미리보기를 통해 확인한 블로그를 실제 배포하기 위해서는 html과 css 파일 등을 만들어야 하는데 아래 명령어는 프로젝트 루트의 public폴더에 이런 결과들을 자동으로 만들어서 저장합니다. 배포할 때는 public 폴더의 내용만 필요합니다. -D옵션은 hugo server -D와 마찬가지로 draft 상태의 .md파일도 보여주는 옵션입니다.

hugo -D
// or
hugo

결론

Hugo를 설치하고 로컬 서버를 구동해 블로그를 확인해보았습니다.

다음 포스팅에서는 사이트를 빌드하여 배포하는 방법을 알아보겠습니다.

참고