Jekyllサイトにタグとミニマイズを
22nd July 2018このサイトを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
を作成して完成です。