GitHub PagesからCloudflare Pagesへの移行手順とリダイレクト設定

GitHub Pagesは手軽に静的サイトを公開できる素晴らしいサービスですが、リポジトリ容量および公開サイト容量がそれぞれ「1 GBまで」というソフトリミットが存在します。画像や記事が増えてくると、将来的に容量制限に引っかかる懸念が出てきます。

そこで、容量制限が非常に緩く（ファイル全体のギガバイト制限はなく、1サイトあたり20,000ファイル制限）、配信速度やビルド機能も強力なCloudflare Pagesへ移行する手順を解説します。また、移行時のURL変更に伴うアクセス影響を抑えるための、賢いリダイレクト（転送）方法も紹介します。

1. Cloudflare Pagesでの新規プロジェクト作成

まずは、Cloudflare側でサイトを公開するための設定を行います。

Cloudflareのアカウント作成: Cloudflareダッシュボードにアクセスし、無料アカウントを作成またはログインします。
リポジトリの接続: ログイン後、左メニューの「Workers & Pages」＞右上の「Create application（作成）」をクリックし、「Pages」タブを選択して「Connect to Git（Gitに接続）」から対象のGitHubリポジトリを選択します。
ビルドとデプロイの設定: 以下のように設定をします。
- プロジェクト名: 任意の名称（これが https://[プロジェクト名].pages.dev という初期URLになります）
- フレームワークプリセット: None（なし） を選択します（静的HTMLサイトの場合）。
- ビルドコマンド / 出力ディレクトリ: 空欄のままにします。
デプロイの開始: 一番下の「Save and deploy」をクリックすると、最初のビルドと公開が完了します。

2. 同一リポジトリ運用での競合（無限ループ）対策

今回の移行における最大のポイントは、「GitHub PagesとCloudflare Pagesが、同じGitHubリポジトリを参照し続けている」という点です。これは、AIエージェントによる記事作成のGit運用フローを変えないための措置です。

リポジトリ内のコードを書き換えると両方の環境にデプロイされるため、単に「新URLへ強制リダイレクトする」スクリプトを仕込むと、新ドメイン側でもリダイレクトが走り続けて無限ループ（表示エラー）になってしまいます。

これを防ぐため、JavaScriptでアクセスされたホスト名を判定し、「旧ドメイン（GitHub Pages）にアクセスされた場合のみ転送する」ロジックを実装します。

3. リダイレクト用コードの配置

以下のスクリプトを、サイトのトップページおよび404エラーページに仕込みます。

トップページ (index.html) の設定

index.html の <head> タグ内の最上部に以下のJavaScriptを挿入します。

<script>
  if (window.location.hostname.endsWith('github.io')) {
    const newBase = "https://tech-note.pages.dev";
    // サブディレクトリ（/tech_note）部分を削って新ドメインに結合
    const newPath = window.location.pathname.replace(/^\/tech_note/, '');
    window.location.replace(newBase + newPath + window.location.search + window.location.hash);
  }
</script>

過去の個別記事ページへの直接アクセス対策 (404.html)

GitHub Pagesは、存在しないURLへのアクセスを検出した際、リポジトリのルートにある 404.html を表示してくれます。これを利用して、ルートディレクトリに新規で 404.html を作成し、同様のスクリプトを記述します。

これにより、旧ドメインの個別記事（例: https://[ユーザー名].github.io/tech_note/notes/git/...）にアクセスした人が、自動的に新ドメインの対応する記事ページに自動転送されるようになります。

4. 内部URLの書き換えとSEO（検索エンジン）設定

ホスティング先の切り替えに伴い、サイト全体のメタデータを更新します。

ファイルのURL置換: sitemap.xml や各HTML内のOGPタグ（og:url）、構造化データ（JSON-LD）に記載されている絶対URL（https://[ユーザー名].github.io/tech_note）を、新しいドメイン名（https://tech-note.pages.dev）へ一括置換します。
Amazonアソシエイトの更新: Amazonアソシエイトの管理画面（「ウェブサイトとモバイルアプリの変更」）を開き、新ドメインを追加登録します（未登録サイトからの購入は紹介料対象外となるリスクがあるため必須です）。
Google Search Consoleへの再登録: 新しいURLでプロパティを作成し、所有権確認のためのメタタグを index.html に追加します。その後、新しい sitemap.xml を登録します。

5. まとめ

以上の手順を踏むことで、これまでのGit運用（エージェントによる自動ビルド・デプロイ）をまったく損なうことなく、容量制限の極めて緩い強力なCloudflare Pages環境への移行が完了しました。

同じリポジトリを使用したままで動作するため、ドメイン移行時の心配事であるリンク切れを、JavaScriptのホスト判定だけで安全に回避できるのがこの構成の大きなメリットです。