1. hugo란

  hugo란 go언어로 개발된 오픈소스 정적 웹 생성기를 말한다. hugo가 생성한 정적 웹은 jekyll처럼 github page에서 사용될 수 있다.


 

2. hugo 설치

window에서 hugo를 설치하는 방법은 여러가지가 있는데, 1번과 2번에 대해서만 설명하겠다.

  1. chocolatey와 같은 패키지 매니저를 이용하는 방법
  2. 바이너리 파일을 직접 다운로드 하는 방법
  3. git을 이용해 소스파일을 컴파일 하는 방법
 

방법1. chocolatey로 설치하기

chocolatey는 윈도우에서 사용할 수 있는 패키지 매니저로 명령어 하나로 hugo와 같은 소프트웨어를 다운로드하고 관리할 수 있게 해준다.

chocolaty 설치하기

chocolatey를 설치하기 위해 cmd나 Power Shell을 관리자 권한으로 열고 다음 명령어를 복사 붙여넣기 하고 실행한다. (참고 : https://chocolatey.org/install#individual)

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

설치가 완료된 것 같다면 아래 명령어를 입력해서 버전이 제대로 뜨는지 확인한다.

choco -v

hugo를 설치하기 위해 다음 명령어를 입력한다.

choco install hugo -confirm

그럼 알아서 hugo가 설치된다. 버전 확인을 통해 정상 설치되었는지 확인하자.

hugo version

방법2. 바이너리로 설치하기

  1. hugo 다운로드

    1. https://github.com/gohugoio/hugo/releases에 접속해서 hugo_버전_Windows-64bit.zip을 다운로드한다.
    2. 압축파일을 적당한 (앞으로 옮기지 않을) 곳에 해제한다.
    3. hugo.exe가 있음을 확인하고, 해당 경로를 복사한다.

  2. 환경 변수 설정

    1. 시작을 누르고 고급 시스템 설정을 검색해 시스템 설정 창을 띄운다
    2. 고급 시스템 설정 - 고급 - 환경변수를 들어간다
    3. 사용자 변수에서 path라는 변수를 찾아 편집하기를 누른다.
    4. 새로 만들기를 누르고 아까 복사했던 hugo가 있는 경로 명을 붙여넣고 저장한다.
    5. 명령 프롬프트를 열고 아래 명령어를 입력해 hugo가 작동하는지 확인한다.
hugo version

3. hugo 프로젝트 생성 및 설정

1. 프로젝트 생성

먼저, 블로그 파일을 저장할 장소를 마련한다. (D:\blog라고 가정) 그런다음 아래 명령어를 입력한다.

D:\blog>hugo new site {프로젝트의 폴더명}
D:\blog>cd {프로젝트의 폴더명}

그러면 명령어로 입력했던 이름을 가진 폴더 하나가 생성되는데, 이것들이 정적 웹을 생성하기 위한 데이터 및 설정 파일들이다.

hugo.blog
└ archetypes
└ content
└ data
└ layouts
└ static
└ themes
└ config.toml

각각의 폴더와 파일을 간략하게 설명하면 아래와 같다. (참고)

  • archetypes : hugo new 시 생성될 파일들의 초기 데이터 설정을 위한 폴더
  • content : 생성될 웹 사이트의 내용들을 위한 폴더 (보통 마크 다운 파일)
  • data : YAML, JSON, TOML 등 웹 사이트 설정들을 저장하는 폴더
  • layouts : 웹 사이트의 모습을 정의하는 파일들을 위한 폴더
  • static : 이미지, css, js 등 정적 파일들을 저장하는 폴더
  • themes : 외부 테마를 저장하는 폴더
  • config.toml : hugo의 기본 설정 파일

2. 설정 변경

우선, 결과물을 보기 위해서는 웹페이지에 적용될 테마와 글의 작성된 상태를 확인하기위해 글 파일이 필요하다.

1) 테마

우선, 테마를 다운로드 하자. 테마는 hugo공식 사이트에서 원하는 테마를 찾을 수 있다. 원하는 테마를 찾고 다운로드 했다면, themes/{테마이름}에 테마를 넣어주면 된다.

테마는 git을 이용하는 것이 가장 편리하다.

git init

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

submodule 대신 clone을 이용할 수도 있다.

git clone

submodule를 이용하는 이유는 변경사항 발생시 이를 쉽게 받을 수 있기 때문이다. 클론 혹은 손수 다운로드 한 경우에는 변경사항을 직접 관리해야한다.

가장 최고의 방법은 해당 저장소를 folk한 다음 이를 submodule로 받아오는 것이라고 한다. 이렇게 하면 원하는 주기에 업데이트를 받아올 수 있다.

테마의 다운로드가 완료되었다면 config.toml파일을 열어 다음을 추가시켜준다. 테마를 적용한다고 설정하는 과정이다.

theme = 'ananke'

2) 글 작성

hugo는 마크다운을 html로 변환해서 글을 표현한다. 따라서, 우리가 작성할 글은 .md파일을 만들고 거기에 글을 작성하는 것이다. hugo에서는 다음 명령어를 통해 쉽게 만들 수 있다.

hugo new post/글제목.md

그려면 content 폴더에 post라는 폴더가 생기고, 그 post 폴더 안에 글제목.md 파일이 생겼을 것이다. 이를 열어보면 다음과 같은 내용이 있다.

---
title: "글제목"
date: 2022-01-29T16:07:14+09:00
draft: false
---

여기에 글을 작성합니다.

위 부분은 어떤 글의 메타 데이터를 표현하는 것이다. 테마에 따라서 조금 다를 수도 있는데, 이외에도 tags나 categories 등이 더 있을 수도 있다.

글은 —- 아래애 작성해주면 된다. 글을 작성한 다음 저장을 한다면 블로그를 실행할 준비를 마쳤다.

4. 웹 실행

다음 명령어를 cmd에서 실행한다.

hugo server -D
또는
hugo server -T 테마명

-T를 사용하면 위에서 보았던 draft :true된 글만 볼 수 있도록 변경된다.

Start building sites … 
hugo v0.92.0-B3549403 windows/amd64 BuildDate=2022-01-12T08:23:18Z VendorInfo=gohugoio

                   | EN  
-------------------+-----
  Pages            | 18
  Paginator pages  |  0
  Non-page files   |  0
  Static files     | 11
  Processed images |  0
  Aliases          |  8
  Sitemaps         |  1
  Cleaned          |  0

명령 실행 결과가 이와 같이 뜬다면 성공한 것이다. 만약 테이블 위에 어떤 경고나 에러가 뜬다면 혹은 이 결과가 아예 뜨지 않는다면 문제가 발생한 것이다. 이제 웹 브라우저를 열고, localhost:1313를 url로 입력해 접속하면 우리가 만든 블로그의 결과를 확인할 수 있다.