Jekyll設定ファイルを動的に生成する方法

静的サイトジェネレーターであるJekyllは、_config.ymlを使用します 構成用。構成はすべてJekyll固有です。ただし、これらのファイルで独自のコンテンツを使用して変数を定義し、ウェブサイト全体で使用することもできます。この記事では、Jekyll構成ファイルを動的に作成することのいくつかの利点を強調します。

ローカルのラップトップで、次のコマンドを使用して、テスト用にJekyllWebサイトを提供しています。

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: "" # the subpath of your site, e.g. /blog

ローカルのjekyll serve URLはhttp：// 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

両方のファイルを組み合わせることにより、urlの最終的な値 このjekyll serve 空白になります。これにより、私のWebサイトで定義されているすべてのURLが相対URLに変換され、ローカルのラップトップで機能するようになります。

動的構成ファイルの結合

簡単な例として、Webサイトに現在の日付を表示するとします。このためのbashコマンドは次のとおりです。

> date '+%A, %d %B %Y'

Saturday, 16 October 2021

Jekyllの_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ファイルに書き込みます（現在は手動で）。最後に、ホームページなどで構成ファイルからこれらを表示します。このようにして、動的なバックエンドを活用しながら、私が気に入っている静的なWebサイトの良さをすべて維持することができます。

これがあなた自身の静的なウェブサイトのためのいくつかのアイデアを引き起こしたことを願っています。 Jamstackは静的なWebサイトに最適ですが、動的コンテンツ用のAPIバックエンド全体を作成することを回避できます。代わりに、ビルドジョブを使用して、更新されたコンテンツを含む構成ファイルを作成してみませんか？すべてのユースケースに適しているとは限りませんが、APIが1つ少ないということは、インフラストラクチャの可動部分が少ないことを意味します。

これが、次の静的Webサイトプロジェクトで何らかの形で役立つことを願っています。読み続けて、コーディングを楽しんでください。