Makonote

GitHub PagesとCloudflare Pagesはどちらを選ぶべきか

静的サイトを公開するだけなら、GitHub PagesでもCloudflare Pagesでもできます。

ただ、AstroやMarkdownブログを運用する前提だと、少し使い勝手が違います。

結論からいうと、個人ブログや技術メモならCloudflare Pagesの方が扱いやすい場面が多そうです。

ざっくり比較

まず、見るところだけ並べます。

観点 GitHub Pages Cloudflare Pages
静的サイト公開 できる できる
Git連携 GitHub標準 GitHub / GitLab連携
独自ドメイン 対応 対応
Pull Requestプレビュー GitHub Actions次第 Pages側で作りやすい
DNS運用 別途DNSが必要 Cloudflare DNSとまとめやすい
Functions 基本は静的 Pages Functionsがある
制限の見え方 GitHub Pagesの制限を見る Cloudflare Pagesの制限を見る

公式では、GitHub PagesはリポジトリからHTML、CSS、JavaScriptを公開する静的ホスティングとして説明されています。

https://docs.github.com/en/pages/getting-started-with-github-pages/what-is-github-pages

Cloudflare PagesもGitリポジトリへのpushをトリガーにビルド・デプロイする形です。

https://developers.cloudflare.com/pages/configuration/git-integration/github-integration/

GitHub Pagesが向いているケース

GitHub Pagesは、GitHubリポジトリと一体で完結させたいときに分かりやすいです。

たとえば以下のような用途です。

  • OSSのドキュメント
  • ライブラリのデモページ
  • owner.github.io のプロフィールサイト
  • Jekyllベースの小さなサイト

GitHub Pagesには、ユーザー・Organizationサイトとプロジェクトサイトがあります。

公式ドキュメントでは、ユーザー/Organizationサイトは <owner>.github.io リポジトリ、プロジェクトサイトはリポジトリ単位のサイトとして整理されています。

https://docs.github.com/en/pages/getting-started-with-github-pages/what-is-github-pages

GitHubの中だけで閉じるなら、これはかなり楽です。

Cloudflare Pagesが向いているケース

Cloudflare Pagesは、独自ドメインのブログやプロダクトサイトを運用するなら選びやすいです。

特に、Cloudflare DNSも使う場合は流れが自然です。

  • GitHubへpushする
  • Cloudflare Pagesがビルドする
  • Cloudflare DNSで独自ドメインを向ける
  • SSLやリダイレクトもCloudflare側で見る

今回のようにWordPressからAstroへ移す場合も、ドメイン、DNS、SSL、PagesをCloudflare側に寄せられるので、見る画面が減ります。

Cloudflare PagesのCustom domainについては公式にも設定ページがあります。

https://developers.cloudflare.com/pages/configuration/custom-domains/

このあたりは Cloudflare PagesへWordPressのトップドメインを切り替えるときに見ること に分けています。

独自ドメインの扱い

GitHub PagesもCloudflare Pagesも独自ドメインに対応しています。

GitHub Pagesでは、www サブドメイン、任意のサブドメイン、apex domainを扱えます。公式では、www サブドメインを使う構成が安定しやすいとも説明されています。

https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/about-custom-domains-and-github-pages

Cloudflare Pagesでは、Cloudflare DNSと組み合わせるとトップドメインや www の設定を同じ管理画面で扱えます。

DNSもCloudflareに寄せるなら、Cloudflare Pagesの方が迷いにくい印象です。

ただし、DNSの考え方自体はどちらでも必要です。

NS、A、CNAME、TXTの整理は DNSのNS、A、CNAME、TXTレコードをざっくり整理する にまとめています。

ビルドとデプロイ

GitHub Pagesは、GitHub Actionsのカスタムワークフローを使うと、任意の静的サイトジェネレーターをビルドして公開できます。

公式でも configure-pages、upload-pages-artifact、deploy-pages を使った流れが説明されています。

https://docs.github.com/en/pages/getting-started-with-github-pages/using-custom-workflows-with-github-pages

AstroをGitHub Pagesに出すなら、Actionsを書く形になることが多いです。

一方、Cloudflare Pagesはプロジェクト作成時に以下を入れるだけで済みます。

Build command: npm run build
Build output directory: dist
Root directory: 空欄

AstroのCloudflare Pages設定は AstroをCloudflare Pagesにデプロイするときのビルド設定 に書いています。

シンプルなブログなら、Cloudflare Pagesの画面で設定する方が楽かもしれません。

プレビュー環境

Cloudflare Pagesは、Pull RequestごとにPreview URLを作る運用がやりやすいです。

公式のGitHub integrationでは、Pull Requestを開くたびに固有のpreview URLが作られると説明されています。

https://developers.cloudflare.com/pages/configuration/git-integration/github-integration/

記事やデザインの変更を本番前に見るなら、この機能は便利です。

GitHub PagesでもActionsや環境を組めば近いことはできますが、素のGitHub PagesというよりCI設計の話になります。

制限を見る

制限は変わることがあるので、運用前に公式を見るのがよいです。

GitHub Pagesの制限では、公開サイトのサイズ、ビルド時間、帯域、ビルド頻度などが説明されています。

https://docs.github.com/en/pages/getting-started-with-github-pages/github-pages-limits

Cloudflare Pagesの制限では、Freeプランのビルド数、ビルドタイムアウト、ファイル数、ファイルサイズ、リダイレクト数などが整理されています。

https://developers.cloudflare.com/pages/platform/limits/

普通の個人ブログなら、どちらでもすぐ上限に当たることは少ないと思います。

ただ、記事数が増えて画像も増えるなら、ファイル数や画像サイズは少し気にした方がいいです。

どちらを選ぶか

自分なら、というより今回の構成ならCloudflare Pages寄りです。

理由はこのあたりです。

  • 独自ドメインをCloudflare DNSで管理する
  • Astroのbuild outputをそのまま出せる
  • Preview URLが使いやすい
  • 将来的にRedirects、Headers、Functionsへ広げやすい
  • WordPressからの移行でDNSまわりも同じ画面に寄せられる

GitHub Pagesが悪いわけではなく、GitHubのドキュメントサイトや小さなプロジェクトページならかなり合います。

ただ、独自ドメインのブログを育てるなら、Cloudflare Pagesの方が運用の逃げ道が多いです。

まとめ

GitHub PagesとCloudflare Pagesは、どちらも静的サイトを公開できます。

ただ、選び方は少し違います。

  • GitHub内で完結するプロジェクトページならGitHub Pages
  • 独自ドメインのブログやサイト運用ならCloudflare Pages
  • DNSもCloudflareで見るならCloudflare Pages
  • Actionsで細かく制御したいならGitHub Pagesも十分あり

Astro + Markdownブログで始めるなら、Cloudflare Pagesを選んでおくのが扱いやすいと思います。

関連記事

参考