Cloudflare Pagesは、静的サイトやJamstackサイトをホスティングできるサービス。無料枠が大きく、CDNが世界規模で速い。このサイト（umi.design）もCloudflare Pagesで運用しています。

GitHubリポジトリと連携すれば、pushするだけで自動デプロイされる構成が作れます。

Cloudflare Pagesの特徴は？

無料枠が太い

項目	無料枠
ビルド回数	月500回
同時ビルド	1
帯域幅	無制限
リクエスト数	無制限
サイト数	無制限
カスタムドメイン	無制限

帯域幅とリクエスト数が無制限なのが大きい。VercelやNetlifyは無料枠に帯域制限がある。

速い

Cloudflareの世界300以上のエッジロケーションからコンテンツを配信。日本にも複数拠点があるので、国内からのアクセスも速い。

SSL/HTTPS自動設定

カスタムドメインを設定すれば、SSL証明書が自動で発行・更新される。面倒な設定は不要。

デプロイ手順

1. GitHubにリポジトリを用意

AstroやNext.js等で作ったサイトのソースコードをGitHubにpushしておく。

2. Cloudflareアカウントを作成

▶ https://dash.cloudflare.com/sign-up

メールアドレスで無料登録できる。

3. Pages プロジェクトを作成

Cloudflareダッシュボード → 「Workers & Pages」
「Create」→「Pages」→「Connect to Git」
GitHubアカウントを連携し、デプロイするリポジトリを選択

4. ビルド設定

フレームワークに応じたビルド設定を入力する。

項目	Astroの場合
Framework preset	Astro
Build command	`npm run build`
Build output directory	`dist`

Astro以外の主なフレームワーク設定：

フレームワーク	Build command	Output directory
Next.js（静的）	`npx next build`	`out`
Hugo	`hugo`	`public`
Vite	`npm run build`	`dist`

5. 環境変数の設定

必要に応じて環境変数を設定する。APIキーや認証情報などはここに入れる。

「Settings」→「Environment variables」で設定可能。プロダクション環境とプレビュー環境で別の値を設定することもできる。

6. デプロイ実行

「Save and Deploy」を押すとビルドが開始される。初回は数分かかるが、以降はGitHubにpushするたびに自動でデプロイされる。

デプロイ完了後、https://プロジェクト名.pages.devでアクセスできる。

7. カスタムドメインの設定

「Custom domains」タブからドメインを追加する。

Cloudflareでドメインを管理している場合： DNSレコードが自動設定される。数分で反映。

外部のドメインレジストラを使っている場合： CNAMEレコードを手動で設定する。

CNAME  @  プロジェクト名.pages.dev

プレビューデプロイ

mainブランチ以外にpushすると、自動でプレビュー環境が作られる。URLはhttps://ブランチ名.プロジェクト名.pages.devの形式。

プルリクエストごとにプレビューURLが発行されるので、レビュー時にデプロイ結果を確認できて便利。

Vercel・Netlifyとどう違う？

	Cloudflare Pages	Vercel	Netlify
帯域幅（無料）	無制限	100GB/月	100GB/月
ビルド回数（無料）	500回/月	6000分/月	300分/月
CDN	Cloudflare（世界最大級）	Edge Network	CDN
サーバーレス関数	Workers	Serverless Functions	Functions
フォーム機能	なし	なし	あり
分析	Web Analytics（無料）	有料	有料

Cloudflare Pagesが向いている場合

帯域幅を気にしたくない
CDNの速さを重視
Cloudflareの他サービス（Workers, D1, R2等）と組み合わせたい

Vercelが向いている場合

Next.jsを使っている（Vercelが開発元）
ISR/SSR等の動的レンダリングを使いたい

Netlifyが向いている場合

フォーム機能を簡単に使いたい
リダイレクト設定を_redirectsファイルで手軽に管理したい

まとめ

Cloudflare Pagesは、無料枠の大きさとCDNの速さが魅力。GitHubと連携すればpushするだけで自動デプロイされるので、一度設定すれば運用の手間がほとんどかからない。

ポートフォリオサイトやブログなどの静的サイトには、最初の選択肢としておすすめです。

Cloudflare Pagesで静的サイトをデプロイする手順【無料で始める】