GitHub Pages から Cloudflare Pages へ移行する（CLIデプロイ & 独自ドメイン対応）
はじめに
最近はCloudflareが無料で利用できる範囲が多く、広告も可能ということで、早速自身のGitHub Pagesでホストしているポートフォリオサイトを移行して感触を確かめつつ、その内容を覚書程度に残そうかなというところです。
本記事は、GitHub Pages でホストしていたウェブサイトをCloudflare Pages（CLIデプロイ） に移行する手順を簡単にまとめたものとなります。
GitHub 連携ではなく Wrangler CLI からデプロイする構成 なので、
- ビルド方法を自分で制御したい
- 何かしらの理由でGitHub連携したくない
という人向けの記事です。
前提条件
- GitHub アカウント / Cloudflare アカウントを持っている
- GitHub Pages で公開中のリポジトリがある
- DNSの設定はCloudflareで行なっている
- デプロイは GitHub 連携ではなくローカル CLI から行う
手順概要
- Wrangler CLI でログイン
- CLI から Cloudflare Pages へデプロイ
- DNS 設定（GitHub Pages → Cloudflare Pages）
CLI から Cloudflare へログイン（Wrangler）
Wrangler CLI をインストール
npm install -g @cloudflare/wrangler
Cloudflare にログイン
wrangler login
ブラウザが開き、Cloudflare アカウントへのアクセス許可を求められます。
「Allow」 をクリックして認可します。
CLI から Cloudflare Pages へデプロイ
リポジトリをクローン
git clone https://github.com/your-name/your-repo.git
cd your-repo
ビルド & デプロイ
next build && wrangler pages deploy out --project-name=portfolio
DNS 設定の更新
既存のGitHub Pagesでホストしている向きをCloudflare Pagesへ向けるための設定です。
イメージ的には以下のような感じです。
portfolio.b0cchi.dev
├─ ✗ 以前 → xx.github.io (GitHub Pages)
└─ ○ 現在 → xx.pages.dev (Cloudflare Pages)
1. GitHub Pages 用 CNAME レコードを削除
既存のxxx.github.ioのCNAME設定を削除します。Cloudflareでは下図のような感じでDNS > レコードページから削除可能です。
2. Cloudflare Pages にカスタムドメインを追加
Cloudflareのページにアクセスし、Pagesのページで当該のプロジェクトを開き、カスタムドメインタブをクリックします。
その後、GitHub Pagesで使っていたサイト名と同じようになるよう、ドメインのところに入力後、続行をクリックします。
3. ドメインをアクティブにする
下図のようにドメインをアクティブにするボタンをしたら終わりです！
完了
上記の設定までしても数分（だいたい5分くらい？）の間はアクセスができません。
おそらく証明書の発行に時間がかかっているためと考えられます。
しばし待ってから、上で設定したアドレスにアクセスしてみて、アクセスできたら完了です！
これでGitHub Pages から Cloudflare Pages への移行が完了です。
所感
何も迷うことなく簡単にPagesもCLIからデプロイできて非常に完成度が高いという第一印象。
これで、広告も貼れるのは非常に素晴らしいの一言。
Vercel一択かなと思っていたんですが、全然身近に素晴らしいサービスがあったので、他のサービス、次はWorkersで遊んでみます！
おわりに
もし内容に 間違い・分かりづらい点・補足した方がよさそうな点 などがあれば、
Zenn のコメント、もしくは X（旧Twitter）の DM で教えてもらえると助かります 🙏
後から追記・修正する可能性もあるので、フィードバック大歓迎です。
Discussion