Jekyllでウェブサイトを構築する

[[428335]]
Jekyllはオープンソースの静的ウェブサイトジェネレーターです。Markdownでコンテンツを記述し、HTML/CSSを使って構築・表示すれば、Jekyllがそれを静的HTMLにコンパイルします。

近年、静的ウェブサイトジェネレーターとJAMStackが人気を集めています。それには理由があります。複雑なバックエンドを必要とせず、静的なHTML、CSS、JavaScriptのみで済むからです。バックエンドが不要なため、セキュリティが向上し、運用コストが削減され、ホスティング費用も抑えられます。まさにwin-winです！

この記事ではJekyllについて説明します。執筆時点では、私の個人ウェブサイトはJekyllを使用しています。JekyllはRubyエンジンを使用して、Markdownで書かれた記事をHTMLに変換します。Sassは、プレーンテキストファイルに複雑なCSSルールを適用できます。Liquidは、静的コンテンツをプログラムで制御できます。

Jekyllをインストールする

Jekyllのウェブサイトでは、Linux、macOS、Windows向けのインストール手順が公開されています。インストール後、クイックブートローダーによって基本的なHello-Worldプロジェクトがインストールされます。

ここで、ブラウザでhttp://localhost:4000にアクセスすると、デフォルトの「Awesome」ブログが表示されます。

デフォルトの「素晴らしい」ブログ

ディレクトリ構造

このデフォルトサイトには、次のファイルとフォルダーが含まれています。

_posts : ブログ投稿。
_site : 最終的にコンパイルされた静的 Web サイトファイル。
about.markdown : 「About」ページの内容。
index.markdown : 「ホームページ」のコンテンツ。
404.html ：「404 ページ」の内容。
_config.yml : Jekyll のグローバル設定ファイル。

新しいブログ投稿を作成する

投稿の作成は簡単です。_postディレクトリに適切な形式と拡張子_post新しいファイルを作成するだけで完了です。

有効なファイル名は2021-08-29-welcome-to-jekyll.markdownのようになります。ブログファイルには、Jekyll で YAML と呼ばれるものが含まれている必要があります。ヘッダーブロック前文これはファイルの先頭にある特別なセクションであり、メタデータが含まれています。デフォルトの投稿を見ると、次のようになります。

 ---
 layout : post
 title : "Welcome to Jekyll!"
 date :   2021 - 08 - 29 11 : 28 : 12 + 0530
 categories : jekyll update
 ---

Jekyllは上記のメタデータを使用しますが、 key: valueペアをカスタマイズすることもできます。ヒントが必要な場合は、私のウェブサイトのヘッダーをご覧ください。上記の問題に加えて、Jekyllの組み込み変数を使用してウェブサイトをカスタマイズすることもできます。

新しい投稿を作成しましょう。_postsフォルダに_posts 2021-08-29-ayushsharma.markdownというファイルを作成します。内容は以下のとおりです。

 ---
 layout : post
 title :   "Check out ayushsharma.in!"
 date :   2021 - 08 - 29 12 : 00 : 00 + 0530
 categories : mycategory
 ---
 This is my first post .
 # This is a heading .
 ## This is another heading .
 This is a [ link ](< http : //notes.ayushsharma.in>)
 This is my category :

jekyll serveコマンドがまだ実行中の場合は、ページを更新すると、以下に新しい投稿が表示されます。

新しいブログ記事

最初の投稿を作成できて、おめでとうございます！プロセスはシンプルに見えますが、Jekyll を使えば様々なことができます。シンプルな Markdown を使って、ブログ投稿をアーカイブしたり、コードスニペットをハイライトしたり、投稿を分類したりできます。

下書き

まだコンテンツを公開する準備ができていない場合は、 _draftsという名前のフォルダを作成できます。このフォルダ内のMarkdownファイルは、 --drafts--パラメータを渡すことによってのみレンダリングされます。

レイアウトと包含

_postフォルダにある2つの記事のヘッダーブロックに注目してください。layout layout: post _layoutされています。_layout フォルダにはすべてのレイアウトが含まれています。Jekyllはデフォルトでこれらのレイアウトを読み込むため、ソースコードには含まれていません。Jekyllが使用するデフォルトのソースコードはこちらです。リンクをクリックすると、 postのレイアウトがdefaultレイアウトを使用していることがわかります。デフォルトレイアウト内の{{ content }}というコードにコンテンツが挿入されています。レイアウトファイルにはincludeディレクティブも含まれています。これらのディレクティブは、 includeフォルダからファイルを読み込み、さまざまなコンポーネントを使用してページを構成します。

簡単に言うと、レイアウトの仕組みはこうです。ヘッダーブロックでレイアウトを定義し、そこにコンテンツを挿入します。一方、インクルードはページ全体を構成するための他の部分を提供します。これは標準的なWebデザイン手法です。ヘッダー、フッター、コンテンツ要素を定義し、そこにコンテンツを挿入します。静的サイトジェネレーターの真の力はここにあります。完全にプログラム制御され、Webサイトを組み立て、最終的に静的HTMLにコンパイルします。

ページ

ウェブサイトのすべてが記事やブログ投稿というわけではありません。「About（概要）」、「Contact（お問い合わせ）」、「Projects（プロジェクト）」、あるいは「Works（作品）」といったページも必要になるかもしれません。そこで「Pages（ページ）」の出番です。Pagesは「Posts（投稿）」と全く同じように機能し、ヘッダーブロックを持つMarkdownファイルです。ただし、Pagesは_postsディレクトリには配置されません。プロジェクトのルートディレクトリか、独自のフォルダに保存されます。レイアウトや埋め込みについては、投稿と同じレイアウトを使用することも、新しい投稿を作成することもできます。Jekyllは非常に柔軟性が高いので、創造性を思う存分発揮してください！デフォルトのブログには既にindex.markdownとabout.markdownが組み込まれています。自由にカスタマイズしてください。

データファイル

データファイルは_dataディレクトリにあり、 .yml 、 .json 、 .csvなどの形式で保存されます。例えば、 _data/members.ymlファイルには次のような内容が含まれます。

 - name : A
 github : a@a
 - name : B
 github : b@b
 - name : C
 github : c@c

Jekyllはウェブサイト生成時にこのコンテンツを読み取りますsite.data.membersからアクセスできます。

 <ul>
 { % for member in site.data.members % }
   <li>
   <a href = "https://github.com" >
      { { member.name } }
   </a>
   </li>
 { % endfor %}
 </ul>

パーマリンク

_config.ymlファイルはパーマリンクのフォーマットを定義します。様々なデフォルト変数を使用して、独自のカスタムパーマリンクを作成できます。

最終的なウェブサイトを構築する

jekyll serveコマンドはローカルテストに最適です。ただし、ローカルテストが完了したら、リリース用の最終版をビルドする必要があります。` jekyll build --source source_dir --destination destination_dirコマンドを実行すると、ウェブサイトが_siteフォルダにビルドされます。このフォルダはビルドのたびにクリーンアップされるため、重要なファイルはここに置かないでください。コンテンツを生成したら、静的ホスティングサービスでホストできます。

これで、Jekyll の機能と主要コンポーネントの機能を包括的に理解できたはずです。さらにインスピレーションを得たい方は、JAMStack の公式ウェブサイトに素晴らしい例がいくつかありますので、ぜひご覧ください。

JAMStack の Jekyll サイトの例

コーディングは楽しいです。

DUICUO