JekyllからHugoに移行しました

これまでこのサイトは、静的サイトジェネレーターのJekyllを使って作っていましたが、記事数が増えてビルドに時間が掛かるようになったので、Hugoに移行しました。

HugoはGoogleによるプログラミング言語Goを使って開発された静的サイトジェネレーターで、構造のシンプルさと処理速度の速さで知られています。Static Site Generatorsによると、GitHubのスター数は2015年10月現在で上から4番目となっており、ここ数年人気を集めているジェネレーターのひとつです。

このほか、移行に合わせて、トップページやタグページなど、サイトを全体的に改修しました。

理由

Jekyll開発チームの名誉のためにあえて言っておくと、Jekyllは決して出来の悪いソフトウェアではありません。完成度は非常に高く、コミュニティの運営は(開発、サポートともに)活発で、日本語の解説記事もたくさんあります。

それでもなお移行を決めた理由は、ビルドの遅さです。

遅い! コレに尽きる。上記のように、7年ほどブログを続けていると記事数が450くらいになってた。jekyll serve --watchして、記事を変更しても体感的に10秒くらいで更新されるような状態だった。ほんの少しスタイル確認したいだけなのに何秒も待たされるのは本当にイライラする。限界だ。

Jekyllの開発チームもビルドの遅さについては認識しており、Jekyll 3.0で試験的に導入されたIncremental regenerationで速度が改善されるようです。ただベータ版を試してみたところ、ほとんど変わっていない気がしました(includeを多用しているからかもしれません)

使い方

Hugoはバイナリで配布されているので、リリースページからダウンロードして、

$ hugo new site /path/to/site
$ cd /path/to/site
$ hugo server

とすれば走ります。Go環境の準備は不要です。

テーマは公式Gitリポジトリのhttps://github.com/spf13/hugoThemes/で配布されています。

$ git clone --recursive https://github.com/spf13/hugoThemes themes

テーマをダウンロードした後、

$ hugo server --theme=foo --buildDrafts --watch

とすれば、テーマとlivereloadが有効になった状態で動きます。ブラウザでhttp://localhost:1313を開くとサイトが表示されるはずです。Livereloadがデフォルトでサポートされているのは便利です。

そのほか、具体的な設定に関しては、公式のHugo Quickstart Guideから見ていくのが手っ取り早いです。あとはテーマを調整しながらカスタマイズしていくといいでしょう。

簡単に移行できたという感想ばかりだったので楽観的に考えていましたが、Liquidテンプレートから移行するのに相当骨が折れました。Goを学ぶ必要はありませんが、慣れるまでは面倒かもしれません。

Hugo公式ドキュメントの主要コーナーへのリンク

公式ドキュメントページはモダンな作りですが、率直に言って使い勝手がよくありません。なので以下、移行作業でよく参照したページへのリンクを載せておきます。

  • Using Hugo - Hugoの使い方(コマンドなど)
  • Configuring Hugo - Hugoの設定(configファイルの書き方)
  • Sections - 「セクション」について
    • Hugoでは、contentディレクトリの内に下位ディレクトリを作り、そこにページファイルを保存していくという仕組みになっています。この下位ディレクトリが「セクション」となります。
  • Go Template Primer - Goテンプレートの使い方
  • Hugo Template Functions - Hugoテンプレートの関数
  • Template Variables - テンプレートの変数
  • Single Content Template - single.htmlのテンプレート
    • single.htmlはセクションごとに設定できます。
  • Content List Template - リストのテンプレート
    • タクソノミーなどのリストを作るためのテンプレートです。
  • Taxonomy Terms Template - タクソノミー一覧ページのテンプレート
    • タクソノミーはタグやカテゴリーのことです。任意に設定することができます。
  • RSS (feed) Templates - RSSフィードのテンプレート
  • Sitemap Template - sitemap.xmlのテンプレート

参考にしたサイト

以下のサイトを参考にしました。

公式サイトにもJekyllから移行する方法についての丁寧な解説があります。

Photo Credit:
  • Steve Francia - Licenced under Simple Public License (SimPL-2.0)
関連記事