Jekyllとは？Jekyllの概要と入門

　Jekyllは、静的サイトジェネレーターの1つであり、MarkdownやLiquidテンプレートを使用して、高速で安全なウェブサイトを簡単に作成することができます。

　本記事では、Jekyllの概要や使い方、メリット・デメリット、カスタマイズ方法、アップデート方法などについて詳しく解説します。また、GitHub Pagesとの連携についても取り上げ、Jekyllを使ってウェブサイトを公開する方法を解説します。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

Jekyllとは

　Jekyllは、静的サイトジェネレーターの1つであり、ウェブサイトを作成するためのプログラムです。Jekyllを使うことで、HTML、CSS、JavaScriptといったファイルを手動で書く必要がなくなり、MarkdownとLiquidテンプレートを使用して、簡単に高速で安全なウェブサイトを作成することができます。

Jekyllは、Rubyのプログラミング言語で書かれており、Rubyをインストールする必要があります。Jekyllは、RubyGemというパッケージマネージャーを通じてインストールできます。

Jekyllの特徴として、以下のようなものが挙げられます。

静的サイトの生成
- Jekyllは、静的サイトを生成することができます。静的サイトとは、サーバーサイドプログラムを使わずに、HTML、CSS、JavaScriptファイルをブラウザに直接表示するウェブサイトのことです。静的サイトを生成することで、高速で安全なウェブサイトを提供できます。
Markdownの使用
- Jekyllは、Markdownを使用して、テキストを簡単に書式付けすることができます。Markdownは、テキストファイル内にシンプルな書式を適用することで、HTMLを生成することができるマークアップ言語です。
Liquidテンプレートの使用
- Jekyllは、Liquidテンプレートエンジンを使用して、テンプレートを作成することができます。Liquidテンプレートは、テンプレート内で変数や条件分岐、繰り返し処理を行うことができるテンプレートエンジンです。
多様なプラグイン
- Jekyllは、多様なプラグインを使用することができます。プラグインを使用することで、機能を拡張することができます。

以上が、Jekyllの概要と特徴についての解説です。Jekyllは、初心者にも扱いやすい静的サイトジェネレーターであり、簡単に高速で安全なウェブサイトを作成することができます。

Jekyllをインストールする手順

Jekyllのインストールの手順は公式のインストールガイドを確認する

Jekyll • シンプルで、ブログのよ…

インストール macOS、GNU/Linux、WindowsへのJikyllインストールガイド

Jekyllでウェブサイトを作成する手順

Jekyllでウェブサイトを作成する手順を以下に詳しく解説します。

Jekyllプロジェクトの作成

まずは、Jekyllプロジェクトを作成します。ターミナルを開いて、以下のコマンドを入力しましょう。

jekyll new my-site

プロジェクトの構造を確認する

プロジェクトが作成されたら、その構造を確認しましょう。以下のコマンドを実行すると、プロジェクトの構造を確認できます。

cd my-site
ls -la

ローカルサーバーを起動する

Jekyllには、ビルトインのローカルサーバーがあります。以下のコマンドを入力して、ローカルサーバーを起動しましょう。

bundle exec jekyll serve

ウェブサイトの構成を変更する

ウェブサイトの構成を変更するには、_config.ymlファイルを編集します。このファイルには、ウェブサイトの基本的な設定が含まれています。

例えば、以下のようにtitleを変更することができます。

title: "My Awesome Site"

ページを追加する

Jekyllでは、ページをMarkdown形式で作成することができます。_postsフォルダに、YYYY-MM-DD-title.mdという形式でファイルを作成し、Markdown形式でページを作成しましょう。

テーマを適用する

Jekyllには、多数のテーマが用意されています。自分のウェブサイトに適したテーマを選んで、以下のように_config.ymlファイルに設定しましょう。

theme: jekyll-theme-minimal

ウェブサイトのビルドと公開

ウェブサイトのビルドと公開には、以下のコマンドを入力します。

bundle exec jekyll build

上記のコマンドで、_siteフォルダにウェブサイトのビルドファイルが生成されます。このファイルをWebサーバーにアップロードすることで、ウェブサイトを公開することができます。

以上が、Jekyllでウェブサイトを作成する手順です。

ビルドファイルの生成場所

　Jekyllでウェブサイトを作成すると、ビルドファイルが生成されます。ビルドファイルは、Markdown形式のファイルやテンプレート、CSSやJavaScriptなどを処理し、HTML形式のファイルに変換されます。このHTMLファイルがウェブサイトの表示に使用されます。

ビルドファイルの生成場所は、_siteというディレクトリになります。このディレクトリには、生成されたHTMLファイルやCSS、JavaScriptなどが格納されています。

デフォルトでは、ビルドファイルはローカルのコンピューターに生成されます。しかし、_config.ymlファイルのdestinationプロパティを変更することで、ビルドファイルを別の場所に生成することもできます。

Jekyllでウェブサイトをカスタマイズする方法の紹介

Jekyllは、デフォルトで多数のテンプレートやレイアウトを提供していますが、これらをカスタマイズして自分のウェブサイトに合わせたものにすることができます。ここでは、Jekyllでウェブサイトをカスタマイズする方法を紹介します。

1. レイアウトのカスタマイズ

Jekyllでは、レイアウトを使用してウェブサイトの外観を定義します。デフォルトで提供されるレイアウトを使用することもできますが、カスタマイズして自分のウェブサイトに合わせたレイアウトを作成することもできます。

レイアウトをカスタマイズするには、_layoutsディレクトリに新しいレイアウトを作成し、必要に応じてCSSやJavaScriptなどのファイルを追加する必要があります。レイアウトは、{% raw %}{% extends %}{% endraw %}タグを使用して、他のレイアウトを拡張することもできます。

2. CSSのカスタマイズ

Jekyllで生成されたウェブサイトのスタイルを変更するには、CSSをカスタマイズする必要があります。カスタムCSSを作成するためには、_sassディレクトリ内に新しい.scssファイルを作成し、必要なスタイルを定義します。その後、カスタムCSSを生成するために、ビルドコマンドを実行する必要があります。

3. ページのカスタマイズ

Jekyllでは、ページのフロントマターを使用して、ページごとに異なる設定を行うことができます。例えば、タイトル、ディスクリプション、画像、メタデータなどを設定できます。

また、Jekyllでは、Markdownを使用してコンテンツを作成することができますが、MarkdownにHTMLタグを含めることで、より詳細なページデザインを行うこともできます。

4. プラグインの使用

Jekyllでは、プラグインを使用してウェブサイトをカスタマイズすることもできます。例えば、SEOやアナリティクス、ソーシャルメディアの統合などのためにプラグインを使用することができます。

ただし、Jekyllはセキュリティ上の理由から、デフォルトではプラグインの使用が制限されています。プラグインを使用する場合は、_config.ymlファイルにて設定を変更する必要があります。

MarkdownやLiquidテンプレートを使用して、静的サイトの作成が簡単になる点についての詳細な解説

Jekyllは、MarkdownやLiquidテンプレートを使用して静的サイトの作成を簡単にすることができます。ここでは、MarkdownやLiquidテンプレートの使用方法について詳しく説明します。

Markdownとは？

Markdownは、プレーンテキストの書式設定を簡単に行えるマークアップ言語です。Markdownを使用することで、HTMLタグを使用することなく、見出し、段落、リスト、強調表示、リンクなどの書式設定を行うことができます。

Jekyllでは、Markdownを使用してコンテンツを作成することができます。Markdownファイルは、_postsや_pagesディレクトリに保存することができます。Jekyllは、MarkdownファイルをHTMLファイルに変換して、静的サイトを生成します。

については、本サイトの記事「Markdownとは？Markdownの概要と入門」でも紹介していますのであわせて確認して下さい。

Liquidテンプレートとは？

Liquidテンプレートは、Ruby製のテンプレート言語で、HTML、CSS、JavaScriptなどの静的コンテンツを動的に生成するために使用されます。Liquidテンプレートを使用することで、共通のレイアウトを持つウェブサイトを作成することができます。

Jekyllでは、Liquidテンプレートを使用して、ウェブサイトのレイアウトやコンテンツの表示を定義することができます。Liquidテンプレートは、_layoutsディレクトリに保存され、HTMLファイルで使用されます。また、Liquidテンプレートを使用して、動的なコンテンツをウェブサイトに追加することもできます。

Liquidについては、本サイトの記事「Liquidとは？Liquidの概要と入門」でも紹介していますのであわせて確認して下さい。

MarkdownとLiquidテンプレートの組み合わせ

Jekyllでは、MarkdownとLiquidテンプレートを組み合わせることができます。Markdownファイル内に、Liquidタグを使用して、ウェブサイトのコンテンツを動的に表示することができます。

例えば、Markdownファイル内に、以下のようなLiquidタグを追加することができます。

---
layout: post
title: "Welcome to my blog"
date: 2023-02-26
---

{% raw %}# Welcome to my blog{% endraw %}

上記の例では、MarkdownファイルにYAMLフロントマターが追加され、Liquidタグが使用されています。このファイルをビルドすると、_layoutsディレクトリ内のpost.htmlレイアウトが使用され、Markdownファイル内のコンテンツがレイアウト内に動的に表示されます。

以上が、MarkdownやLiquidテンプレートを使用して、Jekyllで静的サイトを簡単に作成する方法についての解説です。

静的サイトを生成することで、高速で安全なウェブサイトを提供できる点についての詳細な解説

Jekyllが静的サイトを生成することによって、高速で安全なウェブサイトを提供することができます。では、静的サイトとは何か、そしてJekyllがどのように高速で安全なウェブサイトを提供するのかについて、詳しく見ていきましょう。

静的サイトとは、サーバーサイドのスクリプト言語やデータベースを使わずにHTML、CSS、JavaScriptなどの静的なファイルのみで構成されるウェブサイトのことです。一方、動的サイトはサーバーサイドのスクリプト言語を使用して、リクエストに応じてコンテンツを生成することができます。

静的サイトを生成することによって、ウェブサイトが高速であることが保証されます。なぜなら、静的サイトはサーバーサイドの処理が不要であり、ブラウザがファイルを要求したらすぐにレスポンスを返すことができるからです。また、静的サイトはセキュリティ上のリスクが少なく、攻撃者によって悪用される可能性が低いため、安全であると言えます。

Jekyllは、MarkdownやLiquidテンプレートを使用して静的サイトを作成することができます。これらのツールは、ウェブサイトのコンテンツを簡単に管理できるようにするために使用されます。Markdownは、HTMLよりも読みやすく書きやすい記法で、テキストをHTMLに変換することができます。Liquidテンプレートは、ウェブサイトのテーマやデザインを管理するために使用されます。

Jekyllが生成する静的サイトは、高速で安全なウェブサイトを提供するために最適化されています。Jekyllは、必要なHTML、CSS、JavaScriptファイルを生成し、サイトのコンテンツを静的ファイルとして保存します。これにより、ウェブサイトの読み込み速度が向上し、セキュリティ上のリスクが低減されます。

以上のように、Jekyllを使用することによって、静的サイトを簡単に作成でき、高速で安全なウェブサイトを提供することができます。

Jekyllのメリットとデメリット

Jekyllを使用することで、静的サイトを簡単かつ迅速に生成することができますが、Jekyllにはメリットとデメリットがあります。以下では、Jekyllの主なメリットとデメリットについて説明します。

Jekyllのメリット

メリット

高速で安全なウェブサイトを生成できる
- Jekyllは静的サイトジェネレーターのため、サーバーにデータベースや動的なコンテンツを持たせる必要がありません。これにより、サイトの読み込み速度が向上し、セキュリティリスクも低減されます。また、Jekyllのビルドプロセスは非常に迅速で、大量のデータを処理することができます。
シンプルで使いやすい
- JekyllはMarkdownやLiquidテンプレートを使用するため、HTMLやCSSの知識がなくても簡単にウェブサイトを作成できます。また、GitHub Pagesなどのホスティングサービスでも利用できるため、セットアップが簡単です。
カスタマイズ性が高い
- Jekyllはオープンソースのため、多くのプラグインが利用可能です。これにより、自分のウェブサイトに必要な機能を簡単に追加できます。また、Liquidテンプレートを使用するため、ウェブサイトのデザインを簡単にカスタマイズできます。

Jekyllのデメリット

デメリット

動的なコンテンツには向いていない
- Jekyllは静的サイトジェネレーターのため、動的なコンテンツ（ユーザーの入力など）には向いていません。これは、サーバーサイドの処理が必要なためです。そのため、Jekyllを使用して動的なWebアプリケーションを開発することはできません。
ローカル環境での開発が必要
- Jekyllはローカル環境でウェブサイトを開発し、ビルドファイルを生成する必要があります。そのため、ローカル環境のセットアップが必要であり、初心者には敷居が高い場合があります。
学習コストが高い
- Jekyllは初心者にとっては学習コストが高いと感じるかもしれません。RubyとMarkdownの知識が必要になるためです。しかし、一度習得してしまえば、静的サイトを構築するための高度なスキルを身につけることができます。
テーマが限られている
- Jekyllは、利用できるテーマの数が限られています。しかし、JekyllにはLiquidテンプレートエンジンを使用できるため、自分でテーマを作成することができます。

以上が、Jekyllのメリットとデメリットについての解説でした。Jekyllは静的サイトを構築するための強力なツールであり、その高速で安全なウェブサイトを提供する能力や、MarkdownやLiquidテンプレートの使用によって開発を簡略化できる点が魅力的です。ただし、学習コストが高く、テーマの選択肢が限られているというデメリットもあります。

Jekyllを使うべきかどうかを考える上でのポイントについての解説

Jekyllを使うべきかどうかを考える際には、以下のポイントを考慮すると良いでしょう。

サイトの性質
- Jekyllは静的サイトジェネレーターであり、動的なコンテンツの生成には向いていません。したがって、サイトによってはJekyllを使うことができない場合があります。一方、コンテンツが静的である場合は、Jekyllを使用することが適しているかもしれません。
開発経験
- JekyllはRubyやMarkdown、Liquidテンプレートを使用することが必要です。これらの技術に慣れていない場合は、学習コストがかかることがあります。したがって、これらの技術に精通している場合には、Jekyllを使用することが容易になるでしょう。
テーマの必要性
- Jekyllは、多数のテーマを提供しているため、それらを使用することができます。しかし、カスタマイズが必要な場合は、自分でテーマを作成する必要があります。テーマを自分でカスタマイズする必要がある場合、Jekyllを使用することは少し手間がかかるかもしれません。
パフォーマンス
- Jekyllは、静的サイトを生成するための強力なツールです。静的サイトは高速で安全なウェブサイトを提供することができ、高いパフォーマンスを発揮します。したがって、ウェブサイトのパフォーマンスが重要な場合には、Jekyllを使用することを検討する価値があるかもしれません。

　以上のポイントを考慮することで、Jekyllを使用するべきかどうかを判断することができます。Jekyllは、静的サイトを構築するための強力なツールであり、その高速で安全なウェブサイトを提供する能力や、MarkdownやLiquidテンプレートの使用によって開発を簡略化できる点が魅力的です。

　ただし、学習コストが高く、テーマの選択肢が限られているというデメリットもあります。使うべきかどうかは、自分のウェブサイトのニーズや、開発経験などに応じて判断することが重要です。

情報を定義する「Front Matter」とは

Jekyllにおいて、各ページや投稿に関する情報を定義するために「Front Matter」と呼ばれるものがあります。

Front Matterは、各ページや投稿の先頭に3つのハイフン(---)で囲まれたYAML形式のデータです。YAML形式は、プログラマーにとっては直感的であるため、簡単に扱えます。Front Matterは、以下のような役割を持ちます。

サイト内のどの場所に表示するかの設定
各ページや投稿のタイトル、説明、著者、作成日時などの設定
カスタム変数の設定

例えば、以下のように投稿ページにFront Matterを追加することができます。

---
title: "Jekyllとは"
date: 2023-02-26
categories:
  - プログラミング
  - 静的サイトジェネレーター
tags:
  - Jekyll
  - Markdown
---

上記の例では、titleはページのタイトルを示し、dateは投稿日時を示します。categoriesとtagsは、各ページをカテゴリー分けやタグ分けするための情報として利用されます。Front Matterは、自由に追加・変更することができ、各ページごとに異なる情報を記述することができます。

Front Matterの利用により、Jekyllはページの情報を解釈し、テンプレートを適用する際に利用されます。また、Front Matterには、オリジナルの情報を追加することもできます。例えば、特定のページにのみ異なるスタイルを適用したい場合には、Front Matterに追加の情報を書き加えることができます。

Jekyllでのレイアウト「_layouts」

Jekyllでは、レイアウトと呼ばれるファイルを使用して、サイトの外観を一貫して設定できます。レイアウトは、共通のパーツを再利用することができ、サイト全体の見た目を統一することができます。

レイアウトは通常、HTMLファイルで定義され、Liquidテンプレートエンジンを使用して、動的なコンテンツを挿入することができます。例えば、Jekyllでは、ページタイトルやメニューをレイアウトに定義し、ページごとに異なるコンテンツを埋め込むことができます。

レイアウトを定義するには、_layoutsディレクトリを作成し、HTMLファイルをそこに保存します。Jekyllでは、デフォルトで3つのレイアウトが定義されています: default、post、そしてpageです。通常、defaultレイアウトは、全てのページのベースとなるテンプレートとして使用されます。postレイアウトは、ブログ記事のレイアウトとして使用され、pageレイアウトは、通常のページのレイアウトとして使用されます。

レイアウトは、YAML Front Matterセクションを含むことができます。Front Matterを使用すると、レイアウトのパラメーターを設定することができます。例えば、レイアウトのタイトル、説明、カテゴリーなどを設定することができます。

Jekyllのレイアウトは、静的サイトを構築する際に非常に便利であり、外観を一貫して維持することができます。また、レイアウトを編集することで、サイト全体の外観を簡単に変更することができます。

レイアウトのサンプル

以下は、Jekyllで使用されるレイアウトのサンプルです。

<!DOCTYPE html>
<html>
  <head>
    <title>{{ page.title }}</title>
  </head>
  <body>
    <div id="header">
      <h1>{{ site.title }}</h1>
      <p>{{ site.description }}</p>
    </div>
    <div id="content">
      {{ content }}
    </div>
    <div id="footer">
      <p>© {{ site.author }}</p>
    </div>
  </body>
</html>

このレイアウトは、HTMLの基本的な構造を持ち、ページのタイトルやサイトのタイトルや説明文、ページの内容、フッターなどの部分を指定することができます。また、{{ }}で囲まれた部分は、Liquidと呼ばれるテンプレートエンジンを使用して変数を埋め込むことができます。これにより、同じレイアウトを複数のページで使用して、コードの重複を避けることができます。

Jekyllの「Includes」の使い方

Jekyllの「Includes」とは、静的サイトのテンプレートを再利用するための機能の1つです。これは、複数のページで同じHTMLコードを再利用したい場合に便利です。

たとえば、ヘッダーやフッターなど、複数のページで共通のHTMLコードを再利用する必要がある場合、Includesを使用することができます。Includeを使用すると、コードを一度だけ書き、それを必要な場所に挿入できます。

Includesを使用するには、_includesフォルダ内にHTMLやLiquidコードを含むファイルを作成し、{% include %}タグを使用して、ファイルの内容を挿入する場所を指定します。

以下は、「includes」を利用した例です。

<!-- _includes/header.html -->
<header>
  <h1>My Site</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

<!-- index.html -->
---
layout: default
---

{% include header.html %}

<main>
  <h2>Welcome to my site!</h2>
  <p>This is the home page.</p>
</main>

{% include footer.html %}

この例では、_includesフォルダ内にheader.htmlとfooter.htmlという2つのファイルがあり、index.htmlファイルの中でそれぞれがインクルードされています。{% include %}タグは、_includesフォルダからファイルを読み込み、指定した場所にファイルの内容を挿入します。

Includesを使用することで、共通のHTMLコードを簡単に再利用することができます。また、コードの重複を減らし、保守性を高めることができます。

Jekyllの「Dataファイル」の使い方

Jekyllでは、データを外部のファイルに保存し、ウェブサイトのコンテンツに組み込むことができます。これにより、ウェブサイトのコンテンツをより簡単に管理できるようになります。

データファイルは、YAML、JSON、またはCSV形式で書くことができます。一般的に、YAML形式が最も一般的です。データファイルは、_dataフォルダー内に保存され、ファイルの拡張子によって解釈されます。

データファイルは、ウェブサイト内のどこからでも使用することができます。たとえば、ウェブサイトには「スタッフ」というページがあるとします。このページには、スタッフの名前、写真、役職などをリスト表示する必要があります。その場合、_dataフォルダー内に「staff.yml」というファイルを作成し、次のようにデータを追加します。

- name: John Smith
  position: CEO
  photo: john.jpg
- name: Jane Doe
  position: CTO
  photo: jane.jpg
- name: Bob Johnson
  position: CFO
  photo: bob.jpg

このファイルは、以下のようにして、レイアウト、インクルード、またはMarkdownファイルで使用できます。

<ul>
{% for staff_member in site.data.staff %}
  <li>
    <img src="{{ staff_member.photo }}" alt="{{ staff_member.name }}">
    <h3>{{ staff_member.name }}</h3>
    <p>{{ staff_member.position }}</p>
  </li>
{% endfor %}
</ul>

ここでは、site.data.staffというJekyll変数を使用して、staff.ymlファイルのデータにアクセスしています。その後、ループを使用して、すべてのスタッフのデータを表示します。この方法で、ウェブサイトの情報をより簡単に管理できます。

Jekyllのブログ機能について

Jekyllは、静的サイトジェネレーターの中でも特にブログ機能に優れています。ブログは、個人や企業がコンテンツを投稿し、読者との交流を深めるための非常に重要なツールです。Jekyllは、ブログの投稿や管理を効率的かつ簡単に行うための機能を提供しています。

Jekyllのブログ機能を利用するためには、ブログ記事を格納するためのディレクトリが必要です。このディレクトリは通常、 “_posts” という名前で作成されます。各記事は、Markdownファイルなどのファイル形式で格納され、記事のタイトル、日付、カテゴリなどの情報を含む Front Matter が必要です。

また、Jekyllはブログに関連する様々な機能を提供しています。たとえば、記事を日付、カテゴリ、タグなどで自動的にソートする機能や、RSSフィードを生成する機能があります。これらの機能を活用することで、ブログ記事の管理や配信を簡単かつ効果的に行うことができます。

以下は、Jekyllのブログに投稿するために、_posts フォルダに作成するファイルの例です。

---
layout: post
title: "はじめてのブログ投稿"
date: 2023-02-28 09:00:00 +0900
categories: jekyll チュートリアル
---
こんにちは！これが私のはじめてのJekyllブログ投稿です。

この例では、3つの重要なフィールドがあります。

layout: この投稿のレイアウトを定義します。ここでは、post という名前のレイアウトを使用しています。
title: 投稿のタイトルを定義します。
date: 投稿の日付を定義します。Jekyllはこれを使用して、投稿を生成する日付を決定します。

また、この例ではカテゴリを jekyll と チュートリアル に分類しています。これにより、後でブログ内で特定のカテゴリの投稿を見つけるのが簡単になります。

JekyllとGitHub Pages

Jekyllは、静的サイトジェネレーターの一種であり、GitHub Pagesとの相性が非常に良いことで知られています。GitHub Pagesは、GitHubが提供する静的サイトホスティングサービスであり、Jekyllを使うことで簡単にウェブサイトを作成することができます。

GitHub Pagesは、公開用のリポジトリにHTML、CSS、JavaScript、画像などのファイルをアップロードするだけで、ウェブサイトをホストすることができます。Jekyllを使えば、GitHub Pagesにアップロードする前に、MarkdownやLiquidテンプレートなどのファイルをHTMLに変換することができます。

Jekyllを使うことで、GitHub Pagesでのウェブサイトの作成が簡単になります。Jekyllには、GitHub Pagesとの統合に特化したテンプレートがあり、GitHub Pagesで公開するウェブサイトを簡単にカスタマイズできるようになっています。

さらに、Jekyllを使うことで、ウェブサイトのビルドプロセスを自動化することができます。これにより、ウェブサイトのビルドプロセスが高速化され、ウェブサイトのセキュリティが向上します。また、ビルドファイルを生成するために必要な環境や設定が簡素化されるため、手順を簡単に管理することができます。

JekyllとGitHub Pagesの組み合わせは、開発者にとって非常に魅力的な組み合わせとなっています。

Jekyllのサイトオブジェクト

Jekyllのサイトオブジェクトは、静的サイトジェネレーターであるJekyllが生成するサイト全体を表すオブジェクトです。このオブジェクトには、サイト全体に関する情報が含まれます。

Jekyllは、サイトのビルド時にサイトオブジェクトを生成し、サイト内のすべてのページやポストに関する情報を格納します。サイトオブジェクトは、configファイルに設定された変数や、デフォルトの値を使用して生成されます。

サイトオブジェクトに含まれるプロパティには、以下のようなものがあります。

プロパティ名	説明
`site.pages`	サイト内のすべてのページを含む配列
`site.posts`	サイト内のすべての投稿を含む配列
`site.collections`	サイト内のすべてのコレクションを含むオブジェクト
`site.static_files`	サイト内のすべての静的ファイルを含む配列
`site.documents`	サイト内のすべてのドキュメントを含む配列
`site.data`	サイトのデータを含むオブジェクト
`site.time`	現在の時刻を表すDateオブジェクト
`site.related_posts`	ページと関連する投稿を含む配列
`site.html_pages`	サイト内のすべてのHTMLページを含む配列
`site.categories`	サイト内のすべてのカテゴリを含む配列
`site.tags`	サイト内のすべてのタグを含む配列
`site.url`	サイトのURLを表す文字列
`site.baseurl`	サイトのベースURLを表す文字列
`site.title`	サイトのタイトルを表す文字列
`site.description`	サイトの説明を表す文字列
`site.locale`	サイトのロケールを表す文字列
`site.time_zone`	サイトのタイムゾーンを表す文字列
`site.data.<name>`	名前が`<name>`であるデータファイルの内容を含むオブジェクト

サイトオブジェクトに含まれるプロパティ

これらのプロパティを使用することで、Jekyllで生成されたサイト全体の情報にアクセスできます。

Jekyllのページオブジェクト

Jekyllによって生成された各ページに対応するオブジェクトです。Jekyllは、MarkdownやHTMLファイルなどのソースファイルを読み込み、ページオブジェクトを生成してから、それらをテンプレートに渡して、最終的なHTMLファイルを生成します。

ページオブジェクトには、ページに関する情報が含まれます。以下は、ページオブジェクトに含まれる主なプロパティの一部です。

プロパティ名	説明
`page.content`	ページのコンテンツを表す文字列
`page.date`	ページの作成日時を表すDateオブジェクト
`page.url`	ページのURLを表す文字列
`page.title`	ページのタイトルを表す文字列
`page.categories`	ページのカテゴリを表す配列
`page.tags`	ページのタグを表す配列
`page.excerpt`	ページの概要を表す文字列
`page.id`	ページの一意のIDを表す文字列
`page.path`	ページのパスを表す文字列
`page.relative_path`	ページのルートからの相対パスを表す文字列
`page.output`	ページの出力形式を表す文字列
`page.content_type`	ページのコンテンツタイプを表す文字列
`page.data`	ページに関連付けられた任意のデータを含むオブジェクト
`page.collection`	ページが属するコレクションを表すオブジェクト
`page.path`	ページのパスを表す文字列
`page.next`	現在のページの次のページを表すオブジェクト
`page.previous`	現在のページの前のページを表すオブジェクト
`page.layout`	ページのレイアウトを表す文字列
`page.doc-tab`	ページが属するドキュメントタブを表す文字列
`page.fulltitle`	ページのフルタイトルを表す文字列

ページオブジェクトに含まれる主なプロパティ

page.layoutは、ページが使用するレイアウトを指定するために使用されます。page.doc-tabは、ページが属するドキュメントタブを指定するために使用されます。page.fulltitleは、ページのフルタイトルを表す文字列で、通常は<title>タグの内容として使用されます。

ページオブジェクトは、テンプレート内で使用することができます。例えば、{{ page.title }}を使用すると、ページのタイトルを表示することができます。

また、ページオブジェクトには、フロントマター変数として定義されたフィールドも含まれます。これらのフィールドには、ページに固有の情報を指定することができます。例えば、以下のようにして、ページにカスタムのフィールドを定義することができます。

---
title: My Page
custom_field: some value
---

この場合、custom_fieldは、ページオブジェクトのpage.custom_fieldプロパティでアクセスすることができます。ただし、page.custom_fieldのようなフロントマター変数で定義されたフィールドは、デフォルトではページオブジェクトに含まれないため、レイアウトテンプレートで明示的に使用する必要があります。

Jekyllのカスタマイズ方法

Jekyllは柔軟性が高く、様々なカスタマイズが可能です。ここでは、Jekyllのカスタマイズ方法について説明します。

テーマの変更

Jekyllには、標準でいくつかのテーマが用意されています。これらのテーマを使用することで、すばやく簡単にウェブサイトを作成できます。しかし、他の人と同じテーマを使用すると、ウェブサイトの外観が似たようなものになってしまいます。そのため、カスタムテーマを使用することが多いです。

カスタムテーマを使用する場合は、自分でテンプレートファイルを作成する必要があります。テンプレートファイルを作成するには、Jekyllが提供するテンプレートエンジンであるLiquidを使用します。テンプレートファイルを作成する際には、HTML、CSS、JavaScriptなどの言語を使用することができます。

プラグインの追加

Jekyllには、プラグインを追加することができます。プラグインは、ウェブサイトに様々な機能を追加することができます。例えば、Googleアナリティクスのトラッキングコードを自動的に挿入するプラグインなどがあります。

プラグインを使用する場合は、まず、_config.ymlファイルにプラグインを追加する必要があります。その後、プラグインのコードを記述することができます。

コレクションの追加

Jekyllでは、コレクションを使用して、ページをグループ化することができます。例えば、ブログの場合、投稿を日付ごとにグループ化することができます。また、プロジェクトの場合、プロジェクトごとにページをグループ化することができます。

コレクションを使用する場合は、まず、_config.ymlファイルにコレクションを追加する必要があります。その後、テンプレートファイルを作成して、ページを表示する方法を定義することができます。

CSSやJavaScriptのカスタマイズ

Jekyllでは、CSSやJavaScriptファイルをカスタマイズすることもできます。Jekyllには、CSSやJavaScriptを組み込むための方法がいくつかあります。

一つ目は、CSSやJavaScriptを_includesディレクトリに保存し、head.htmlなどのレイアウトファイルにインクルードすることです。この方法を使うと、CSSやJavaScriptファイルをすべてのページで使用できます。

二つ目は、assets/cssディレクトリやassets/jsディレクトリにCSSファイルやJavaScriptファイルを保存する方法です。この方法では、ファイルが複数のページで使用される場合に便利です。

サイトの構造のカスタマイズ

Jekyllでは、サイトの構造を変更することもできます。例えば、ページのレイアウトを変更する場合は、_layoutsディレクトリ内のレイアウトファイルを変更します。また、ページの表示順序を変更する場合は、_config.ymlファイル内のナビゲーション設定を変更します。

Jekyllでは、ページの構造を変更するための多くの方法があります。最も重要なのは、自分が変更したい部分が何であるかを決定することです。その後、Jekyllのドキュメントを参照して、実際に変更を行います。

Jekyllのconfigファイル設定

configファイルで定義することで、Jekyllのサイトの動作を調整できます。

例えば公式のDocフォルダ内の「\bulma-master\docs\_config.yml」の以下の設定について確認してみましょう。

# Meta

env:           "production"
docs_file:     "bulma-docs.min"

# Build

markdown:      kramdown
permalink:     pretty
url:           http://localhost:4000
exclude:       ['icons', 'node_modules', 'templates', '.babelrc', 'bulma-docs.sass', 'docker-compose.yml', 'package.json', 'yarn.lock']

このJekyllのconfigファイルは、サイト全体の設定を定義します。

env: 環境を指定する変数で、ここでは”production”に設定されています。
docs_file: サイトで使用するドキュメントのファイル名を定義します。ここでは”bulma-docs.min”に設定されています。
markdown: Markdownのエンジンを定義します。ここでは”kramdown”に設定されています。
permalink: サイトのURLのパーマリンク形式を定義します。ここでは”pretty”に設定されています。
url: サイトのURLを定義します。ここでは”http://localhost:4000″に設定されています。
exclude: サイトのビルド時に除外するディレクトリやファイルを定義します。ここでは、”icons”, “node_modules”, “templates”, “.babelrc”, “bulma-docs.sass”, “docker-compose.yml”, “package.json”, “yarn.lock”が除外されるように設定されています。

これらの設定をconfigファイルで定義することで、Jekyllのサイトの動作を調整できます。たとえば、permalinkをprettyに設定することで、サイト内のURLが可読性の高い形式になるなど、サイトのビルドや表示方法をカスタマイズすることができます。

Jekyllのアップデート方法

Jekyllは常に改善され、新しい機能やバグ修正が追加されることがあります。そのため、最新バージョンを使用することは重要です。ここでは、Jekyllをアップデートする方法について解説します。

Jekyllの現在のバージョンを確認する

まず、現在のJekyllバージョンを確認しましょう。ターミナルで以下のコマンドを入力します。

jekyll -v

すると、現在のJekyllバージョンが表示されます。例えば、以下のようになります。

jekyll 4.3.1

Bundlerのアップデート

Jekyllをアップデートする前に、Bundlerをアップデートする必要があります。Bundlerは、Jekyllが必要とするRubyのライブラリを管理するためのツールです。

以下のコマンドを入力して、Bundlerをアップデートします。

gem update bundler

Jekyllのアップデート

次に、Jekyllをアップデートします。以下のコマンドを入力して、Jekyllをアップデートします。

bundle update jekyll

このコマンドは、Bundlerを使用してJekyllをアップデートします。このコマンドを実行すると、最新バージョンのJekyllがインストールされます。

アップデートの確認

Jekyllをアップデートしたら、再度Jekyllのバージョンを確認しましょう。以下のコマンドを入力します。

jekyll -v

Jekyllをアップデートすることで、最新の機能やバグ修正を利用できます。Bundlerを使用してアップデートすることで、依存関係が正しく管理され、問題なくアップデートできます。

まとめ

Jekyllの概要と入門について解説してきました。Jekyllは静的サイトジェネレーターとして人気があり、MarkdownやLiquidテンプレートの使用により、手軽に静的サイトを作成することができます。また、GitHub Pagesとの相性も良く、無料でホスティングすることができます。Jekyllを使って、高速で安全な静的サイトを作成しましょう。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！