「作ったポートフォリオやブログを、お金をかけずに公開したい」「サーバー管理は面倒だけど、高速で安全に出したい」——そんなときに最適なのが Cloudflare Pages です。

GitHubにコードを置いて連携するだけで、ビルドから世界中への高速配信までを自動でやってくれて、しかも無料枠が非常に手厚いのが特徴です。

この記事は、Cloudflareとは？初心者向けに使い方・設定・料金をわかりやすく解説 の関連記事です。Pagesの仕組みから、GitHub連携での公開手順、フレームワーク別のビルド設定、独自ドメイン、つまずき対策までをハンズオン形式で解説します。

Cloudflare Pagesは、静的サイトやフロントエンドアプリを無料で公開できるホスティングサービスです。Cloudflareの世界中のネットワーク（エッジ）から配信されるため、どこからアクセスしても高速です。

特徴を一言でまとめると「GitHubにpushするだけで、自動ビルド→世界配信されるホスティング」です。

• Git連携でCI/CD: リポジトリにpushすると自動でビルド・デプロイ
• 無料・高速: グローバルCDN配信、無料SSL、帯域・リクエスト無制限
• プレビューデプロイ: ブランチ/PRごとに固有URLが発行され、本番前に確認できる
• 独自ドメイン対応: 無料SSL付きで独自ドメインを割り当て可能

近年はWorkersへの統合（Static Assets）も進んでいますが、Git連携で静的サイトを最短公開するなら、現在もPagesが最も手軽な入り口です。

HTML/CSS/JSで構成される静的サイトや、ビルドで静的ファイルを生成するフレームワークと相性が抜群です。

• ポートフォリオ・LP・ドキュメント・ブログ
• Astro / Next.js / React(Vite) / Vue / SvelteKit などで作ったサイト
• APIなどのサーバー処理は、後述の Pages Functions（エッジ実行）で補える

個人利用なら、まず無料プランで十分です。

帯域・リクエストが無制限なのが大きな利点です。アクセスが増えても転送量課金を気にせず運用できます（最新の上限は公式で確認してください）。

• Cloudflareアカウント（無料。作り方は入門記事を参照）
• GitHubアカウントとリポジトリ（公開したいサイトのコード）

今回は最も一般的でおすすめの GitHub連携によるデプロイ を解説します。

公開したいサイトのコードをGitHubリポジトリにpushしておきます。ビルドが必要なフレームワーク（Astro等）の場合は、ローカルで npm run build が通る状態にしておきましょう。

Cloudflareダッシュボードで「Workers & Pages」→「Pages」→「Gitに接続」を選び、GitHubアカウントを認可して対象リポジトリを選択します。

ここが最重要です。使っているフレームワークに合わせて「ビルドコマンド」と「ビルド出力ディレクトリ」を指定します。多くのフレームワークはプリセットから自動入力されます。

出力ディレクトリを間違えると「ビルドは成功したのに真っ白／404」になります。フレームワークのビルド先を必ず確認しましょう。

「保存してデプロイ」を押すと、Cloudflareがリポジトリをクローンしてビルドし、https://プロジェクト名.pages.dev のURLで公開されます。以後は mainブランチにpushするたびに自動で再デプロイ されます。

発行された *.pages.dev のURLにアクセスし、サイトが正しく表示されるか確認します。表示が崩れる場合は、出力ディレクトリやビルドログを見直します。

ダッシュボードの成功表示が保証しているのは「ビルドが終わったこと」だけです。実際に配信されているかは、発行されたURLをコマンドで叩いて確かめます。

SITE="https://<プロジェクト名>.pages.dev"   # カスタムドメインならそのURLを入れる

# トップのステータス行を見る
curl -sI "$SITE/" | head -n 1
curl -sI "$SITE/" | grep -i -e '^content-type' -e '^cf-cache-status'

# トップが200でも真っ白なら、読み込んでいるファイルを直接叩く
curl -s "$SITE/" | grep -o -e 'src="[^"]*"' -e 'href="[^"]*"'
curl -sI "$SITE/assets/index.js" | head -n 1

1行目が HTTP/2 200 なら配信できています。404 が返るなら、ビルド出力ディレクトリの指定か、アセットのベースURLの設定を疑います。ブラウザで見ると「なんとなく出ない」で終わりますが、ステータス番号まで見ればどちらが欠けているかが1回で決まります。

「ビルドは成功したのに真っ白」の大半は出力先の指定違いです。プリセットの自動入力に任せず、手元で1回ビルドして、生成されたディレクトリを確かめてから設定します。

npm run build
ls -d dist out build .output/public 2>/dev/null      # 生成されたのはどれか
find . -maxdepth 3 -name index.html -not -path './node_modules/*'

index.html が入っていたディレクトリ名を、そのまま「ビルド出力ディレクトリ」に書きます。素のHTMLをリポジトリ直下に置いている場合だけ、ビルドコマンドを空にして出力先をルートにします。

*.pages.dev のままでも使えますが、独自ドメインを設定すると本格的です。

1. Pagesプロジェクトの「カスタムドメイン」タブを開く
2. 使いたいドメイン（例 example.com）を追加
3. そのドメインをCloudflareで管理していれば、CNAMEが自動で設定され、無料SSLも自動で有効化されます

ドメインをCloudflareに移していない場合は、入門記事の「ネームサーバー変更」を先に済ませるとスムーズです。

Pagesは、mainブランチ＝本番、それ以外のブランチやPull Request＝プレビューとして、それぞれ固有URLを自動発行します。

• 本番に影響を与えずに変更を確認できる
• レビュー時に「この見た目で合っていますか？」とURLを共有できる

チーム開発でもひとり開発でも、安心して変更を試せる仕組みです。

「静的サイトだけど、問い合わせフォームや簡単なAPIも欲しい」という場合は、Pages Functions を使います。プロジェクト直下に functions/ ディレクトリを作ると、その中のファイルがエッジで動くサーバー関数になります（中身はCloudflare Workersの仕組みです）。

// functions/api/hello.js  →  /api/hello でアクセスできる
export function onRequest() {
  return new Response(JSON.stringify({ message: 'Hello from the edge!' }), {
    headers: { 'content-type': 'application/json' },
  })
}

より本格的にサーバーレスを使いたい場合は、次回の Cloudflare Workers の記事で詳しく解説します。

ビルド出力ディレクトリの指定ミスが大半です。Astroなら dist、CRAなら build など、フレームワークの出力先と一致しているか確認してください。

ビルドログを確認します。よくある原因は、ローカルでしか入っていない依存（package.json に入れ忘れ）、Node.jsバージョンの差異です。環境変数 NODE_VERSION を設定してローカルと揃えると解決することがあります。

クライアントside routingのため、サーバーが該当パスを知らないのが原因です。出力ディレクトリに _redirects ファイルを置き、次の1行を書くと解決します。

/*    /index.html   200

Pagesプロジェクトの「設定」→「環境変数」から、本番用・プレビュー用それぞれに設定できます。フロントに露出してよい値か（ビルド時に埋め込まれるか）には注意しましょう。

Cloudflare Pagesは、GitHub連携だけで静的サイトを無料・高速に公開できる、個人にもチームにも嬉しいホスティングです。要点は次のとおりです。

• Gitにpush → 自動ビルド＆世界配信、無料SSL・独自ドメイン対応
• 肝は ビルドコマンドと出力ディレクトリの正しい指定
• ブランチ/PRごとの プレビューデプロイ で安全に確認
• サーバー処理は Pages Functions で補える

まずは手元のポートフォリオやブログのリポジトリを1つ連携して、*.pages.dev で公開する体験をしてみてください。

あわせて読みたい：

• Cloudflareとは？初心者向けに使い方・設定・料金をわかりやすく解説
• Cloudflare Workers入門：エッジで動くサーバーレス
• Cloudflare R2入門：転送量無料のオブジェクトストレージ