はじめに

このブログは静的サイトジェネレータHugoを使って構築している。
GitHub Pagesで公開していたが、アクセス数が増えて帯域制限に迫ってきたためCloudflare Pagesに移行した。
また、GitHub Pagesの無料プランではパブリックリポジトリを使う必要があり、誤って個人情報を公開してしまう可能性があることも理由である。
この記事は移行の備忘録である。

移行前後の構成は以下の通り。

なお、ドメインはお名前ドットコムを継続使用した。

ホスティングサービスの無料プラン比較

まず、静的サイトホスティングサービスの無料プランを比較した。ただし、Azure, AWSなどは多機能過ぎて学習コストが高く、今回のブログ構築の目的には合わないと思ったので除外している。

比較の結果、帯域制限のないCloudflare Pagesに移行することにした。

なお、これらの中ではNetlifyのサーバは海外にあるため、日本からの応答速度がやや遅い。
Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる - Zenn

移行の手順

GitHub PagesからCloudflare Pagesへ移行した手順を示す。

1. Cloudflare Pagesでビルドするリポジトリを指定
2. ドメインの設定
3. GitHub Pagesの公開停止

以下、詳細を示す。

Cloudflare Pagesのリポジトリ設定

まず、Cloudflare Pagesのアカウントを作成し、GitHubのアカウントと紐づける。次に、Cloudflare Pagesでプロジェクトを作成し、Hugoのソースコードがあるリポジトリを指定する。

このリポジトリを自動ビルドするにあたって、「フレームワークプリセット」をHugoにする。また、環境変数にHUGO_VERSIONを追加し、ビルドするHugoのバージョンを指定する。

ドメインの設定

Cloudflare Pagesでカスタムドメインを設定し、Cloudflare DNSを開始する。Cloudflare DNSは無料プランとした。
そうすると、Cloudflareのネームサーバを追加せよと表示されるので、お名前ドットコムでネームサーバを設定する。

Cloudflare Pagesに戻り、ネームサーバをチェックする。カスタムドメインのタブが以下のようになれば、おそらく完了である。

通常は1日程待つらしいが、今回は30分も掛からずに移行が完了した。
移行が完了したら、忘れずにGitHub Pagesを公開停止しておく。

参考

• プラン 料金設定 Cloudflare
• Limits - Cloudflare Pages docs
• GitHub Pages について - GitHub Docs
• Netlify Pricing
• Fair Use Policy - Vercel
• Vercel の料金形態と内容についてまとめた - 2020冬
• Cloudflare Pagesにカスタムドメインを設定する - Qiita