Why Hugo ?

Static Site Generator를 이용해서 블로그를 해보자! 라고 마음먹고 검색하니 아래 4가지를 많이 사용하는 것 같았다.

• Jekyll (Ruby)
• Hugo (Go)
• Hexo (Javascript/Node)
• GATSBY

Jekyll을 우선 사용해보았는데, 빌드 속도가 약간 느리더라. Ruby언어도 익숙치 않고. 그래서 다시 어떤 툴을 사용해 볼까 고민하다가 Hugo를 선택했다. 이유는,

• Jekyll 보다 빠르다.
• Go 언어 기반이다. (개인적으로 Go 언어를 좋아한다.)

설치

Official Guide : https://gohugo.io/getting-started/installing/

설치는 꽤 간단하다. 나는 Mac을 사용 중인데 한 줄로 설치가 끝났다.

brew install hugo

첫 블로그 포스팅

설치가 끝나면 hugo 라는 명령어를 사용하여 블로그 사이트를 생성해야 한다. 이 글에서는 사이트 이름을 My Blog Site, 폴더명을 my-blog-site로 하겠다.

# create a site
hugo new site my-blog-site

# change directory
cd my-blog-site

위 명령어를 입력하면 my-blog-site라는 폴더가 생성되고 폴더 내부는 아래와 같은 구조다.

.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

여러 폴더가 보이는데 각 폴더의 역할을 모두 설명하기 보단 필요한 순간에 다시 언급하도록 하겠다. 우선은 첫 포스팅을 작성해보는게 우선이다. 첫 포스팅을 위한 파일을 아래 명령어로 생성하자. 여기서는 파일명을 first-post.md로 했다.

hugo new posts/first-post.md

아래와 같이 몇 개 폴더와 파일이 생성된 걸 볼 수 있다.

.
├── archetypes
│   └── default.md
├── config.toml
├── content
│   └── posts                 <<< 추가됨
│       └── first-post.md     <<< 추가됨
├── data
├── layouts
├── resources                 <<< 추가됨
│   └── _gen                  <<< 추가됨
│       ├── assets            <<< 추가됨
│       └── images            <<< 추가됨
├── static
└── themes

resources 폴더는 일단 무시하고 first-post.md 파일을 열어 내용을 작성해보자.

---
title: "First Post"
date: 2021-01-16T19:49:44+09:00
draft: true
---

# 첫 번째 포스팅 (이것은 제목)

앞으로 할 일

- https://fshilver.github.io 매일 방문하기
- 두 번째 포스팅 작성하기

첫 번째 포스팅을 작성했다. 이 글을 웹 브라우저에서 확인해보자. 그러기 위해선 이 글이 사용할 테마를 설정해야 한다. Hugo 공식 홈페이지 가이드에 나와 있는 테마로 설정해보겠다. 다른 테마를 사용하고 싶다면 Hugo 테마 공식 사이트에서 살펴보자.

# 현재 폴더 : my-blog-site
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

• config.toml

  baseURL = 'http://example.org/'
  languageCode = 'en-us'
  title = 'My New Hugo Site'
  theme = "ananke"                 # << 추가
  

git init명령어로 현재 폴더 my-blog-site를 git repository로 만들었다. Hugo를 선택한 여러분은 git을 이용해 글의 버전 관리를 할 거라 생각하기 때문에 별도의 설명은 하지 않겠다. 이제 hugo 명령어로 서버를 실행한 후 웹 브라우저로 작성한 글을 확인해보자. 갑자기 왠 서버라는 생각이 들겠지만 일단 보고 설명하겠다.

# 현재 폴더 : my-blog-site
hugo server -D

위 명령을 실행하면 아래와 같은 로그가 나오는데 이 중 http://localhost:1313 부분이 웹브라우저로 접속해야 하는 주소다. 이 주소를 열어보자.

Start building sites …

                   | EN
-------------------+-----
  Pages            | 10
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  6
  Processed images |  0
  Aliases          |  1
  Sitemaps         |  1
  Cleaned          |  0

Built in 16 ms
...(생략)
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

축하한다. 첫 번째 포스팅이 웹 브라우저에서 잘 보인다. Hugo의 개발 서버를 이용하면 작성하는 글이 실시간으로 웹 브라우저에서 어떻게 보이는지 확인 가능하다. 서버가 실행 중인 상태에서 글을 수정하고 저장하면 자동으로 웹 브라우저가 새로고침 된다!

메타 데이터 살펴보기 (Front Matter)

hugo 명령어로 포스팅 파일을 생성하면 다음과 같은 내용이 포함되어 있다.

---
title: "First Post"
date: 2021-01-16T19:49:44+09:00
draft: true
---

---로 둘러쌓여 있는 이 부분인데 이 값들은 해당 문서에 대한 설명, 즉 메타 데이터다. Hugo에서는 Front Matter라고 부른다. Front Matter는 yaml, toml, json 3가지 포맷을 지원한다. 개인적으로 yaml을 선호하기에 앞으로의 포스팅에서는 모두 yaml 포맷으로 설명한다. default로 생성된 항목들을 하나하나 살펴보자.

title

• 포스팅 제목이다. 글의 최상단에 나올 뿐만 아니라 웹 브라우져의 탭에 표현되는 문구로 사용된다.
  • Safari
  • Firefox

date

• 포스팅 최초 생성 시점이다. 이 값을 사람이 수동으로 적어 넣는건 꽤 귀찮은 일이라서 hugo 명령어로 파일을 생성하면 자동으로 현재 시각값을 넣어준다.

  hugo new posts/<파일명>
  

draft

• 글을 공개해도 되는 상태인지 아닌지에 대한 값이다. true/false 값을 가질 수 있다. true 인 경우 공개되지 않는다.
• 이 값이 true 상태인 글은 기본적으로 개발 서버에서도 보이지 않는다. 아직 작성중인 글이니 노출되면 안된다.는 뜻이기 때문이다.
• 이 값이 true 인 글들도 보기 위해서 hugo 서버 실행 시 -D 옵션을 추가해야만 한다.

# draft: true 상태인 글들은 노출되지 않음
hugo server

# draft: true 상태인 글들도 노출
hugo server -D

빌드

빌드 명령어는 아무 옶션 없이 hugo를 입력하면 된다.

# 현재 폴더 : my-blog-site
hugo

# draft: true 상태인 글도 포함하고 싶을 경우
hugo -D

빌드가 완료되면 public 이라는 폴더 아래 필요한 모든 파일이 생성된다.

.
├── archetypes
│   └── default.md
├── config.toml
├── content
│   └── posts
│       └── first-post.md
├── data
├── layouts
├── public                       <<< 빌드 결과물 저장 경로
│   ├── 404.html
│   ├── categories
│   │   ├── index.html
│   │   └── index.xml
│   ├── dist
│   │   ├── css
│   │   │   ├── app.1cb140d8ba31d5b2f1114537dd04802a.css
│   │   │   ├── app.4fc0b62e4b82c997bb0041217cd6b979.css
│   │   │   ├── app.7e7787cc1402d7de28bc90f7e65adf96.css
│   │   │   └── app.e6e75cdafe2e909dacfabeb26857f994.css
│   │   └── js
│   │       └── app.3fc0f988d21662902933.js
│   ├── images
│   │   └── gohugo-default-sample-hero-image.jpg
│   ├── index.html
│   ├── index.xml
│   ├── posts
│   │   ├── first-post
│   │   │   └── index.html
│   │   ├── index.html
│   │   ├── index.xml
│   │   └── page
│   │       └── 1
│   │           └── index.html
│   ├── sitemap.xml
│   └── tags
│       ├── index.html
│       └── index.xml
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static

웹 서버의 root 경로에 public 폴더안의 내용을 복사하면 웹 서버를 통해 접근 가능하다. 그러나 개인 용도의 웹 서버를 갖고 있는 사람은 매우 드물기 때문에 보통 github.com을 많이 애용한다. github.com에 빌드 결과물을 올리는 방법은 아래와 같다.

1. github.com 가입 후 계정 생성

2. 계정명.github.io 라는 이름으로 repository 생성

   • 내 github 계정명은 fshilver이기 때문에 아래와 같이 생성

     

3. public 폴더 안의 내용을 해당 git repository로 push 한다.

   • public 폴더명을 포함해서 올리는게 아니라 안의 내용만 push해야 한다. 헷갈린다면 https://github.com/fshilver/fshilver.github.io에 방문해서 확인해보자.

이상으로 글을 마치며 다음 글에서는 이미지가 포함된 글을 작성하는 방법에 대해 알아보자.