このチュートリアルでは、既存の Jekyll を使った GitHub Pages サイト ↗ を Cloudflare Pages へ移行します。Jekyll は GitHub Pages でよく使われる静的サイトジェネレーターの 1 つです。GitHub Pages サイトの Cloudflare Pages への移行は、短い手順で完了します。
このチュートリアルでは次を行います。
- GitHub Pages が使う依存関係を、プロジェクト設定に追加します。
- 既存の GitHub リポジトリに接続した、新しい Cloudflare Pages サイトを作成します。
- Cloudflare Pages でサイトをビルドしてデプロイします。
- （任意）カスタムドメインを移行します。
ビルド時間を含めても、所要時間は 15 分未満です。
このチュートリアルの前提は次のとおりです。
- Jekyll ↗ を使った既存の GitHub Pages サイトがあること。
- Ruby のコマンドラインツールに慣れており、
gemとbundleがインストールされていること。 add、commit、push、pullなど、基本的な Git 操作を使えること。- Cloudflare Pages の はじめに を読んでいること。
マシンに Rubygems（gem）または Bundler（bundle）が入っていない場合は、Rubygems ↗ と Bundler ↗ のインストールガイドを参照してください。
既存の Jekyll ベースのリポジトリでは、ビルド手順 中に Cloudflare Pages が依存関係を取得してインストールできるよう、Gemfile（Ruby の依存関係設定ファイル）を指定する必要があります。
具体的には、Gemfile を作成し、GitHub Pages 環境が前提とする依存関係をすべて含む github-pages gem をインストールします。
Pages ビルド環境のバージョン 2 では、デフォルトの Jekyll ビルドに Ruby 3.2.2 を使います。ローカルの開発環境に互換性があることを確認してください。
brew install [email protected]
export PATH="/usr/local/opt/[email protected]/bin:$PATH"cd my-github-pages-repo
bundle init作成された Gemfile を開き、ファイルの末尾に次の行を追加します。
gem "github-pages", group: :jekyll_pluginsGemfile は次のようになります。
# frozen_string_literal: true
source "https://rubygems.org"
git_source(:github) { |repo_name| "https://github.com/#{repo_name}" }
# gem "rails"
gem "github-pages", group: :jekyll_pluginsbundle update を実行すると、github-pages gem がインストールされ、解決済みの依存関係バージョンで Gemfile.lock が作成されます。
bundle update
# Bundler will show a lot of output as it fetches the dependencies正常に完了するはずです。失敗した場合は、上の github-pages の行を正確にコピーしたこと、先頭の # でコメントアウトしていないことを確認してください。
続く手順で Cloudflare Pages が参照できるよう、これらのファイルをリポジトリへコミットします。
git add Gemfile Gemfile.lock
git commit -m "deps: added Gemfiles"
git push origin mainGitHub Pages プロジェクトの依存関係を明示したので、Cloudflare Pages の設定を始められます。手順は Jekyll サイトのデプロイ とほぼ同じです。
サイトを Pages にデプロイするには、次の手順を実行します。
-
Cloudflare ダッシュボードで Workers & Pages ページを開きます。
Workers & Pages を開く ↗ -
Create application > Pages > Import an existing Git repository を選びます。
-
作成した新しい GitHub リポジトリを選び、Set up builds and deployments セクションで次の情報を入力します。
| Configuration option | Value |
|---|---|
| Production branch | main |
| Build command | jekyll build |
| Build directory | _site |
サイトを設定したら、最初のデプロイを開始できます。Cloudflare Pages が jekyll とプロジェクトの依存関係をインストールし、サイトをビルドしてからデプロイする様子が表示されます。
サイトをデプロイすると、プロジェクト専用の *.pages.dev サブドメインが割り当てられます。Jekyll サイトに新しいコードをコミットするたびに、Cloudflare Pages はプロジェクトを自動で再ビルドしてデプロイします。新しいプルリクエストでは プレビューデプロイ も利用できるので、本番に出す前に変更後の見た目を確認できます。
GitHub Pages でカスタムドメイン ↗ を使っている場合は、DNS レコードを新しい Cloudflare Pages のデプロイへ向ける必要があります。ドメインの DNS プロバイダーで CNAME レコードを更新し、<your-username>.github.io の代わりに <your-pages-site>.pages.dev を指すようにします。
レコード作成時に設定した DNS TTL（生存時間）によっては、DNS キャッシュの期限切れと変更の反映に時間がかかることがあります。
詳細な手順は、はじめにガイドの カスタムドメインを追加する を参照してください。
- Cloudflare Workers を使い、Pages サイトの HTTP レスポンスヘッダーをカスタマイズ します。
- 壊れている可能性があるデプロイを、以前動いていたバージョンへ ロールバックする 方法を確認します。
- 訪問者が常に正規のカスタムドメインへ向かうよう、リダイレクトを設定 します。