Hugo와 GitHub Pages로 정적 사이트 게시

Hugo는 최근 유행의 정적 사이트 제너레이터 중 하나로 Go제.

Hugo

공식 정보를 살펴보고 GitHub Pages에서 빨리 호스팅하는 방법을 시도했다.

Hugo 소개

OS X의 경우는 brew로 도입할 수 있다.

htps : // 고후고. 이오 / 츠토리아 ls / 인 s 탤

로컬에서 호스팅

설치할 수 있으면 먼저 사이트를 만든다.

$ hugo new site hugo20160910

$ cd hugo20160910/

hugo 시작

$ hugo server

기본적으로 http://localhost:1313로 액세스 할 수 있지만 공백 페이지가 표시됩니다. 우선 테마를 넣기로 한다.

테마 추가

적당히 테마를 선택해 추가해 본다.

htps : /// ぇめ s. 고후고. 이오/

$ git clone https://github.com/lasseborly/anybodyhome.git themes/anybodyhome

config.toml

theme = "anybodyhome"

config나 컨텐츠의 변경은 hugo가 기동하고 있으면 자동으로 반영되는 것이 많지만, 이번은 변경 후 화면 갱신할 필요가 있는 것 같다.



아직 제목만.

GitHub Pages에서 호스팅하기

로컬에서 동작 확인할 수 있으면 GitHub에 push하고 호스팅 해 본다.

GitHub에서 적절한 리포지토리(개인도 가능)를 만들고 설정의 GitHub Pages 섹션에서 publish 대상 URL을 확인하여 baseurl 로 설정합니다. canonifyurls 를 true 로 한다.

config.toml

theme = "anybodyhome"
languageCode = "en-us"
title = "My New Hugo Site"
baseurl = "https://satzz.github.io/hugotest"
canonifyurls = true

호스팅 내용 생성

$ hugo 

에서 호스팅 내용은 public 디렉토리로 생성됩니다.public 다음을 저장소의 gh-pages 분기에 푸시합니다.

$ cd public/
$ git init
$ git remote add origin [email protected]:satzz/hugotest.git
$ git checkout -b gh-pages
$ git add --all
$ git commit -m'initial commit for gh-pages'
$ git push origin gh-pages

push하고 1분 전후 기다리면, baseurl 로 설정한 URL로 호스팅 되어, 로컬과 같이 보이게 된다.

public 디렉토리 이외의 푸시

호스팅에는 직접 필요 없지만, 사이트의 원 데이터도 물론 Git 관리하고 싶기 때문에 master 브랜치에 push 해 둔다.
자동 생성되는 내용은 제외한다.

$ vi .gitignore
themes
public
*.swp

$ cd ..
$ git remote add origin [email protected]:satzz/hugotest.git
$ git add .gitignore config.toml 
$ git commit -m'initial commit'
$ git push origin master

이 시점에서 커밋 트리에는 원래 데이터와 public 이하로 생성된 데이터를 관리하는 2개의 브랜치가 독립적으로 존재한다.



요 전날 GitHub Pages가 master 브랜치로 갱신할 수 있게 되어 플로우 개선할 수 있을지도 모르지만, 우선 이대로 가는.

htps : // 기주 b. 코 m / b ぉ g / 2228

추가 콘텐츠 추가

블로그와 같은 기사를 추가하고 싶은 경우는 hugo new 를 사용한다.

$ hugo new post/my-new-post.md

content/post/my-new-post.md

+++
date = "2016-09-10T17:59:28-07:00"
title = "my new post"

+++

+++ 는 Front Matter라고 하여 메타데이터를 기술하는 기법.

htps : // 고후고. 이오 / 콘텐 t / f 롱 t - r /

또한 public 이하에, 공개하는 파일을 생성한다.

config.toml

publishdir = "public"

$ hugo

$ tree public/post
public/post
├── index.html
├── index.xml
└── my-new-post
    └── index.html

type 및 archetype

다른 콘텐츠 형식으로 음악이라는 콘텐츠를 추가해 봅니다. 이 때 archetype을 사용하여 포함 할 메타 데이터를 설정할 수 있습니다.

htps : // 고후고. 이오 / 콘텐 t / 아 r ぇ ty pe s /

archetypes/musician.md

+++
name = ""
bio = ""
genre = ""
+++

$ hugo new musician/mozart.md

content/musician/mozart.md

+++
bio = ""
date = "2016-09-10T18:11:23-07:00"
genre = ""
name = ""
title = "mozart"

+++

archetype에 추가한 변수가 그것을 사용한 내용에 기본값으로 포함됩니다.

이런 변수나 데이터 구조를 다루는 구조가 여러가지 있어 잘 활용할 수 있다고 즐거운 것 같지만, 이번은 그다지 깊숙이 들어가지 않고 여기까지.

추가 콘텐츠 확인

이 시점에서 로컬을 확인하면 컨텐츠가 추가되어 있는 것을 확인할 수 있다.


public 다음을 마찬가지로 gh-pages 브랜치에 push하면 GitHub Pages에서도 확인할 수 있다.