HugoとGitHub Pagesで静的サイトを公開する

Hugoは最近流行りの静的サイトジェネレータの一つで、Go製。

• Hugo

公式の情報を飛ばし読みながら、GitHub Pagesでさくっとホスティングする方法を試した。

Hugoを導入する

OS Xの場合はbrewで導入できる。

• https://gohugo.io/tutorials/installing-on-mac/

ローカルでホスティングする

インストールできたらまずサイトを作る。

$ hugo new site hugo20160910

$ cd hugo20160910/

hugoを起動

$ hugo server

デフォルトでhttp://localhost:1313でアクセスできるようになるが、ブランクページが表示される。とりあえずテーマを入れることにする。

テーマを追加する

適当にテーマを選んで追加してみる。

• https://themes.gohugo.io/

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

config.toml

theme = "anybodyhome"

configやコンテンツの変更はhugoが起動していれば自動で反映されることが多いが、今回は変更後画面更新する必要があるようだ。

まだ見出しだけ。

GitHub Pagesでホスティングする

ローカルで動作確認できたらGitHubへpushしてホスティングしてみる。

GitHubで適当なリポジトリ（プライベートでも可）を作り、settingsの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ブランチへpushする。

$ cd public/
$ git init
$ git remote add origin [e-mail]: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ディレクトリ以外をpushする

ホスティングには直接必要ないが、サイトの元データももちろんGit管理したいのでmasterブランチへpushしておく。
自動生成される内容は除いておく。

$ vi .gitignore
themes
public
*.swp

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

この時点でコミットツリーには元データと、public以下に生成されたデータを管理する2つのブランチが独立して存在する。

先日GitHub Pagesがmasterブランチで更新できるようになってフロー改善できるかもしれないが、とりあえずこのままいく。

• https://github.com/blog/2228-simpler-github-pages-publishing

さらにコンテンツを追加する

ブログのような記事を追加していきたい場合は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といってメタデータを記述する記法。

• https://gohugo.io/content/front-matter/

さらにpublic以下に、公開するファイルを生成する。

config.toml

publishdir = "public"

$ hugo

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

typeとarchetype

別のcontent typeとしてmusicianというコンテンツを追加してみる。このとき、archetypeをつかって、含めるメタデータを設定することができる。

• https://gohugo.io/content/archetypes/

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でも確認できる。