Jekyllサイトにタグとミニマイズを

このサイトをJekyllに移行したことでメンテナンスはかなり簡単になりました。Github Pagesのホスティングを使っているのでJekyllで構築したサイトも自動生成してくれます。

ただ、Github Pagesで利用できるJekyllプラグインには制限があり、利用したかったタグごとのページ生成プラグインや、ミニマイズのプラグインは利用できませんでした。仕方なしとは思っていたのですが、タグごとに記事がまとまっているURLがあったほうが記事を紹介する際にも便利ですからGithub Pages側でHTML生成してもらうのではなく、あらかじめ手元でHTMLを生成することにしました。

Docker環境

HTML生成のためにプラグインなどを導入済みのDocker環境を作っておきます。

FROM jekyll/jekyll:stable

RUN apk add --no-cache --virtual build-dependencies build-base
RUN apk add --no-cache libxml2-dev libxslt-dev
RUN apk add --no-cache ruby-dev curl-dev zlib-dev yaml-dev
RUN gem install nokogiri
RUN gem install minima
RUN gem install jekyll-import
RUN gem install jekyll-minifier
RUN gem install jekyll-tagging
RUN gem install jekyll-paginate

ENTRYPOINT ["jekyll", "build", "--config", "/srv/jekyll/source/_config.yml,/srv/jekyll/source/_config_prd.yml", "--destination", "/srv/jekyll/release", "--source", "/srv/jekyll/source"]

なお、ディレクトリ構成は次のようなイメージです。必要に応じて読み替えてください。

• サイトルート
  • source … Jekyllのソース一式
  • release … Github PagesにアップロードするHTML一式
  • staging … 表示確認用HTML生成先

表示確認用にjekyllをserveで起動するには最後の行を下記のように変えたイメージを準備しておきます。

ENTRYPOINT ["jekyll", "serve", "--config", "/srv/jekyll/source/_config.yml,/srv/jekyll/source/_config_dev.yml", "--watch", "--destination", "/srv/jekyll/staging", "--source", "/srv/jekyll/source"]

設定ファイル_config.ymlは共通のものと、表示確認用のもので分離しています。これはMinifierは実行にそれなりに時間がかかるプラグインを外したり、デバッグ用にURLを切り替えるなどしています。 ちなみにMinifierを有効化した際、本サイトのデータを手元のMacBook Pro (Late 2016、Core i7)で実行してMinifierがない場合と比べ1分程度の追加時間が必要となります。

タグの有効化

jekyll-taggingプラグインを利用します。プラグインの設定とjekyll-taggingへの設定は下記のようなイメージです。ハマりどころとして、jekyll-taggingは jekyll/taggingとスラッシュで区切ります。他のプラグインはだいたいjekyll-paginateのようにハイフン区切りなのでそれに倣ってしまいがちです。。

plugins:
  - jekyll-paginate
  - jekyll-sitemap
  - jekyll/tagging

tag_page_layout:          tagpage
tag_page_dir:             tags
tag_permalink_style:      pretty

あとはjekyll-taggingの説明にあるように_plugins/ext.rbへプラグイン指定追加、_layouts/tag_page.htmlを作成して完成です。