Hugoは最近流行りの静的サイトジェネレータの一つで、Go製。
公式の情報を飛ばし読みながら、GitHub Pagesでさくっとホスティングする方法を試した。
Hugoを導入する
OS Xの場合はbrewで導入できる。
ローカルでホスティングする
インストールできたらまずサイトを作る。
$ hugo new site hugo20160910
$ cd hugo20160910/
hugoを起動
$ hugo server
デフォルトでhttp://localhost:1313でアクセスできるようになるが、ブランクページが表示される。とりあえずテーマを入れることにする。
テーマを追加する
適当にテーマを選んで追加してみる。
$ git clone https://github.com/lasseborly/anybodyhome.git themes/anybodyhome
theme = "anybodyhome"
configやコンテンツの変更はhugoが起動していれば自動で反映されることが多いが、今回は変更後画面更新する必要があるようだ。
まだ見出しだけ。
GitHub Pagesでホスティングする
ローカルで動作確認できたらGitHubへpushしてホスティングしてみる。
GitHubで適当なリポジトリ（プライベートでも可）を作り、settingsのGitHub Pagesのセクションでpublish先URLを確認してbaseurlに設定。canonifyurlsをtrueにする。
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 git@github.com: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 git@github.com:satzz/hugotest.git
$ git add .gitignore config.toml
$ git commit -m'initial commit'
$ git push origin master
この時点でコミットツリーには元データと、public以下に生成されたデータを管理する2つのブランチが独立して存在する。
先日GitHub Pagesがmasterブランチで更新できるようになってフロー改善できるかもしれないが、とりあえずこのままいく。
さらにコンテンツを追加する
ブログのような記事を追加していきたい場合はhugo newを使う。
$ hugo new post/my-new-post.md
+++
date = "2016-09-10T17:59:28-07:00"
title = "my new post"
+++
+++はFront Matterといってメタデータを記述する記法。
さらにpublic以下に、公開するファイルを生成する。
publishdir = "public"
$ hugo
$ tree public/post
public/post
├── index.html
├── index.xml
└── my-new-post
└── index.html
typeとarchetype
別のcontent typeとしてmusicianというコンテンツを追加してみる。このとき、archetypeをつかって、含めるメタデータを設定することができる。
+++
name = ""
bio = ""
genre = ""
+++
$ hugo new musician/mozart.md
+++
bio = ""
date = "2016-09-10T18:11:23-07:00"
genre = ""
name = ""
title = "mozart"
+++
archetypeに追加した変数が、それを使ったコンテンツに既定値として含まれるようになる。
こういった変数やデータ構造を扱う仕組みがいろいろあってうまく活用できると楽しそうだが、今回はあまり深入りせずここまで。
追加コンテンツの確認
この時点でローカルを確認するとコンテンツが追加されているのが確認できる。
public以下を同様にgh-pagesブランチへpushすればGitHub Pagesでも確認できる。