記事作成日: 

記事更新日: 

テンプレート言語Liquidを使ったWebサイト制作の効率化【静的サイトジェネレーターJekyll】

静的サイトジェネレーターJekyllを使って個人サイトを作成するのであれば、コンテンツページを新規に作成する度に逐一修正していく手作業はなるべく避けたかった。静的サイトジェネレーターJekyllを使わない方法で静的サイトの個人サイトを作成する場合、Head部分はコピー&ペーストで流用し、Body部もコピーして流用できるパーツは使うというキーボードを使うよりもマウスを多用することになりかねなかった。パーツごとに作業を切り分けて静的サイトを生成することができる静的サイトジェネレーターJekyllは繰り返して利用する部分を自動化することができるのが何より魅力的なポイントとなる。

静的サイトジェネレーターJekyllではLiquidが使えるので自動化できる部分をLiquidの記法を使えば楽に設定することができる。

例を挙げる。titleタグに記述する内容は記事毎によって異なる。SEO対策の観点からもtitleタグの重要性は極めて高い。SEO対策上、最重要であるtitleタグへの記事タイトルの入力の際の手間を考えてみて欲しい。新たに記事を作成する度にtitleタグに手作業で入力することになるのだろうか。そんな面倒なことをしている時間は一切ないのだ。手作業で逐一、titleタグに記事タイトルを入力しているようでは、静的サイトジェネレーターJekyllを使う意味が全く無いと断言できる。

筆者はjekyllの公式サイトおよびLiquidの公式サイトを参照しながら、titleタグに自動的に記事毎の記事タイトルを設定できるようにした。

<title> {{ page.title }} </title>

このように_layoutに保存した各レイアウトテンプレートに設定しておくことで、各.mdファイルのtitle項目が自動的に設定されるようになった。

もう一点、静的サイトを運営する上で自動設定を施しておく方が良い箇所があった。OGPおよびTwitter Cardsに設定したURLだ。ページ毎にURLが異なるから自動で書き換わっていなければならなかった。

例を記述する。

https://oomiyayamato.net{{ page.url }}

URLの冒頭部分は変化しないので、ページ毎に変わる部分に記述しておくと自動でURLがページ毎に変更された。

記事毎に変わる箇所がもう一つあることを忘れてはならなかった。descriptionに記述されている内容だ。記事毎にdescriptionに記述した内容が反映されないのであれば、記述する意味は無いし、SEO対策としても意味をなさない、または対策がマイナスの影響を帯びる可能性もあった。

なので筆者はHead部に記述したdescription全てに以下の記述を行った。

{{ page.description }}

このように記述することで.mdファイルのdescription項目に記述した内容が反映された。

静的サイトジェネレーターJekyllを使って個人サイトを作成する場合は、Liquidの動きを理解し使えるようになれば更新作業が捗るとお伝えしておく。

著者:

【広告】

独自ドメインを取得するならオススメは

【広告】

レンタルサーバーを契約するならオススメは

Webサイト運営の向上を目的にcookieを使用しております。このバナーを閉じるか、当Webサイトの閲覧を継続することでCookieの使用を承認していただいたものとさせていただきます。

このWebサイトのCookieの詳細を確認する