Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

Jekyll

最終更新 Markdown で表示Agent セットアップ

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

Jekyll をインストールする

Jekyll は Ruby で書かれているため、インストールには rbenv などの動作する Ruby 環境が必要です。

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

rbenv install <RUBY_VERSION> # For example, 3.1.3

Ruby をインストールしたら、jekyll Ruby gem をインストールできます。

gem install jekyll

新しいプロジェクトを作成する

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

jekyll new my-jekyll-site

作成したフォルダーに、サイトのコンテンツとなる index.html を置きます。

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Hello from Cloudflare Pages</title>
	</head>
	<body>
		<h1>Hello from Cloudflare Pages</h1>
	</body>
</html>

任意で、新しい Jekyll サイトにテーマを使うと、見栄えのよい初期スタイルから始められます。たとえば minimal-mistakes ↗ テーマには、"Starting from jekyll new" ↗ のセクションがあり、新しいサイトへのテーマ追加を案内します。

続ける前に

すべてのフレームワークガイドは、Git ↗ の基本的な理解があることを前提としています。Git を初めて使う場合は、この Git ハンドブックの要約 ↗ で、ローカルマシンへの Git のセットアップ方法を確認してください。

SSH でクローンする場合は、GitHub に対して push または pull する各コンピューターで SSH キーを生成 ↗ する必要があります。

詳細は GitHub のドキュメント ↗ と Git のドキュメント ↗ を参照してください。

GitHub リポジトリを作成する

repo.new ↗ にアクセスして、新しい GitHub リポジトリを作成します。作成後、新しく作ったプロジェクトディレクトリに移動します。次のコマンドをターミナルで実行して、ローカルアプリケーションを GitHub へプッシュします。

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 ダッシュボードで Workers & Pages ページを開きます。

    Workers & Pages を開く ↗

  2. Create application を選びます。

  3. Pages タブを選びます。

  4. Import an existing Git repository を選びます。

  5. 作成した新しい GitHub リポジトリを選び、Begin setup を選びます。

  6. Set up builds and deployments セクションで、次の情報を入力します。

設定項目値
本番ブランチmain
ビルドコマンドjekyll build
ビルドディレクトリ_site

ローカルで使っている Ruby バージョンと一致する 環境変数 を追加します。プレビューと本番の両方のデプロイで RUBY_VERSION として設定します。次の例では 3.1.3 を使います。

環境変数 値
RUBY_VERSION 3.1.3

サイトを設定したら、最初のデプロイを開始できます。Cloudflare Pages が jekyll とプロジェクトの依存関係をインストールし、サイトをビルドしてからデプロイする様子が表示されます。

サイトをデプロイすると、プロジェクト専用の *.pages.dev サブドメインが割り当てられます。 Jekyll サイトへ新しいコードをコミットするたびに、Cloudflare Pages はプロジェクトを自動で再ビルドしてデプロイします。プレビューデプロイ も新しい pull request で使えるため、本番へデプロイする前に変更後の見た目を確認できます。

さらに学ぶ

このガイドを完了すると、Jekyll サイトを Cloudflare Pages にデプロイできています。ほかのフレームワークを始めるには、Framework ガイドの一覧 を参照してください。

役に立ちましたか？