Go라는 언어에 관심이 생기고 현재 블로그를 굳이 특정 플랫폼이 아닌 Static Site로 가볍게 제공하고 싶다는 마음이 생겼다. 그리고 내가 손쉽게 수정 & 활용 가능한 Static Web Generator 플랫폼으로 Hugo를 관심있게 살펴보았다. 그 결과 지금의 블로그를 구성하며 정리한 설치/기본 설정 방법이다.

본 글은 Hugo를 이용하여 블로그를 구성하는 방법이다.

왜 Hugo를 골랐을까?

Static website를 만드는 다양한 프로그램 중 Jekyll vs Hugo이 유명하다. 특히 Jekyll은 유명세만큼 폭 넓은 사용, 다양한 테마, 풍부한 설명(공식 설명, 블로그 포스트)들이 존재한다.

Jekyll-vs-Hugo

Jekyll의 경우, 너무나 유명해서 레퍼런스는 많이 존재하지만 개인적으로 Ruby, Gem, Bundler에 대한 무지(무식)로 인해 항상 문제가 생겼다. 실제로 원하는 테마 적용 및 커스텀, 블로그 글 작성 중 오류에 헤매다가 지쳐서 포기하였다. 그래서 한창 재미있게 보고있는 Go 언어로 만들어진 Hugo를 선택하였다. 순수하게 그냥 재미있어 보여서 선택하였다. (이유가 조금 부끄럽다...^^;) 그리고 Elastic 제품군으로 나온 Beats도 Go로 되어있기 때문에 Beats를 프로젝트에서 활용할 때 도움이 된다는 자기 합리화 과정을 거쳐 최종적으로 앞으로 블로그는 Hugo로 작성하기로 하였다.

사실 처음부터 원하는 기능 간단했다.

  • Markdown으로 글 작성
  • Git을 이용하여 글을 보관 및 버전 관리
  • Go 언어를 이용한 프로그램 사용 및 수정

이러한 목적을 정확히 부합하는 것이 Hugo 였다. 이 외에도 다른 제품에 비해 성능이 좋다라는 블로그 글도 있었으나 개인적으로 성능차이를 느낄 정도로 많은 문서가 있지 않기 때문에 결정에 큰 요인은 되지 않았다. 일단 아래의 내용을 보기 전에 2분만 투자해서 https://gohugo.io/overview/quickstart/ 중간에 있는 동영상을 보면 아래의 글을 볼 필요도 없을 정도로 쉽게 동영상 설명이 있다.

Hugo 설치

Go는 당연히 설치하고 Hugo도 설치한다.

맥을 사용하는 입장에서 이런 제품을 설치할 때 제일 편한 것이 Brew 이다! Brew Cask도 최고!

Hugo를 이용한 사이트(블로그) 생성

Hugo를 이용하여

  1. 새로운 사이트를 생성하고
  2. 테마를 적용한 뒤
  3. 마음껏 활용(글을 작성)

하는 순서로 사용한다.

Hugo 사이트 생성

애초에 블로그를 사용하기 위해서 Hugo를 선택하였으니 다음의 명령어로 블로그를 위한 새로운 사이트를 생성한다.

$ hugo new site blog.lulab.net

Hugo 파일 구조

위와 같이 디렉토리가 구성되는데 주요한 디렉토리는 다음과 같다.

  • content: 글이 작성되는 디렉토리
  • themes: 테마 디렉토리 (처음 설치 시에는 수동으로 생성 필요)
  • config.toml: Hugo 설정 파일, 테마 및 주소, 사용자 정보 등을 설정
  • 그 외 참고: https://gohugo.io/overview/source-directory/

Hugo 테마 적용

자신에 선택한 테마에 설치 방법들이 작성(예: https://github.com/lubang/hugo-hello-programmer-theme)되어 있다.

간단하게 다음의 명령으로 테마를 다운로드 받는다.

$ cd themes
$ git clone https://github.com/lubang/hugo-hello-programmer-theme

그리괴 hugo 설정에 테마를 적용하기 위해 ./config.toml 수정한다. 아래는 (Hello Programmer 테마)[https://github.com/lubang/hugo-hello-programmer-theme] 테마 적용 예제이다.

// config.toml
baseURL = "https://blog.lulab.net/"
languageCode = "kr-ko"
title = "$HELLO_PROG^"
theme = "hugo-hello-programmer-theme"

disqusShortname = "XXXXXXXXXXXXXXX"

googleAnalytics = "UA-XXXXXXXXXX-X"

paginate = 7

[author]
    name = "자신의 이름 혹은 아이디"
    email = "이메일 주소"

다른 테마를 적용할 때는 꼭 테마에서 제공하는 설정을 확인하도록 한다.

Hugo 글 생성

테마에서 제공되는 archetypes(기본 글 구조)를 나의 사이트에 적용한다. archetypes/default.md 파일을 다음과 같이 수정한다.

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
categories: []
tags: []
draft: true
---

Hugo 에서 글 생성은 new 라는 키워드를 이용하여 생성한다.

$ hugo new programming/java.md

위의 명령은 programming이라는 디렉토리 아래 java.md 라는 Markdown 파일을 생성하는 명령이다. 이렇게 생성된 글은 위의 archetypes으로 자동 생성된다.

---
title: "Java"
date: 2018-02-04T16:04:46+09:00
categories: ["essay"]
tags: ["hugo", "blog", "theme", "jekyll", "hello-programmer", "lubang"]
---

여기에 글을 적어요~~

여기서 중요한 부분은 draft이다. draft = true 로 되어 있는 경우, 사이트로 Publishing되지 않는다. draft는 글 작성 중 사용하고 작성이 완료된 후, 출판될 때는 간단하게 해당 줄을 삭제하여 Publishing 한다.

Hugo 사이트 미리보기

이제 작성한 글과 Hugo를 이용하여 생성한 결과가 어떻게 되는지 미리보기가 필요한 순간이다.

$ hugo server -D

위 명령어는 hugo server를 시작하여 지금 작성된 글을 보여준다. 글(.md) 파일을 수정하면 자동으로 갱신하여 제공된다. 기본 주소는 http://localhost:1313에서 미리보기를 확인할 수 있다.

Hugo 배포파일(Static files) 생성하기

Hugo를 처음 사용한 목적은 Static WebSite를 생성하여 Apache로 배포하기 위함이다. 드디어 그 목적을 이루기 위해서 배포파일을 생성한다.

$ hugo

위와 같이 hugo만 입력하면 public 디렉토리로 배포 파일을 생성된다. 실제로 웹서버에 업로드 하는 경우에는 public에 생성된 파일을 복사하면 끝이다.
이 외에도 hugo 는 다양한 명령어들을 제공(https://gohugo.io/commands/hugo/)하고 있다.

Hugo에 대한 개인적인 느낌

Hugo는 Go라는 깔끔하고 간결한 언어 기반의 Static Web을 위한 다양한 기능을 제공해주는 프로그램이다.

  • 장점
    • 아직 v0.3X 이라는 낮은 버전이지만 뛰어난 성능
    • 처음 접해도 쉬운 사용법
  • 단점
    • 미흡한 Theme 종류 (Hello Programmer 테마 좋아요! 두 번 쓰세요!... 부끄럼~)
    • 낮은 인지도 (Go 언어의 아직 낮은 인지도, Hugo 자체도 아직 많이 모름)

Hugo를 사용하였을 때 아쉬운 점은 테마였다. 아직 Jekyll에 비해 수적으로 질적으로 부족하다. 많은 개발자/디자이너들이 Hugo에 대한 관심과 지원이 있으면 더 좋은 프로그램이 될 수 있을 것으로 생각된다.

Go 언어를 공부하며 Hugo의 구조 및 Theme를 개인적으로 만들어서 Hugo의 발전에 조금이라도 기여해야겠다. 아직 Go도 모르는데 Theme 제작까지 가능할지 모르겠지만 이렇게 글을 써서라도 인지도를 올리는 것도 큰 도움이 되길 바란다.


작년에 적은 글인데 이번에 테마를 업데이트 하면서 다시 업데이트 해보았다. 그래서 약간 어색한 부분이 있을지도?
어쩌튼 작년에 결심했던 Theme를 개인적으로 만들어야겠다 라는 마음을 실제로 구체화해서 Hello Programmer 테마를 만들었다.

hugo-hello-programmer-theme

그래서 셀프 홍보 겸 글에서 사용되는 테마 예제도 Hello Programmer 테마로 작성하였다. 음, 그래도 괜찮은 편인데 많이 사랑해주세요!!