til/applied-sciences/engineering/web-hosting-github-pages-vs-cloudflare
ダブルクリックで英日反転
Applied Sciences · Engineering

GitHub Pages vs Cloudflare Pages — differences and a migration plan

EN

A deep dive into how each free static hosting platform works, why they can afford to be free, and a practical step-by-step migration plan from a GitHub Pages project site to a custom domain via Cloudflare.

How each platform delivers files

  • GitHub Pages: push → Jekyll build → Fastly-based CDN (unconfirmed officially) → `<user>.github.io/<repo>/`
  • Cloudflare Pages: push → build in Cloudflare's container → pre-distributed to 337-city global CDN → edge delivery
  • Key structural difference: GitHub uses CDN as origin cache; Cloudflare pre-distributes artefacts to the edge itself

Why both are free

  • GitHub Pages: loss leader under Microsoft — revenue recovered via Actions, Copilot, and Enterprise, not Pages itself
  • Cloudflare Pages: owns fixed-cost global CDN; marginal cost per user ≈ 0; upsells Workers, R2, D1, KV, Zero Trust
  • Cloudflare differentiates from Vercel/Netlify with unlimited bandwidth vs their 100 GB/month soft caps

Key limit comparison

  • GitHub Pages: 1 GB site max, 100 GB/month bandwidth (soft), 10 builds/hour, 10-min build timeout
  • Cloudflare Pages (free): unlimited bandwidth & requests, 500 builds/month, 20-min build timeout, 20,000 files
  • GitHub Pages: restricted Jekyll plugin allowlist; Cloudflare supports Jekyll, Hugo, Astro, Next.js, and more

Recommended migration strategy

  • Hybrid first: move DNS to Cloudflare (WAF/DDoS gains), keep hosting on GitHub Pages with custom domain A records
  • Fix `baseurl: /til` → `""` in `_config.yml` before pointing the apex domain, or all CSS paths 404
  • SEO: use `jekyll-redirect-from` for meta-refresh redirects; register new GSC property; wait 3–6 months for natural changeover
  • Full migration trigger: commercial need, Workers/R2 dependency, or hitting plugin/build limits regularly
→ At small scale, move DNS to Cloudflare for free WAF/DDoS, but keep GitHub Pages hosting — migrate fully only when you actually hit a limit.
Applied Sciences · Engineering

GitHub Pages と​ Cloudflare Pages の​違い・移行計画

JP

それぞれの​静的ホスティング​（ファイルを​そのまま​配信する​ウェブ公開サービス）が​内部で​どう​動くか、​なぜ​無料で​維持できるかを​解説し、​GitHub Pages の​プロジェクトサイトを​カスタムドメインに​移行する​具体的な​手順を​まとめる。

ファイル配信の​仕組みの​違い

  • GitHub Pages: push → Jekyll ビルド → Fastly ベースの​ CDN​（公式未確認）​→ `<user>.github.io/<repo>/` で​配信
  • Cloudflare Pages: push → Cloudflare の​コンテナで​ビルド → 337 都市の​グローバル CDN に​事前配布 → エッジ配信
  • 構造的な​差: GitHub は​ CDN を​オリジンキャッシュと​して​使うが、​Cloudflare は​ビルド成果物を​エッジ自体に​配置する

なぜ​無料で​提供できるか

  • GitHub Pages: Microsoft 傘下の​ロスリーダー​（集客目的の​赤字商品）。​収益は​ Actions・Copilot・Enterprise で​回収
  • Cloudflare Pages: 自社グローバル CDN の​固定費モデルで​ユーザー追加の​限界費用が​ほぼゼロ。​Workers・R2・D1・KV などへの​アップセルで​稼ぐ
  • Vercel・Netlify の​ 100 GB/月制限に​対し​「帯域無制限」を​武器に​開発者を​取り込む差別化戦略

主要制限の​比較

  • GitHub Pages: サイト上限 1 GB、​帯域 100 GB/月​（ソフト）、​ビルド 10 回/時、​タイムアウト 10 分
  • Cloudflare Pages 無料プラン: 帯域・リクエスト無制限、​ビルド 500 回/月、​タイムアウト 20 分、​ファイル数 2 万件
  • GitHub Pages は​ Jekyll プラグインが​許可リスト制限​あり。​Cloudflare は​ Jekyll・Hugo・Astro・Next.js など​多数の​プリセット対応

推奨移行戦略

  • まずハイブリッド構成: DNS を​ Cloudflare に​移し WAF​（ウェブアプリケーションファイアウォール）​・DDoS 防御だけ得て、​ホスティングは​ GitHub Pages のまま​維持
  • `_config.yml` の​ `baseurl: /til` を​空文字に​変更しないと、​カスタムドメイン後に​ CSS が​全て​ 404 に​なる
  • SEO 対策: `jekyll-redirect-from` プラグインで​メタリフレッシュリダイレクトを​設置し、​Google Search Console に​新プロパティを​登録。​自然な​引き継ぎに​ 3〜6 か​月かかる
  • 完全移行の​タイミング: 商用ニーズ・Workers/R2 依存・プラグイン制限への​定常的な​抵触の​いずれかが​発生した​とき
→ 規模が​小さい​段階は​ DNS を​ Cloudflare に​移して​ WAF・DDoS 防御を​無料で​得るに​と​どめ、​実際に​制限に​当たってから​完全移行を​検討すれば​十分。

出典・参考 / Sources

Related notes

148 notestil