技術ブログ | 株式会社アイプランニング IPlanning corporation

アイプランニング社員が調査したこと、学んでいることが具体的にどんなものなのかを披露します。 Here is what the IPlanning corp employees surveyed and what they learned.

会社ホームページをjekyllからhugoに移行する

アイプランニングのホームページのビルド環境を、JekyllからHugoに置き換えました。

経緯

Jekyllは、非常に人気のある静的サイト生成ツールです。 当ホームページも、Jekyllで生成していました。

ただし、アイプランニングのホームページのような、非常にシンプルなサイトでも ビルドに若干時間がかかってしまう（手元ではフルビルドで６秒以上）という問題がありました。

また、社内はWindowsユーザが大半で、Rubyを使うにあたって敷居が高いという問題もありました。 もう少しお手軽なものに乗り換えようと考え、下記の静的サイトジェネレータを検討しました。

検討した静的サイトジェネレータ

f:id:iplcojp:20180223194741p:plain

Metalsmith

  • 機能を高度にモジュール化した静的サイトジェネレータです。
  • モジュールを組み合わせることでかなり細かく動作をカスタマイズできます。
  • Node.jsで動作しますが、Jekyllに比べて特に高速というわけではないようです。
  • 幾つかのプラグインがメンテされていないようでした。
  • エラーがあったファイル名を表示しないケースがありました。

f:id:iplcojp:20180223194845p:plain

Hexo

  • Node.js製のサイトジェネレータの中でも最も人気のあるツールで、かなり多機能です。
  • 今回はブログ関連の機能は不要なので、見送りました。

f:id:iplcojp:20180223194917p:plain

Hugo

  • Go言語で書かれており、圧倒的にビルドが高速です。
  • マルチプラットフォームのバイナリが配布されており、ランタイムが必要ないためインストールが簡単です。Macの場合はhomebrew経由でインストールできます。

ということで、今回はhugoを選択しました。

jekyllテンプレートからの移行

基本的に、hugoのディレクトリ規約に寄せていきます。

ディレクトリ構成は下記のようになりました。

.
├── config.toml
├── content（ここにmarkdownを配置）
├── layouts
│   ├── _default（ここにテンプレートを配置）
│   └── partials（HTMLの断片を配置）
├── package.json
├── public（生成先）
└── static（CSS, JSなどのアセットはここに配置）
  • まず、ビルド対象のコンテンツはcontent/に移動
  • staticファイルはstatic/に移動

  • layoutsの移行

  • 多段になっているlayoutを１段にする

    • 多段layoutに対応しているフレームワークは少ないので、多段構成から脱却しておくほうが選択肢が広がります。
    • なるべくpartialsに切り出して、繰り返しがあったとしても最小になるようにします。

  • sassを除去（弊社HP構築ではsassがそれほど有用ではなかったのと、ruby依存を切るため）

config.tomlを書く

config.tomlを下記のようにしました。

baseURL = "https://www.ipl.co.jp/"
languageCode = "ja-jp"
title = "株式会社アイプランニング〜プログラム開発請負"
uglyURLs = true

uglyURLsはデフォルトでfalseですが、これがfalseになっていると/content/test.htmlは/content/test/index.htmlになってしまいます。 今回は移行目的だったため、リンクのメンテナンスを避けるためにuglyURLsをtrueにしました。

テンプレートの違いについて

hugoのテンプレートとして、layouts/_defaultにsingle.htmlを配置しました。

<!DOCTYPE html>
<html lang="ja">

{{ partial "header.html" . }}

<body>
    <div id="page">
        {{ partial "nav.html" . }}

        <div id="content" class="clearfix">

            <div class="top__animation">
                <a href="/recruit/">
                    <img src="/images/ipl_top_960.jpg" alt="2019年度新卒募集　プログラミング未経験者歓迎・人物重視　あなたの個性を活かしてみませんか？">
                    <canvas width="960" height="555"></canvas>
                </a>
            </div>

            {{ partial "sidebar.html" . }}
            <article>
                {{ .Content }}
            </article>
        </div>
        {{ partial "footer.html" . }} {{ partial "ga.html" . }}
    </div>
    <script src="/lib/jquery-2.1.4.min.js"></script>
    <script src="/index.js"></script>
</body>

</html>

基本的にはmustacheです。jekyllと似ていますが、違う点は、.Contentなどのプロパティ名がCamelCaseであることです。

詰まったところ

  • CamelCase.htmlが404になる

本件は理由が不明ですが、ひとまずkebab-case.htmlにリネームしました。

  • hugo server -wでファイル書き換えを検知してリビルドしてくれるサーバが起動するが、ファイル名変更は検知されない

ファイル名の変更や追加をした際、hugo serverを再実行する必要があります。

結果

jekyll3で6秒以上かかっていたフルビルドが、600ms〜700msに短縮されました。

インクリメンタルビルドではjekyll3も速い（2秒前後）ですが、それでもフルビルドのhugoの方が高速です。 快適にプレビューすることが出来るので、頻繁に更新するサイトに良さそうです。 また、副産物として、rssが自動生成されるようになりました。

問題点として、hugoのドキュメントがやや目的の情報を探しづらいと感じました。 オプションや暗黙の挙動などを調べる手間を考えると、基本的には提供されているサンプルから逸脱しない範囲でサイトを構成するのが良さそうです。