hugo를 이용한 github 블로그 개설

개요

github 블로그 개설하는 방법은 여러가지 입니다. hugo, jekyll 등 여러 정적 사이트 생성기를 이용하여 블로그를 관리 및 운영을 할 수 있습니다.
이 중, hugo를 이용하여 github 블로그 개설하는 방법에 대해서 알아볼 수 있도록 합니다.

이번 포스트에서는 hugo를 사용하기 위한 환경구성, 로컬 repository 생성까지 알아 볼 수 있도록 합니다.

정적 사이트 생성기? hugo?

환경구성

환경구성은 windows 환경 기준으로 작성되었습니다.

go, hugo 설치

hugo는 go 언어로 이루어진 정적 사이트 생성기입니다. 따라서 go가 사전에 설치 되어야합니다.

다운로드 사이트(golang 공식 사이트) 바로가기

정상적으로 설치하고 나서 cmd 또는 powershell에서 go version 시 버전 정보가 나오면 완료입니다.

그 다음, hugo를 설치할 수 있도록 합니다.
hugo github 블로그 바로가기

우측 중하단에 있는 Release를 클릭합니다.

최신 버전의 경우 windows 설치환경을 제공하는 파일을 제공안할 수 있어, windows를 제공하는 마지막 버전을 찾을 수 있도록 합니다.
extended 버전으로 설치하는 것을 권장합니다.

다운로드 받은 압축파일을 원하는 경로에 저장 할 수 있도록 합니다.
그 다음, 환경변수로 등록헤서 원활하게 사용할 수 있도록 환경을 구성합니다.

마찬가지로 cmd 또는 powershell에서 hugo version 입력 시 버전 정보가 나오는지 확인합니다.

git 설치

hugo를 정상적으로 쓰기 위해선 git 설치가 되어 있어야 합니다.
git 다운로드 사이트 바로가기

로컬 작업공간 생성

go, hugo, git까지 정상적으로 설치하고 난 뒤, 로컬환경에 작업할 수 있는 작업공간을 생성해야 합니다.
작업공간을 위치할 공간에 아래의 명령어를 입력 할 수 있도록 합니다.

# hugo new site {프로젝트 또는 폴더명}
hugo new site blog

정상적으로 명령어가 실행된 경우 다음과 같은 문구를 확인할 수 있으며, 폴더가 생성된 것을 확인 할 수 있습니다.

설치된 작업공간에는 아래와 같은 디렉토리 구조를 가지고 있습니다.

테마 설치

블로그에 사용할 테마를 선택하여 적용할 수 있도록 합니다.
공식문서에서 보여주는 테마부터 github에 사용자들이 만든 여러테마가 있어, 원하는 테마를 하나 선택할 수 있도록 합니다.

이번 문서에서는 https://themes.gohugo.io/themes/hugo-papermod/ 테마를 이용해보도록 하겠습니다.

테마를 적용하는 방법은 기본적으로 2가지이며, 각각의 방법 별로 장점이 있습니다.

  • git의 submodule을 이용하는 방법
    • 테마의 최신버전을 유지하기 쉬워진다.
  • 파일을 다운로드하여 배치하는 방법
    • 초기 설치가 빠르다

hugo에서는 첫번째 방법인 submodule을 사용하는 방법을 권장하고 있어 해당 방법으로 설명하도록 하겠습니다.

먼저 git submodule를 이용하기 위해선 작업공간 디렉토리가 git으로 관리가 되어야합니다.
따라서, 작업공간 디렉토리(이하, blog)에서 git init을 할 수 있도록 합니다.

git init

그 다음, 테마를 submodule를 이용하여 가져올 수 있도록 합니다.

git submodule add https://github.com/adityatelange/hugo-PaperMod.git

그 다음 blog 디렉토리에 있는 config.toml파일에 다음과 같이 추가합니다.

theme = 'hugo-PaperMod'

여기서 hugo-PaperMod는 themes 디렉토리에서 submodule, clone 등으로 다운받은 디렉토리명 입니다.

테마가 정상적으로 반영되는지 확인하기 위해 blog 디렉토리 경로에서 확인할 수 있는 명령어를 실행합니다.

hugo server -D

브라우저에서 http://localhost:1313로 접근하여 테마가 정상적으로 출력 되는지 확인합니다.

출력까지 확인 되었다면 로컬 repository까지 환경구축이 완료 된것을 확인할 수 있습니다.
다음 포스트에서는 github repo 연결과 자동화 배포까지 알아 볼 수 있도록 하겠습니다.
감사합니다.