HTMLファイルを無料で公開する手順（Cloudflare Pages）｜公開後に確認する5つのこと

1. この方法が向く人、向かない人

向くのは、HTML・CSS・画像が完成していて、送信処理やデータベースを使わないサイトです。ページが1〜5枚で、更新を自分で行う回数が多くない場合に合います。

向かないのは、WordPressのように、サーバー側でPHPやデータベースを動かすサイトです。問い合わせフォームの送信先も、静的ファイルだけでは用意できません（フォームの切り分けを参照）。公開先の選択肢の比較は、公開先の3つの選択肢にあります。

2. アップロード前に整えるフォルダ

公開するのは、完成したファイルを入れた1つのフォルダです。次のような構成にします。

site/
  index.html          トップページ（/）
  about/index.html    会社案内（/about/）
  assets/             CSS・画像・JavaScript
  404.html            存在しないURLのページ

公式資料に、上限が書かれています。

• 1つのファイルは25MiBまで。
• ファイルの数は、ダッシュボードのドラッグ＆ドロップで1,000、Wranglerで20,000（無料プランの上限も20,000）。

3. 公開する2つの方法

本番の公開先はプロジェクト名.pages.devの形です。2つの方法は、同じプロジェクトの中で切り替えられます。一方、完成ファイルのアップロードで作ったプロジェクトは、あとからGit連携に切り替えられません。自動で公開したくなったら、Git連携の新しいプロジェクトを作ります。

4. 公開後のURLの動き

公式資料によると、Pagesは次のように動きます。

• /contact.htmlは、拡張子のない/contactに転送される。
• /about/index.htmlは、末尾にスラッシュを付けた/about/に転送される。
• 最上位に404.htmlを置くと、存在しないURLでそのページが表示される。
• 最上位に404.htmlがない場合、Pagesはシングルページアプリとして扱い、すべてのURLを/（トップ）へ向ける。

最後の点は注意が必要です。404.htmlを置かないと、URLを打ち間違えた人にもトップページが表示されます。リンク切れに気づきにくくなるため、404.htmlを用意します。

5. 公開後に確認する5つのこと

公開したら、手元のフォルダではなく、実際のURLで確認します。

1. トップと各ページが表示される。メニューのリンクを全部開く。
2. 存在しないURLで404ページが出る。トップが表示されたら、404.htmlが公開されていない。
3. CSSと画像が読み込まれている。パスが/assets/…の形か、ページの深さに合っているかを見る。
4. スマホで横にはみ出さない。手順はスマホで横にはみ出す原因と直し方。
5. 公開中のファイルが、手元の完成版と同じ。古いファイルが残っていないかを確かめる。

コマンドでの確認例です。URLの転送を追うかどうかで、結果が変わります。

# 応答の種類（200が表示、308が転送）
curl -sI https://プロジェクト名.pages.dev/about/ | head -3

# 転送を追って、最終的なページの内容を取得
curl -sL https://プロジェクト名.pages.dev/about/ | head -20

# 手元のファイルとの照合（内容が同じなら同じ値が出る）
shasum -a 256 site/about/index.html
curl -sL https://プロジェクト名.pages.dev/about/ | shasum -a 256

転送のある環境でも、所有権確認などの外部サービスの確認は通ることがあります。2026年10月10日に、Search ConsoleのHTMLファイル方式（googleXXXX.html）で試したところ、このファイルが拡張子のないURLへ転送されても、所有権の確認は完了しました。Googleの公式資料も、同じドメイン内の転送は追われると説明しています。ただし、この結果は1回の確認です。確認に失敗するときは、メタタグ方式など別の方法に切り替えます。手順の全体はSearch Consoleの登録手順にあります。

6. 独自ドメインを使うとき

公式資料によると、独自ドメインの設定方法は名前の形で変わります。example.comのような頭に何も付かない名前は、そのドメインをCloudflareのゾーンとして登録し、ネームサーバーをCloudflareのものにする必要があります。www.example.comのようなサブドメインは、今のDNS会社のままで、プロジェクト名.pages.devを指すCNAMEレコードを設定する方法があります。ダッシュボードでドメインを追加する前に、CNAMEだけを手で作ると、522エラーになると書かれています。

独自ドメインが必要かどうかは、費用と更新の条件を並べて決めます。費用計算と無料公開と有料サーバーの選び方が、判断の材料になります。