コンテンツにスキップ

Jekyll

Jekyll ↗は、MarkdownとLiquidテンプレートを基にしたウェブサイト作成のためのオープンソースフレームワークです。このガイドでは、新しいJekyllアプリケーションを作成し、Cloudflare Pagesを使用してデプロイします。jekyll CLIを使用して新しいJekyllサイトを作成します。

Jekyllのインストール

JekyllはRubyで書かれているため、Jekyllをインストールするには、rbenvのような機能するRubyインストールが必要です。

コンピュータにRubyをインストールするには、rbenvのインストール手順 ↗に従い、ターミナルでrbenvコマンドを実行して最新のRubyバージョンを選択します。インストールしたRubyバージョンは、アプリケーションのPagesデプロイメントの設定にも使用されます。

Terminal window
rbenv install <RUBY_VERSION> # 例えば、3.1.3

Rubyがインストールされたら、jekyll Ruby gemをインストールできます：

Terminal window
gem install jekyll

新しいプロジェクトの作成

Jekyllがインストールされたら、ターミナルでjekyll newを実行して新しいプロジェクトを作成できます：

Terminal window
jekyll new my-jekyll-site

新しく作成したフォルダに基本的なindex.htmlを作成して、サイトにコンテンツを提供します：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Cloudflare Pagesからのこんにちは</title>
  </head>
  <body>
    <h1>Cloudflare Pagesからのこんにちは</h1>
  </body>
</html>

オプションとして、新しいJekyllサイトにテーマを使用することもできます。これにより、素晴らしいスタイリングのデフォルトから始めることができます。例えば、minimal-mistakes ↗テーマには、新しいサイトにテーマを追加するための”jekyll newから始める” ↗セクションがあります。

Before you continue

All of the framework guides assume you already have a fundamental understanding of Git ↗. If you are new to Git, refer to this summarized Git handbook ↗ on how to set up Git on your local machine.

If you clone with SSH, you must generate SSH keys ↗ on each computer you use to push or pull from GitHub.

Refer to the GitHub documentation ↗ and Git documentation ↗ for more information.

Create a GitHub repository

Create a new GitHub repository by visiting repo.new ↗. After creating a new repository, go to your newly created project directory to prepare and push your local application to GitHub by running the following commands in your terminal:

Terminal window
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git branch -M main
git push -u origin main

既存のJekyllプロジェクトをPagesに移行する場合は、Gemfileがコードベースの一部としてコミットされていることを確認してください。PagesはGemfileを確認し、bundle installを実行して、jekyll gemを含むプロジェクトに必要な依存関係をインストールします。

Cloudflare Pagesでのデプロイ

サイトをPagesにデプロイするには：

  1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
  2. アカウントホームで、Workers & Pages > アプリケーションを作成 > Pages > Gitに接続を選択します。
  3. 作成した新しいGitHubリポジトリを選択し、ビルドとデプロイの設定セクションで、次の情報を提供します：
Configuration option Value
Production branch main
Build command jekyll build
Build directory _site

ローカルで使用しているRubyバージョンに一致する環境変数を追加します。これをプレビューと本番の両方のデプロイメントでRUBY_VERSIONとして設定します。以下では、3.1.3を例として使用しています：

環境変数値
RUBY_VERSION3.1.3

サイトの設定が完了したら、最初のデプロイを開始できます。Cloudflare Pagesがjekyll、プロジェクトの依存関係をインストールし、サイトをビルドしてデプロイするのを見ることができるはずです。

サイトをデプロイした後、プロジェクトのためのユニークなサブドメインが*.pages.devで提供されます。Jekyllサイトに新しいコードをコミットするたびに、Cloudflare Pagesは自動的にプロジェクトを再ビルドしてデプロイします。また、新しいプルリクエストでプレビューデプロイメントにアクセスできるため、変更が本番環境にデプロイされる前にサイトにどのように表示されるかをプレビューできます。

Learn more

By completing this guide, you have successfully deployed your Jekyll site to Cloudflare Pages. To get started with other frameworks, refer to the list of Framework guides.

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings