Cloudflare Pagesで独自ドメインのサイトを公開する手順
できあがったHTMLを、独自ドメインで、無料で公開するまでの手順です。ほとんどの解説が飛ばしている「pages.devを止める」ところまで書きます。実際に運用しているサイトで確かめた手順です。
できあがったHTMLを、独自ドメインで、月0円で公開するまでの手順です。私が実際に運用しているサイトで使っている手順を、そのまま書きます。
ほとんどの解説記事は「公開できました」で終わります。この記事は、そこで終わると検索で損をするので、最後の後始末まで書きます。
前提:公開するHTMLは用意できているものとする
Cloudflare Pages は、できあがったファイルを配るための場所です。中身は問いません。手書きのHTMLでも、何かのツールが出力したフォルダでも同じように動きます。
必要なものは2つだけです。
- 公開したいファイル一式が入ったフォルダ(
index.htmlが入っていること) - Cloudflareのアカウント(無料)
なぜ Cloudflare Pages を選ぶのかは無料のレンタルサーバーで事業用サイトを運用してはいけない理由に書きました。要点だけ言うと、無料プランに非商用の制限がなく、事業用に使えるからです。
手順①:フォルダをドラッグして公開する
Cloudflareのダッシュボードで Workers & Pages を開き、新規作成に進みます。
最初に出てくる選択肢に注意
2026年9月現在、新規作成の画面はこうなっています。
何か新しいものを作る テンプレートから始めるか、リポジトリを接続するか、コードをアップロードしてください。 ── Connect GitHub / Connect with GitLab / テンプレートを選択してください / 静的ファイルをアップロードしてください 従来のPagesワークフローを使用する必要がありますか? Pagesに進む
ここで素直に「静的ファイルをアップロードしてください」を選ぶと、Pagesではなく Workers のプロジェクトができます。どちらでも静的サイトは問題なく動きますが、この記事はPagesの手順です。
画面のいちばん下にある「Pagesに進む」を選んでください。
Cloudflareは新規の作り方をWorkers側に寄せている最中ですが、Pagesは引き続き使えます。静的なサイトに関して言えば、_headers も _redirects もどちらでも動き、静的ファイルの配信はどちらも無料です。
ひとつだけ実用上の差があります。Cloudflare以外で管理しているドメインを独自ドメインとして使えるのは、Pagesだけです。将来ドメインをよそに移す可能性があるなら、Pagesを選んでおくほうが安全です。
あとの流れ
- プロジェクト名を入力する
- フォルダごと、点線の枠に放り込む
- Deploy site を押す
これで公開されます。アドレスは プロジェクト名.pages.dev です。
⚠️ プロジェクト名はあとから変えられない
プロジェクト名は、作ったあとに変更できません。変えたければプロジェクトを作り直すことになります。
pages.dev のアドレスはこのあと転送して隠すので神経質になる必要はありませんが、管理画面にはずっとこの名前が出ます。適当につけないでください。サイトのドメインと揃えておくのが無難です。
ここでつまずく人が多い2つの制限
ドラッグ&ドロップでの公開には、1,000ファイルまでという上限があります。また、1ファイルは25MiBまでです。
写真を大量に置いたサイトだと、1,000ファイルは意外と早く超えます。超える場合は、ドラッグ&ドロップではなくGit連携か、Cloudflareのコマンドツール(Wrangler)を使うことになります。そちらならファイル数の上限は20,000まで上がります。
大きすぎるファイルがあると赤い警告が出ますが、そのファイルだけ差し替えることはできません。フォルダを直して、最初からやり直しになります。先に中身を確認しておいたほうが早いです。
手順②:独自ドメインをつなぐ
pages.dev のままでも動きますが、事業用なら独自ドメインにします。
- Workers & Pages から、作ったプロジェクトを選ぶ
- Custom domains を開く
- Set up a domain を押す
- 使いたいドメインを入力して Continue
同じCloudflareアカウントでそのドメインを管理している場合、DNSの設定(CNAME)は確認するだけで自動的に入ります。 ここが一番ありがたいところで、コピー&ペーストの作業が発生しません。
SSL証明書も自動でつきます。自分で申請する作業はありません。
ドメインをよそで買った場合
www のようなサブドメインを使うだけなら、買ったところのDNS設定で プロジェクト名.pages.dev へのCNAMEを1本足せば済みます。
やや面倒なのは、www なしのアドレス(apexドメイン)をそのまま使いたい場合です。この場合はドメインをCloudflareの管理下に置いて、ネームサーバーをCloudflareに向ける必要があります。
つまり、Cloudflare Pages を使うと決めているなら、ドメインも最初からCloudflareで取ってしまうのが一番手数が少ないということです。
ただし手数が少ないことと安いことは別です。ドメイン代そのものの比較は独自ドメインは年いくらか。3社の更新料を比べましたにまとめました。
手順③:pages.dev を止める(ここが本題)
ここから先を書いていない解説記事が多いのですが、放っておくと検索で損をします。
独自ドメインをつないだあとも、最初にできた プロジェクト名.pages.dev は生きたまま残ります。 消えません。つまり、まったく同じ中身のサイトが、2つのアドレスで見られる状態になります。
検索エンジンから見ると、これは中身が重複した2つのサイトです。評価が割れますし、意図しないほう(pages.devのほう)が検索結果に出てしまうこともあります。せっかく買ったドメインの意味がなくなります。
実際にどうなっているか
私が運用しているサイトで確かめた結果です。
| 試したアドレス | 結果 |
|---|---|
nandemo-kobo.pages.dev |
301(nandemo-kobo.com へ転送) |
nandemo-kobo.com |
200(本体) |
(2026年9月16日に実際にアクセスして確認)
pages.dev のほうにアクセスしても、本来のアドレスへ転送されるようにしてあります。こうしておくと、重複は起きません。
設定のしかた
Cloudflareの Bulk Redirects を使います。
- Bulk Redirects を開く
- 転送のリストを作る。転送元に
プロジェクト名.pages.dev、転送先に自分のドメインを入れる - そのリストを使う転送ルールを作る
設定するときは、次の4つを有効にしてください。
- 301(恒久的な転送。検索エンジンに「引っ越した」と正しく伝わります)
- Subpath matching(トップページだけでなく、下の階層もまとめて転送する)
- Preserve path suffix(転送先でも同じページを開く)
- Preserve query string(
?以降のパラメータを保つ)
この4つを入れないと、どのページを開いてもトップページに飛ばされる状態になります。これはこれで検索エンジンからの評価が下がるので、必ず設定してください。
手順④:公開したあとにやること
Search Consoleに登録する
Google Search Console に独自ドメインのほうを登録して、サイトマップ(sitemap.xml)を送ります。pages.dev は登録しません。転送してあるので、登録する意味がありません。
www をどうするか決める
www.example.com と example.com は、検索エンジンにとっては別のアドレスです。
どちらか片方に決めて、もう片方は使わないか、転送してください。私は www を作っていません。片方しか存在しなければ、迷う余地がなくなるからです。
ページの中に正しいアドレスを書いておく
各ページの<head>に canonical という指定を入れて、「このページの正式なアドレスはこれです」と書いておきます。転送の設定と二重の保険になります。
つまずきやすいところのまとめ
| 症状 | 原因 | 対処 |
|---|---|---|
| アップロードが通らない | 1,000ファイルを超えている | Git連携かWranglerに切り替える |
| 赤い警告が出る | 25MiBを超えるファイルがある | ファイルを軽くしてやり直す |
| 独自ドメインが設定できない | apexなのにネームサーバーが向いていない | ドメインをCloudflareの管理下に移す |
pages.dev でもサイトが見える |
転送を設定していない | Bulk Redirectsで301 |
| どのページを開いてもトップに飛ぶ | Subpath matchingを入れていない | 転送ルールの設定を見直す |
最後に
画面の名前やボタンの位置は、Cloudflare側の更新でときどき変わります。この記事は2026年9月16日時点のものです。もしボタンが見つからなければ、「アップロード」「Custom domains」「Bulk Redirects」という語を手がかりに探してみてください。やることの中身は変わっていないはずです。
実際、この記事を書いた当日に新規作成の画面が変わっていました(Workers側の導線が前面に出て、Pagesへの入口が下のリンクになっていた)。気づいた時点で本文を直しています。
よくある質問
プログラムの知識がなくてもできますか
公開する作業そのものはフォルダをドラッグするだけなので、知識は要りません。難しいのは公開することではなく、公開するHTMLを用意するほうです。
ドメインは必ずCloudflareで買わないといけませんか
いいえ。ただし独自ドメインそのもの(www無しのアドレス)を使う場合は、ネームサーバーをCloudflareに向ける必要があります。最初からCloudflareで取得しておくと、この手間がまるごと無くなります。
無料のままで商用利用できますか
Cloudflare Pagesの規約に非商用の制限はありません。ただし自分のサイトの中で直接クレジットカード情報を扱うことは、無料プランでは禁止されています。決済は外部のサービスに任せてください。