Jekyllで静的サイトを構築する方法（＋各種設定やカスタマイズ）

デジタル化が進む現代において、ウェブサイトを持つことは、オンラインプレゼンスを確立し、ブランドを宣伝し、潜在顧客に訴求するために不可欠です。しかし、ウェブサイトを作成するのは概して大変な作業です。

そこで登場したのが静的サイトジェネレーター（SSG）です。複雑なバックエンドシステムやデータベースを必要とせず、美しく、読み込みの速いウェブサイトを簡単に作成することができます。

この記事では、人気のあるSSGの1つであるJekyllを紹介し、その仕組みと、Jekyllを使って静的ウェブサイトを作成する方法に迫りたいと思います。

Jekyllで構築したブログサイトのライブデモはこちらをご覧ください。

詳細は、プロジェクトのGitHubリポジトリから確認可能です。

Jekyllとは

Jekyllは、プログラミング言語Rubyで構築され、実行されている無料のオープンソースSSGです。Jekyllを使用するためにRubyの仕組みを理解する必要はありませんが、利用するマシンにRubyがインストールされている必要があります。

Jekyllは、データベースを必要とせず、WordPressのようなコンテンツ管理システムを使用することなく、個人ブログ、ポートフォリオサイト、ドキュメントサイトなど、様々なタイプの静的サイトを構築するために使用することができます。

JekyllがSSGの中で際立っている点を紹介します。

1. 簡単に使用できる：Jekyllは、プレーンテキストファイルとMarkdown記法を使用してコンテンツを作成・管理するため、HTMLやCSSの知識がなくても利用できます。
2. 高速で安全：Jekyllは、任意のサーバー側のデータベースやスクリプトを扱うことはありません、つまり、脆弱性や攻撃のリスクが少なくなります。静的なHTMLファイルを生成するため、非常に高速で安全なウェブサイトを作ることができます。
3. カスタマイズ可能：Jekyllは高度にカスタマイズ可能で、レイアウトやテンプレートを使用したり、機能を拡張するためにプラグインを作成したりすることができます。
4. デプロイが簡単：Jekyllは、動的なコンテンツ管理システムを必要とせずに、ウェブサーバーやホスティングプロバイダにデプロイすることができる静的なHTMLファイルを生成します。
5. 大規模なコミュニティあり：Jekyllは、ユーザーや開発者の大規模なコミュニティを誇ります。助けが必要、サイトの機能を拡張したい場合は、多くのリソースが利用できます。

Jekyllのインストール方法

Jekyllのドキュメントに記載されているように、Jekyllをインストールする前に、Rubyをインストールしておく必要があります。

macOSでJekyllをインストールする方法

デフォルトでは、RubyはmacOSにプリインストールされていますが、古いので、JekyllをインストールするためにRubyのそのようなバージョンを使用することはお勧めしません。例えば、Appleの最新OSであるVenturaでは、プリインストールされているRubyのバージョンは2.6.10で、そのうち最新版は3.1.3です（この記事の執筆時点）。

これを解決するには、chrubyなどのバージョン管理ツールを使って、Rubyをインストールできます。まずMacにHomebrewをインストールし、ターミナルで以下のコマンドを実行します。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

インストールが成功したら、ターミナルを終了して再起動し、次のコマンドを実行してHomebrewの準備ができたかどうかを確認します。

brew doctor

「Your system is ready to brew」と表示されたら、次のコマンドでchrubyとruby-installに進みます。

brew install chruby ruby-install

先ほどインストールしたruby-installパッケージを使用して、rubyの最新版である3.1.3をインストールすることができます。

ruby-install 3.1.3

この作業には数分かかります。インストールが完了したら、以下のコマンドで自動的にchrubyを使用するようにシェルを設定してください。

echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc
echo "chruby ruby-3.1.3" >> ~/.zshrc

これで一旦終了してターミナルを再起動し、次のコマンドを実行してすべてが機能していることを確認できます。

ruby -v

ruby 3.1.3と表示されるはずです。

これで、Rubyの最新版がインストールされました。そして最後に、最新のJekyllとbundler gemをインストールします。

gem install jekyll bundler

WindowsでJekyllをインストールする方法

WindowsにRubyとJekyllをインストールするには、RubyInstallerを使用することになります。具体的には、RubyInstaller DownloadsからRuby+Devkit版をダウンロードしてインストールし、デフォルトのオプションを使用してインストールすることができます。

インストールウィザードの最終段階で、gemsをインストールするためのステップであるridk install を実行します。詳しくは、RubyInstaller Documentationをご覧ください。

オプションから、MSYS2およびMINGW開発ツールチェーンを選択します。新しいコマンドプロンプトウィンドウを開き、以下のコマンドを使用してJekyllとBundlerをインストールします。

gem install jekyll bundler

Jekyllが正しくインストールされていることを確認する方法

Jekyllが正しくインストールされていることを確認するには、ターミナルを開き、次のコマンドを実行します。

jekyll -v

バージョン番号が表示された場合、Jekyllがシステムにインストールされ、動作していることを意味します。これでJekyllを使用する準備が整いました。

Jekyllのコマンドとコンフィギュレーション

Jekyllで静的なサイトを作成し、カスタマイズを開始する前に、その様々なCLIコマンドと設定ファイルのパラメータに慣れておきましょう。

JekyllのCLIコマンド

一般的なJekyll CLIコマンドをご紹介します。すべてを暗記する必要はありませんが、頭の片隅に置いておいて、この記事の後半で必要になった時には、ここに戻り確認してみてください。

• jekyll build：_siteディレクトリに静的なサイトを生成する
• jekyll serve：サイトを構築し、ローカルマシンでウェブサーバーを起動することで、http://localhost:4000を使いブラウザでサイトをプレビューすることが可能になる
• jekyll new [site name]：指定されたサイト名で新しいディレクトリに新しいJekyllサイトを作成する
• jekyll doctor：設定や依存関係の問題があれば出力する
• jekyll clean：生成されたサイトファイルが格納されている_siteディレクトリを削除する
• jekyll help：Jekyllのヘルプドキュメントを出力する
• jekyll serve --draft：_draftsディレクトリにあるすべての投稿を含めJekyllサイトを生成

これらのコマンドにオプションを追加することができます。Jekyllのコマンドとオプションについての詳細は、Jekyllのドキュメントを参照してください。

Jekyllの設定ファイル

Jekyllの設定は、_config.ymlという名前のYAMLファイルで行ないます。ここにはJekyllサイトの設定やオプションが含まれており、サイトのタイトル、説明、URLなど、サイトの様々な側面を構成するのに使用されます。

一般的な設定オプションをいくつかご紹介します。

• title：サイトのタイトル
• description：サイトの短い説明
• url：サイトのベースURL
• baseurl：（サブディレクトリでホストする場合）サイトのサブディレクトリ
• permalink：投稿とページのURL構造
• exclude：サイト生成プロセスから除外するファイルまたはディレクトリの一覧
• include：サイト生成プロセスに含めるファイルまたはディレクトリの一覧
• paginate：ページネーション使用時に1ページに表示する投稿の数
• plugins：読み込むJekyllプラグインの一覧
• plugins：デフォルトでminimaに設定される─名前を設定し、この記事の後半で学ぶ他の設定を実装することにより、任意の他のテーマを使用することができる

また、設定ファイルにカスタム変数を作成し、サイトのテンプレート、レイアウト、およびインクルードでそれを使用することができます。例えば、author_nameという変数を作成し、テンプレートで{{ site.author_name }} のように使用することができます。

Jekyllの設定ファイルを変更するには、テキストエディタでJekyllプロジェクトディレクトリ内の_config.ymlファイルを開き、変更を加えます。

注）設定ファイルに加えたすべての変更は、jekyll buildまたはjekyll serveでサイトを次に生成した段階で有効になります。

Jekyllでの静的サイトの作成

Jekyllをインストールしたことで、1つのコマンドを実行するだけで、数秒以内にJekyll静的サイトを作成することが可能です。ターミナルを開き、このコマンドを実行します。

jekyll new joels-blog

「joels-blog」を好みのサイト名に置き換えてください。

次に、ウェブサイトのフォルダに移動します。以下のようなディレクトリとファイルを含む基本的なJekyllのサイト構造が表示されます。

├── _config.yml
├── _posts
├── Gemfile
├── Gemfile.lock
├── index.md
└── README.md

ディレクトリとファイルの説明は以下の通りです。

• _config.yml：Jekyllの設定とオプションが含まれているファイル
• _posts：サイトのコンテンツ（ブログ記事など）が含まれているディレクトリ─特定のファイル命名規則を持つMarkdownまたはHTMLファイルになり得る（YEAR-MONTH-DAY-title.MARKUP）
• GemfileとGemfile.lock：Bundlerはこれらファイルを使用して、サイトが依存するRuby gemsを管理する
• index.md：サイトのデフォルトのホームページであり、MarkdownまたはHTMLファイルから生成される

Jekyllサイトのカスタマイズに使用できるファイル/フォルダは他にもあります。例えば次のとおりです。

• _includes：レイアウトやページで使う再利用可能なHTMLスニペットが含まれているディレクトリ（ナビゲーションバー、フッターなど）
• _layouts：ページの構造を定義するHTMLレイアウトテンプレートが含まれるディレクトリ
• assets：画像やCSSファイルなど、サイトで使用するあらゆるファイルを格納するディレクトリ
• _sass：サイトのCSS生成に使用できるSassファイルを含むディレクトリ

このファイル構造は、Jekyllプロジェクトの強固な基盤となりますが、プロジェクトの要件に合わせて変更することができます。

クイックスタート（KinstaのGitHubテンプレートを使用する）

Jekyll CLIを使用してプロジェクトを開始する代わりに、GitHubでKinstaの「Hello World」Jekyllテンプレートを使用して、Gitリポジトリを作成することもできます。「Use this template」＞「Create a new repository」を選択すると、自分のGitHubアカウント内の新しいリポジトリにコードをコピーできます。

Jekyllサイトのプレビュー

Jekyllのサイトを生成したら、要件に合わせたカスタマイズの前に、見た目を確認したいところです。プレビューを実行するには、ターミナルを開き、プロジェクトのディレクトリに移動し、次のコマンドを実行します。

jekyll serve

これにより、プロジェクトから生成されたすべての静的ファイルを含む_siteフォルダが作成されます。また、Jekyllサーバーを開始し、http://localhost:4000でサイトをプレビューすることができます。

ウェブブラウザでURLを閲覧すると、Jekyllサイトがminimaテーマで表示されます。

Jekyllサイトのカスタマイズ

Jekyllでサイトを作成し、テーマを使用することで、要件に合わせてサイトをカスタマイズ可能です。例えば、新しいページを追加したり、ページのレイアウトを変更したり、項目の表示方法を調整したりすることができます。

Jekyllのフロントマターの仕組み

プロジェクトフォルダのページやブログを開くと、ページ上部に3本のダッシュ（—）で囲まれた情報が記載されていることに気づくはずです。これは、フロントマターと呼ばれています。

Jekyllで使用されるメタデータフォーマットで、ページや投稿に関する情報を保存することができます。 YAMLまたはJSONのいずれかで記述可能です。

---
title:  "Welcome to Jekyll!"
description: "Introduction to what Jekyll is about and how it works"
date:   2023-03-07 16:54:37 +0100
---

上記の例では、フロントマターに、タイトル、説明、日付という変数が含まれています。これらの変数は、ページや投稿のレイアウトまたはコンテンツで使用できます。

Jekyllはフロントマターを解析し、サイトのHTMLを生成するのに使用します。レイアウト、パーマリンク、公開状態など、様々なオプションの指定にフロントマターを使用可能です。

デフォルトのフロントマターの設定方法

デフォルトのフロントマターを設定することもできますので、類似のファイルに対して同じフロントマターを定義する必要はありません。たとえば、各ブログ記事で同じ著者名とレイアウトを使用する場合などです。この場合、_config.ymlファイルでカスタムフロントマターを定義して、すべてのブログ記事に対応させることができます。

その構成方法は少し複雑ですが、以下のようになります。これを_config.ymlファイルの最後の設定の下に貼り付けます。

defaults:
 -
   scope:
     path: "posts" # empty string means all files
   values:
     layout: "post"
     author: "John Doe"

jekyll serveコマンドを実行すると、各投稿でレイアウトと作者を定義していない場合でも、ファイル内でアクセスできます。

注）パスを定義しないと、すべてのファイルが定義されたフロントマターの値を使用します。

Jekyllでページを作成する

プロジェクトのルートディレクトリにファイルを作成すると、それがページと見なされます。ファイルにつける名前は、ほとんどの場合URLで使用されるので、各ページのファイルには関連する名前を付けましょう。

例えば、https://example.com/aboutというURLのページを作りたい場合は、about.htmlまたはabout.mdという名前のファイルを作ります。ファイルの拡張子が、ページのコンテンツに使用するマークアップ言語（HTMLまたはMarkdown）を決定します。

ファイルを作成したら、フロントマターとコンテンツを追加します。ファイルを保存し、ブラウザでJekyllサイトを再読み込みします。すると、新しいページがファイル名に対応するURLでアクセスできるようになります。

Jekyllでレイアウトを作成する

サイトのページや投稿の構造とデザインを定義するためにレイアウトを使用することができます。これは通常、HTMLコードで行われます。ヘッダー、フッター、メタ情報をページのメタデータに含めることができます。

最初のステップとして、プロジェクトのルートディレクトリに_layoutsフォルダを作成します。そして、レイアウトごとにファイルを作成します。このファイルには、レイアウトの目的を反映した名前を付けます。たとえば、page.htmlという名前のファイルを作成して、サイト上のすべてのページのページレイアウトを定義することができます。

レイアウトの全体的な構造は、HTMLやその他のマークアップ言語を使って定義するのがベストです。

ページのタイトル、コンテンツ、メタデータなど、レイアウトに挿入される動的なコンテンツについてのプレースホルダーを利用できます。たとえば、ヘッダー、フッター、コンテンツエリアを含む基本的なレイアウトを次のように作成します。

<!DOCTYPE html>
<html>
    <head>
        <title>{{ page.title }}</title>
    </head>
    <body>
        <header>
                <!-- Navigation menu goes here -->
        </header>
        <main>{{ content }}</main>
        <footer>
            <!-- Footer content goes here -->
        </footer>
    </body>
</html>

この例では、{{ page.title }}と{{ content }}のプレースホルダーが、レンダリングされるページの実際のタイトルとコンテンツに置き換えられます。

この時点で、フロントマターでレイアウト値としてpageを使用しているページや投稿は、このレイアウトを持つことになります。layoutsフォルダ内に複数のレイアウトを作成し、好きなようにレイアウトのスタイルを設定することができます。また、似たような名前のレイアウトを定義することで、テーマのレイアウトをオーバーライドすることも可能です。

Jekyllの_includesフォルダの仕組み

_includesフォルダに再利用可能なコードを格納し、これをウェブサイトのさまざまな部分に配置できます。たとえば、includesフォルダにnavbar.htmlファイルを作成し、{% include %}タグを使用して、page.htmlレイアウトファイルにそれを追加することができます。

<!DOCTYPE html>
 <html>
     <head>
         <title>{{ page.title }} </title>
     </head>
     <body>
         <header>{% include navbar.html %} </header>
         <main>{{ content }} </main>
         <footer>
             <!-- Footer content goes here -->
         </footer>
     </body>
 </html>

ビルド時に、Jekyllはnavbar.htmlの内容でタグを置き換えます。

_includesフォルダには、HTML、Markdown、Liquidファイルなど、任意の拡張子のファイルを格納できます。主な目的は、サイト全体でコードを再利用し、DRYの原則に従うことです。

Jekyllでの投稿のループ

すべてのブログ記事を表示する、専用のブログページを作成したいとします。サイト上のすべての記事を取得し、それをループする必要があります。Jekyllでは、{% for %}タグを使用してこれを簡単に実現することができます。

Jekyllのウェブサイト上のすべての投稿は、site.posts変数に格納されます。ループを介し、{{ post.title }}Liquid変数を使用して、各投稿のタイトルを出力することができます。

{% for post in site.posts %}
  <h2>{{ post.title }}</h2>
{% endfor %}

また、投稿の日付や著者など、各投稿に関する他の情報を出力するために、追加のLiquid変数を使用することができます。

{% for post in site.posts %}
  <h2>{{ post.title }}</h2>
  <p>Published on {{ post.date | date: "%B %-d, %Y" }} by {{ post.author }}</p>
{% endfor %}

上の例では、date Liquidフィルタが各投稿の日付をより人間に読みやすい形式に整形していることに注目してください。

これで、Jekyllサイトで実行できる基本的な書式設定についてイメージが湧いたはずです。しかし、テーマを検索し追加することができるので、ゼロからJekyllサイトを構築するためにこれらのすべてを使用する必要はないかもしれません。

Jekyllサイトにテーマを追加する方法

様々なテーマがあります。各テーマについて、GitHubのReadMeファイルにインストール方法の明確な情報が記載されています。テーマを複製することもできますし、gemベースのテーマであれば、そのプロセスはより簡単になります。

この記事では、ブログテーマをインストール、カスタマイズして、Kinstaにブログサイトを展開します。gemベースのテーマということで、GitHubの説明とソースコードも確認可能です。

gemベースのテーマを追加するには、サイトのGemfileを開いて、使用するテーマのgemを追加します。今回使用するテーマは、jekyll-theme-clean-blogです。Gemfileにあるデフォルトのminimaテーマを置き換えます。

gem "jekyll-theme-clean-blog"

テーマのgemとその依存関係をインストールするには、サイトのディレクトリでbundle installコマンドを実行します。

サイトの_config.ymlファイルに、以下の行を追加して、使用するテーマを指定します。

theme: jekyll-theme-clean-blog

これでテーマを使用する準備が整いました。

テーマのレイアウトが上書きされないように、_layoutsディレクトリにあるレイアウトをすべて削除してください。

そして、テーマのドキュメントでファイルのレイアウト名を見つけることができます。例えば、jekyll-theme-clean-blogを使用している場合、index.htmlファイルのレイアウト名は、home、他のページはpage、投稿はpostです。

最後にjekyll serveを実行して、新しいテーマの使用を開始します。

これで完了です。Jekyllサイトに新しいgemベースのテーマが適用されました。サイトの_layoutsディレクトリでそのレイアウトを変更することにより、さらにテーマをカスタマイズすることができます。

Jekyllのテーマをカスタマイズする

テーマが追加されたので、続いては、サイトをカスタマイズし、好みにあわせて変更を加えましょう。例えば、各ページや投稿の画像を非表示にし、背景をグレーにするといった具合です。

使用したい画像へのパスを指定し、各ページと投稿にフロントマターオプションを追加することができます。Jekyllでは、画像のようなアセットは、assetsフォルダに格納されています。このフォルダでは、画像を整理するためにサブフォルダを作成できます。

続いて、フロントマターブロックに背景を追加し、その画像へのパスを追加します。例えば、aboutページでは、これがフロントマターとなります。

---
layout: page
title: About
description: This is the page description. 
permalink: /about/
background: '/assets/images/about-page.jpeg'
---

これをすべてのページと投稿に適用すると、以下のようになります。

もう一つのカスタマイズとして、ナビゲーションバーの調整が行えます。例えば、お問い合わせページが不要な場合、ナビゲーションバーからそのリンクを削除する必要があります。そのためには、テーマのソースコードを調べ、ナビゲーションリンクを処理するファイルに注目し、そのファイルを複製して、不要なオプションを削除します。

ナビゲーションリンクは、_includesフォルダのnavbar.htmlファイルの中にあります。このファイルを作成し、ソースコードからコードを貼り付けて、お問い合わせに関するリンクを削除したり、新しいリンクを追加したりすることができます。

プロジェクトを保存すると、ナビゲーションの変更が反映されます。

最後に、すべてのブログ記事を表示する投稿一覧ページを作成します。このページですべての投稿をループすることになります。

posts.htmlというファイルを作成し、以下のコードを貼り付けます。

---
layout: page
title: Blog
description: Expand your knowledge and stay informed with our engaging blog posts.
background: '/assets/images/blog-page.jpeg'
---

{% for post in site.posts %}

<article class="post-preview">
    <a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}">
        <h2 class="post-title">{{ post.title }}</h2>
        {% if post.subtitle %}
        <h3 class="post-subtitle">{{ post.subtitle }}</h3>
        {% else %}
        <h3 class="post-subtitle">
            {{ post.excerpt | strip_html | truncatewords: 15 }}
        </h3>
        {% endif %}
    </a>
    <p class="post-meta">
        Posted by {% if post.author %} {{ post.author }} {% else %} {{ site.author
        }} {% endif %} on {{ post.date | date: '%B %d, %Y' }} · {% include
        read_time.html content=post.content %}
    </p>
</article>

<hr />

{% endfor %}

背景画像は自由に指定してください。上のコードでは、すべての投稿を表示するために、投稿をループしています。そして以下が、その結果です。

Jekyllサイトにコンテンツを追加する方法

Jekyllサイトの作成と構成の調整を行いました。今度は、コンテンツをJekyllサイトに追加する方法を見てみましょう。

すべてのコンテンツは、_postsフォルダに格納されます。YYYY-MM-DD-title.md（またはHTMLファイルであれば.html）という命名規則です。例えば、「My First Post」という記事を作成するには、 _postsディレクトリに2023-03-08-my-first-post.mdを作成します。

次に、各コンテンツファイルの一番上にフロントマターを追加します。これには、レイアウト、タイトル、説明、日付、その他情報が含まれます。

---
layout: post
title: "How to Read Books: Tips and Strategies for Maximum Learning"
subtitle: "Reading books is one of the most powerful ways to learn new information, gain new perspectives, and expand your knowledge."
date: 2023-03-02 23:45:13 -0400
background: '/assets/images/blog/books.jpeg'
---

そして、HTMLタグやMarkdownを使って、フロントマターの下にコンテンツを追加してください。

ファイルを保存します。すると変更内容が反映されます。

KinstaでJekyllサイトをデプロイする方法

Kinstaは、Jekyllを含む静的なウェブサイトをホストすることができますクラウドプラットフォームです。これは、いくつかの設定を設定し、GitHubにコードをプッシュし、最後にKinstaにデプロイすることによって行うことができます。

前提条件─Jekyllサイトの構成

Gemfile.lockファイルをチェックし、すべてのデバイスが網羅されていることを確認してください。確認には次のコマンドを実行します。

bundle lock --add-platform arm64-darwin-22 x64-mingw-ucrt x86_64-linux

次に、Procfileの作成に進むことができます。このファイルは、サイトの展開時に実行されるコマンドを指定するものです。このファイルに基づき、MyKinstaの「プロセス」タブで実行されるコマンドが自動で更新されます。以下のコマンドをProcfileに追加します。

web: bundle exec jekyll build && ruby -run -e httpd _site

JekyllサイトをGitHubにプッシュする

今回は、Gitコマンドを使って、コードをGitHubにプッシュしてみましょう。まず、GitHubにリポジトリを作成します。これにより、リポジトリのURLにアクセスできるようになります。

ターミナルを開き、プロジェクトのあるディレクトリに移動して、次のコマンドを実行し、ローカルのGitリポジトリを初期化します。

git init

そして、次のコマンドを実行して、コードをローカルのGitリポジトリに追加します。

git add

続いて、次のコマンドで変更をコミットします。

git commit -m "my first commit"

注）「my first commit」の部分を任意の説明に書き替えてください。

最後に、次のコマンドでコードをGitHubにプッシュします。

git remote add origin [repository URL]
git push -u origin master

注）「[repository URL]」の部分をご自身のGitHubリポジトリURLに置き換えてください。

コードがGitHubにプッシュされ、リポジトリのURLからアクセスできるようになります。これでKinstaへのデプロイ準備が整いました。

KinstaにJekyllサイトをデプロイする

Kinstaへのデプロイは、わずか数分で完了します。コントロールパネル「MyKinsta」に移動し、ログインするかアカウントを作成します。次に、GitHubでKinstaアカウントを承認します。

その後、次の手順を実行します。

1. 左サイドバーの「アプリケーション」をクリック
2. 「サービスを追加」をクリック
3. ドロップダウンから「アプリケーション」をクリック

デプロイするリポジトリを選択するモーダルが表示されます。リポジトリに複数のブランチがある場合は、デプロイしたいブランチを選択します。

次に、アプリケーションに名前を付けることができます。25箇所の中からデータセンターの場所を選択します。すると、Procfileから自動でウェブプロセスコマンドが指定されます。

アプリケーションのデプロイが開始されます。数分程で、ウェブサイトのデプロイが完了しリンクが表示されます。この例では、https://myblog-84b54.kinsta.app/となっています。

まとめ

Jekyllがどのように動作するのか、これを使ってどのようにサイトが作成できるのか、そして、カスタマイズの方法を学びました。Jekyllは、そのシンプルさ、柔軟性、そして強力な機能のために静的なウェブサイトを作成する優れたツールとなっています。

Jekyllの直感的なテンプレートシステム、Markdownなど、数々の組み込みサポートにより、コンテンツの豊富なサイトを簡単に素早く作成、管理することができます。

Kinstaのアプリケーションホスティングで静的サイトのデプロイをお試しください。無料利用枠、そして月額7ドルからのホビープランもご用意しています。

Jekyllについてどんなイメージをお持ちですか？Jekyllを利用してプロジェクトを管理したことはありますか？以下のコメント欄でお聞かせください。