Jekyllの設定ファイルを動的に生成して静的サイトを柔軟にする方法

静的サイトジェネレーター「Jekyll」は、_config.yml ファイルを使ってサイト全体の設定を行います。このファイルに記述できるのはJekyll固有の設定だけではありません。独自の変数を自由に定義し、サイト全体で活用することも可能です。本記事では、Jekyllの設定ファイルを動的に生成するメリットと具体的な手法を解説します。

ローカル環境でのサーバー起動コマンド

筆者はローカルPCでJekyllサイトをテスト表示する際、以下のコマンドを使用しています。

bundle exec jekyll serve --incremental --config _config.yml

複数の設定ファイルを組み合わせる

ローカルテスト中には、設定内容を上書きしたい場面がよくあります。例えば、筆者のサイトの _config.yml は以下のような設定になっています。

# Jekyll Configuration

# Site Settings
url: "https://notes.ayushsharma.in"
website_url: "https://notes.ayushsharma.in/"
title: ayush sharma's notes ☕ + 📖 + 🎥
email: ayush@ayushsharma.in
images-path: /static/images/
videos-path: /static/videos/
js-path: /static/js/
baseurl: "" # サイトのサブパス(例: /blog)

ローカルの jekyll serve のURLは https://localhost:4000 であるため、上記で定義した本番用URLでは正しく動作しません。_config.yml を _config-local.yml としてコピーし、すべての値を書き換えることもできますが、もっと簡単な方法があります。

Jekyllでは複数の設定ファイルを指定でき、後から読み込んだファイルの内容が前のものを上書きします。つまり、以下のように記述した新しい _config-local.yml を作成すればよいのです。

url:""

そして、このファイルをメインの _config.yml と次のように組み合わせます。

bundle exec jekyll serve --incremental --config _config.yml,_config-local.yml

両方のファイルを組み合わせることで、この jekyll serve 実行時における url の最終的な値は空になります。これにより、サイト内で定義されたすべてのURLが相対URLとして扱われ、ローカルPCでも正しく表示されるようになります。

動的に生成した設定ファイルを組み合わせる

シンプルな例として、サイトに現在の日付を表示したい場合を考えてみましょう。これを実現するbashコマンドは以下の通りです。

> date '+%A, %d %B %Y'
Saturday, 16 October 2021

_config.yml にはカスタムコンテンツも定義できるため、上記のコマンドで取得した日付を新しいJekyll設定ファイルに出力してみます。

my_date=`date '+%A, %d %B %Y'`; echo 'my_date: "'$my_date'"' > _config-data.yml

これで _config-data.yml の中身は以下のようになります。

my_date: "Saturday, 16 October 2021"

あとは、この新しい設定ファイルを他のファイルと組み合わせれば、サイト上で my_date 変数を利用できます。

bundle exec jekyll serve --incremental --config _config.yml,_config-local.yml,_config-data.yml

上記のコマンドを実行すると、テンプレート内の {{ site.my_date }} が設定された値を出力します。

まとめ

ここで紹介した例は非常にシンプルですが、応用範囲は無限大です。BashやPythonなどのプログラミング言語を使えば、Jekyllの設定ファイルを動的に生成でき、それらを build や serve のプロセスで自由に組み合わせられます。

筆者が運営する findmymastodon.com では、Pythonを使ってMastodonのユーザー統計情報を取得し、その結果を _config-data.yml に書き出しています(現在は手動)。最終的に、トップページなどのページでこの設定ファイルからデータを表示しています。この仕組みにより、動的なバックエンドの利点を活かしながら、静的サイトならではの軽快さやシンプルさといった良さも維持できるのです。

皆さんの静的サイト開発のヒントになれば幸いです。Jamstackは静的サイトに最適ですが、動的コンテンツのためにAPIバックエンド一式を構築する必要はありません。代わりにビルドジョブで最新コンテンツ入りの設定ファイルを生成してはどうでしょうか?すべてのユースケースに合うわけではありませんが、APIが1つ減るということは、インフラの可変要素が1つ減ることを意味します。

次の静的サイトプロジェクトで、本記事が少しでも役立つことを願っています。それでは、Happy Coding!