コンテンツにスキップ

JekyllベースのサイトをGitHub PagesからCloudflare Pagesに移行する

Last reviewed: about 3 years ago

このチュートリアルでは、既存のJekyllを使用したGitHub Pagesサイト ↗をCloudflare Pagesに移行する方法を学びます。JekyllはGitHub Pagesで使用される最も人気のある静的サイトジェネレーターの1つであり、GitHub PagesサイトをCloudflare Pagesに移行するには、いくつかの短いステップを踏む必要があります。

このチュートリアルでは、以下の内容を案内します：

  1. GitHub Pagesで使用される必要な依存関係をプロジェクト設定に追加する。
  2. 既存のGitHubリポジトリに接続された新しいCloudflare Pagesサイトを作成する。
  3. Cloudflare Pages上でサイトをビルドしてデプロイする。
  4. （オプション）カスタムドメインを移行する。

ビルド時間を含め、このチュートリアルは15分未満で完了するはずです。

始める前に

このチュートリアルは以下の前提を持っています：

  1. Jekyll ↗を使用した既存のGitHub Pagesサイトがあること。
  2. Rubyのコマンドラインツールを実行することにある程度の慣れがあり、gemとbundleがインストールされていること。
  3. add、commit、push、pullなどの基本的なGit操作を使用できること。
  4. Cloudflare PagesのGet Startedガイドを読んでいること。

もしRubygems（gem）やBundler（bundle）がマシンにインストールされていない場合は、Rubygems ↗とBundler ↗のインストールガイドを参照してください。

GitHub Pagesリポジトリの準備

既存のJekyllベースのリポジトリは、Cloudflare Pagesがビルドステップ中に依存関係を取得してインストールできるように、Gemfile（Rubyの依存関係設定ファイル）を指定する必要があります。

具体的には、Gemfileを作成し、GitHub Pages環境が前提とするすべての依存関係を含むgithub-pages gemをインストールする必要があります。

Gemfileを作成する
cd my-github-pages-repo
bundle init

作成されたGemfileを開き、ファイルの最後に以下の行を追加します：

github-pagesのバージョンを指定する
gem "github-pages", "~> 215", group: :jekyll_plugins

あなたのGemfileは以下のようになるはずです：

# frozen_string_literal: true


source "https://rubygems.org"


git_source(:github) { |repo_name| "https://github.com/#{repo_name}" }


# gem "rails"
gem "github-pages", "~> 215", group: :jekyll_plugins

bundle updateを実行すると、github-pages gemがインストールされ、解決された依存関係のバージョンを持つGemfile.lockファイルが作成されます。

bundle updateを実行する
bundle update
# Bundlerは依存関係を取得する際に多くの出力を表示します

これが成功裏に完了するはずです。そうでない場合は、上記のgithub-pagesの行を正確にコピーしたことを確認し、先頭に#を付けてコメントアウトしていないことを確認してください。

これらのファイルをリポジトリにコミットする必要がありますので、Cloudflare Pagesが次のステップで参照できるようにします：

GemfileとGemfile.lockをコミットする
git add Gemfile Gemfile.lock
git commit -m "deps: added Gemfiles"
git push origin main

Pagesプロジェクトの設定

GitHub Pagesプロジェクトが依存関係を明示的に指定したので、Cloudflare Pagesの設定を開始できます。このプロセスは、Jekyllサイトをデプロイするのほぼ同じです。

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

  1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
  2. アカウントホームで、Workers & Pages > Create application > Pages > Connect to Gitを選択します。
  3. 作成した新しいGitHubリポジトリを選択し、Set up builds and deploymentsセクションで以下の情報を提供します：
設定オプション値
プロダクションブランチmain
ビルドコマンドjekyll build
ビルドディレクトリ_site

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

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

カスタムドメインの移行

GitHub Pagesでカスタムドメイン ↗を使用している場合は、DNSレコードを新しいCloudflare Pagesデプロイメントを指すように更新する必要があります。これには、ドメインのDNSプロバイダーでCNAMEレコードを<your-pages-site>.pages.devにポイントするように更新する必要があります。<your-username>.github.ioを置き換えます。

この変更が反映されるまでにDNSキャッシュが期限切れになるまで時間がかかる場合がありますので、元々レコードを作成したときに設定したDNS TTL（生存時間）値に依存します。

詳細な手順のリストについては、Get started guideのカスタムドメインの追加セクションを参照してください。

次は何をしますか？

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings