去年くらいから周りで流行っているので自分も Octopress から HUGO にしてみました。

といいつつ Octopress のときも数記事しか書いていないので今回は続くようにしたいところ。

（Web サイト自体 1998 年くらいから作っては消しての繰り返しをしているのであまり信用ならない）

（サイトタイトルも 10 年くらい前のものを思い出して流用しています）

HUGO導入メモ

自分的備忘録です。

インストール

Mac の場合は brew 一発。その他の環境の場合は Readme を参考にしてください。

$ brew install hugo

作業の流れ

基本的には Hugo Quickstart の通りに進めれば OK。

# サイトの新規作成
$ hugo new site my-site-name
$ cd my-site-name

# content/ 配下に記事を作成
$ hugo new post/hoge-fuga.md

# localhost:1313にローカルサーバを立ててプレビュー (-t = --theme, -w = --watch, -D = --buildDrafts)
$ hugo server -t (themes/配下に置いたテーマ) -w -D

# 記事の下書き設定を解除 (記事内の draft = true を false に変える)
$ hugo undraft content/post/hoge-fuga.md

# public 配下に静的ファイル作成
$ hugo -t (themes/配下に置いたテーマ)

※ -t (themes/配下に置いたテーマ) は実際には -t hugo-future-imperfect のような値になります

簡単なカスタマイズ

HUGO はテーマがないと何も表示されないので、好きなテーマをHugo Themes Siteあたりから探してきます。

今回はHugo Future Imperfectを使ってみます。

$ mkdir themes
$ cd themes
$ git clone https://github.com/jpescador/hugo-future-imperfect.git

hugo-future-imperfect テーマにはサンプルデータがあるので、中にある exampleSite/ 配下をサイト直下に上書きします。

$ mv hugo-future-imperfect/exampleSite/* ../
$ rmdir hugo-future-imperfect/exampleSite

hugo-future-imperfect はブログ記事は content/post/ でなく content/blog/ 配下を想定した作りなので、それに従って 前述の hugo new post/hoge-fuga.md は hugo new blog/hoge-fuga.md として content/blog/ 配下に記事を作成することにします。

また、記事のURLを日時込みのparmalinkにしたかったので、Hugo - Permalinksを見つつ config.toml に以下のように書きます。

[permalinks]
    blog = "/blog/:year/:month/:slug/"

ちなみにHugo - Permalinksには

permalinks:
  post: /:year/:month/:title/

と書いてありますが、これは yml 形式の config.yml の時で、かつ content/post/ 配下を対象にする時の書き方です。 ちなみに日本語のタイトルだと :title がうまいことエンコードしてくれない＆URLが長くなるので 記事側に slug = "..." を書いて、これをURLにさせるようにしています。

公開

以前のOctopress エントリと同様にサイトの元データは bitbucket のプライベートリポジトリに置いているので、public/ 配下のみを GitHub Pages に push することにします。

事前にローカルへの git init, git add, git commit、および GitHub 側に <ユーザ名>.github.io リポジトリ作成が 終わってるものとして、以下のように git subtree で public 以下を指定して公開します。

$ git remote add gh-pages https://github.com/<ユーザ名>/<ユーザ名>.github.io.git
$ git subtree add --prefix=public --squash gh-pages master
$ git subtree push --prefix=public gh-pages master

独自ドメイン

自分の場合は前の Octopress エントリ にあるようにファイルを GitHub Pages に置きつつ DNS を独自ドメインに向けているので、前回と同様に CNAME ファイルを static/ に置いています。

$ echo 'sfus.net' >> static/CNAME

参考URL