Cloudflare Pagesで無料公開する流れ
Cloudflare Pagesは、Cloudflareが提供する、作ったWebサイトを無料プランから公開できるサービスです。
サイトを公開するときは、レンタルサーバーを借りるのが一般的です。Claude CodeやCodexで作ったHTMLのサイトなら、Cloudflare Pagesを使うと月額のサーバー代をかけずに公開できます。
同じように無料で公開できるGitHub Pagesは、GitHubのアカウントが必要です。Cloudflare Pagesなら、GitHubを使わず、完成したサイトのフォルダをアップロードするだけで公開できます。
HTML・CSS・JavaScriptで作った会社サイトやポートフォリオ、1ページのランディングページなどであれば、無料プランから始められます。
この記事では、Claude CodeやCodexで作ったWebサイトをCloudflare Pagesへ公開する方法を、次の2つに分けて紹介します。
- ダッシュボードへドラッグ＆ドロップする方法
- Claude CodeからWranglerを使って公開する方法
初めて公開する場合は、画面上で操作できるドラッグ＆ドロップから始めると進めやすくなります。何度も更新する場合は、Wranglerを使うと毎回フォルダを選ぶ手間を減らせます。
※Cloudflareの画面やコマンド、無料プランの上限は変更されることがあります。本記事は2026年9月時点の内容です。最新情報はCloudflare Pages公式ドキュメントもご確認ください。
こんな方に読んでほしい
- Claude CodeやCodexで作ったWebサイトを公開したい
- GitHubを使わずに公開したい
- ターミナル操作に慣れていない
- 独自ドメインでサイトを表示したい
- 修正したサイトを何度も公開し直したい
Cloudflare Pagesで公開できるサイト
今回の方法に向いているのは、HTML・CSS・JavaScriptなどで作られたWebサイトです。
たとえば、次のようなサイトを公開できます。
- 会社やお店の紹介サイト
- ポートフォリオ
- ランディングページ
- 数ページ程度の小規模サイト
- Viteなどで作成し、公開用ファイルを書き出したサイト
このような、完成したファイルをサーバーへ置けば表示できるサイトを「静的サイト」と呼びます。
WordPressは、そのままでは公開できない
WordPressはPHPやデータベースを使って動くため、WordPressのフォルダをそのままCloudflare Pagesへアップロードしても動きません。
一方、Cloudflare Pagesには「Pages Functions」という、サーバー側の処理を追加する仕組みもあります。そのため、Cloudflare Pagesが静的ファイルしか扱えないわけではありません。
ただし、Pages Functionsの設定には別の知識が必要です。しかも、ダッシュボードからのドラッグ＆ドロップではfunctionsフォルダが処理されません。Pages Functionsを動かすにはWranglerが必要です（_worker.jsだけはドラッグ＆ドロップでも扱えます）。
この記事では、Claude CodeやCodexで作ったHTML・CSS・JavaScriptのサイトを公開する方法にしぼって説明します。
お問い合わせフォームが必要な場合は、外部のフォームサービスを使う方法や、Pages Functionsで処理する方法があります。
GitHub Pagesとの違い
GitHub PagesとCloudflare Pagesは、どちらも静的なWebサイトを公開できます。
大きな違いは、GitHubを使わずに公開できるかどうかです。
| 比較すること | GitHub Pages | Cloudflare Pages |
|---|---|---|
| GitHubアカウント | 必要 | Direct Uploadなら不要 |
| 画面からの直接アップロード | GitHubへの登録が必要 | フォルダやZIPをアップロードできる |
| 自動公開 | pushすると公開できる | GitHub・GitLabとの連携で可能 |
| 独自ドメイン | 設定できる | 設定できる |
| HTTPS | 対応 | 対応 |
GitHubへコードを保存しながら更新したい場合は、GitHub PagesやCloudflare PagesのGit連携が向いています。
GitHubを使わず、まず完成したサイトを公開したい場合は、Cloudflare PagesのDirect Uploadが使いやすいでしょう。
公開する前にフォルダの中身を確認する
アップロードする前に、サイトのフォルダを確認します。
HTML・CSS・JavaScriptで作ったサイトなら、次のような構成になっていることが多いです。
my-site/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── script.js
└── images/
└── main.jpg特に重要なのがindex.htmlです。
index.htmlは、サイトへアクセスしたときに最初に表示されるページです。アップロードするフォルダの中に入っているか確認してください。
ReactやVue、Viteなどを使った場合は、制作中のフォルダではなく、distなどの公開用に書き出されたフォルダをアップロードします。
どのフォルダをアップロードすればよいか分からない場合は、Claude Codeに以下のように伝えて確認します。
このWebサイトをCloudflare Pagesへ公開したいです。
アップロードするフォルダを確認してください。
まだ公開はせず、対象のフォルダだけ教えてください。方法① ダッシュボードから公開する
GitHubを使わず、画面上の操作だけで公開する方法です。
Cloudflareでは、この方法を「Direct Upload」と呼んでいます。公式でも、ローカルにある完成済みのファイルを、Wranglerまたはドラッグ＆ドロップで公開する方法として案内されています（Cloudflare公式：Direct Upload）。
左側のメニューから「Workers & Pages」を開きます。
続いて、次の順番で選択します。
- 「Create application」
- 「Get started」
- 「Drag and drop your files」
Cloudflareの公式手順でも、この順番でDirect Uploadのプロジェクトを作成します。
プロジェクト名を入力します。
この名前は、公開後に発行されるURLの一部になります。
https://プロジェクト名.pages.devすでに同じ名前が使われている場合は、URLへ文字列が追加されることがあります。
index.htmlが入っているフォルダを、アップロード欄へドラッグ＆ドロップします。
ダッシュボードからのDirect Uploadでは、フォルダのほかにZIPファイルも使用できます。
ただし、制作中のフォルダではなく、実際に公開するファイルが入ったフォルダを選んでください。
ファイルを確認したら「Deploy site」を押します。
公開処理が完了すると、次の形式のURLが発行されます。
https://プロジェクト名.pages.devURLを開いてサイトが表示されれば、公開完了です。
更新するとき
公開後にサイトを修正した場合は、プロジェクトを開き、「Create a new deployment」から新しいファイルをアップロードします。
古いサイトへ継ぎ足すのではなく、新しいファイル一式で更新する形です。
Direct Uploadを選ぶ前の注意点
Direct Uploadで作成したプロジェクトは、後からGit連携のプロジェクトへ切り替えられません。
Cloudflare公式にも、Direct Uploadで作ったプロジェクトを、後からGit連携へ変更することはできないと記載されています。
将来GitHubと連携したくなった場合は、Git連携用の新しいプロジェクトを作成します。
逆方向も同じで、Git連携で作ったプロジェクトをDirect Uploadへ変えることもできません。最初にどちらで作るかが、あとから効いてきます。
ただし、同じDirect Uploadプロジェクトの中で、ドラッグ＆ドロップとWranglerを使い分けることはできます。
方法② Claude CodeからWranglerで公開する
何度も更新する場合は、Cloudflare公式の操作ツール「Wrangler」を使うと便利です。
Wranglerは、ターミナルからCloudflareを操作するためのツールです。動かすにはNode.jsとnpmが必要で、対応OSはmacOS 13.5以降・Windows 11以降です。
コマンドを自分で実行することもできますが、Claude Codeへ作業を頼むこともできます。Claude Code側の準備は、Claude Codeの設定にまとめています。
Claude Codeに頼む場合は、以下のように伝えます。
このサイトをCloudflare Pagesへ公開したいです。
・公開対象のフォルダを最初に確認する
・Wranglerを使う
・実行するコマンドを先に見せる
・Cloudflareへのログインが必要なところで止める
・公開後のURLを教える「このフォルダを公開して」だけでは、制作中のファイルと公開用ファイルを取り違えることがあります。最初に公開対象のフォルダを確認してもらうことが大切です。
Wranglerへログインする
初回は、Cloudflareアカウントとの認証が必要です。
npx wrangler loginコマンドを実行するとブラウザが開くので、画面の案内に沿って認証します。
ログイン操作は自分で内容を確認して進めます。
プロジェクトを作成する
プロジェクトをまだ作っていない場合は、次のコマンドを使います。
npx wrangler pages project createプロジェクト名と、本番公開に使うブランチ名を確認されます。
なお、最初からpages deployを実行し、プロジェクトの作成と公開を続けて行うこともできます。
サイトを公開する
公開用フォルダを指定して実行します。
npx wrangler pages deploy <公開用フォルダ>通常のHTMLサイトで、現在のフォルダにindex.htmlがある場合は、次のように指定できます。
npx wrangler pages deploy .Viteなどで公開用ファイルがdistへ出力されている場合は、次のようになります。
npx wrangler pages deploy distCloudflare公式も、npx wrangler pages deploy <BUILD_OUTPUT_DIRECTORY>という形式で、公開用フォルダを指定する手順を案内しています。
Claude Codeがコマンドを提案した場合は、公開先のプロジェクト名と対象フォルダを確認してから実行します。公開後は、Cloudflare Pagesで発行されたURLをブラウザで開き、ページが正しく表示されるか確認してください。
GitHubと連携して自動公開する方法
GitHubやGitLabを使っている場合は、リポジトリとCloudflare Pagesを連携できます。
連携後は、指定したブランチへ変更をpushすると、Cloudflare側でビルドと公開が行われます（Cloudflare公式：Git連携）。
更新頻度が高いサイトや、変更履歴をGitHubへ残したい場合に向いています。
ただし、Direct Uploadで作ったプロジェクトを、そのままGit連携へ切り替えることはできません。Git連携用の新しいプロジェクトを作成する必要があります。
独自ドメインを設定する
pages.devのURLでもサイトは公開できますが、自分で取得した独自ドメインも設定できます。
- 「Workers & Pages」を開く
- 対象のPagesプロジェクトを選ぶ
- 「Custom domains」を開く
- 「Set up a domain」を選ぶ
- 使用するドメインを入力する
Cloudflare公式でも、この手順で独自ドメインを追加します。
独自ドメインの設定方法は、使用する場所によって異なります。
- example.comのようなドメイン本体：Cloudflareのネームサーバー設定が必要
- www.example.comなどのサブドメイン：CNAMEレコードで設定できる
Cloudflare側で管理しているドメインであれば、必要なDNSレコードが自動で追加される場合があります。
HTTPS用の証明書もCloudflare側で発行されます。ただし、DNSやCAAレコードの状態によって、証明書の発行に時間がかかったり、設定が必要になったりすることがあります。
独自ドメインの設定自体にPagesの追加料金はかかりませんが、ドメインの取得・更新費用は別途必要です。
無料プランの主な上限
2026年9月時点の主な上限は次のとおりです（出典＝Cloudflare公式：Pagesの制限）。
| 項目 | 無料プランの上限 |
|---|---|
| ドラッグ＆ドロップのファイル数 | 1,000ファイル |
| Wranglerで公開する場合のファイル数 | 20,000ファイル（無料プランのサイト全体） |
| 1ファイルの最大サイズ | 25MiB（約26.2MB） |
| Git連携によるビルド | 月500回 |
| 1プロジェクトの独自ドメイン数 | 100個 |
以前の本文では「1サイト最大20,000ファイル」としていましたが、ダッシュボードからのドラッグ＆ドロップは1,000ファイルまでです。20,000ファイルはWranglerを使う場合の上限です。
20,000ファイルは無料プランのサイト全体の上限です。有料プランでは環境変数PAGES_WRANGLER_MAJOR_VERSION=4を設定すると100,000ファイルまで上がります。
また、月500回はGit連携でCloudflare側のビルド機能を使う場合の上限です。同時に走らせられるビルドは無料プランで1本、20分を超えるとタイムアウトします。
Functionsを呼び出さない静的ファイルへのリクエストは、無料・有料プランともに無料で、リクエスト数の上限は設けられていません。
ただしPages Functionsを使うと、そのリクエストはWorkersの枠で数えられます。無料プランではFunctionsとWorkersの合算で1日100,000リクエストまでです（UTCの0時にリセット）。
1ファイルの上限はMBではなくMiBで、25MiBは約26.2MBです。これを超える動画などは、Cloudflare R2のような別の置き場所を使います。
小規模な会社サイトやポートフォリオであれば、通常は上限を強く意識せず始められます。
つまずきやすいポイント
トップページが表示されない
アップロードしたフォルダの中にindex.htmlがあるか確認します。
ZIPファイルの場合は、展開した最上位にindex.htmlがある状態にします。不要な親フォルダが一つ入っていないかも確認してください。
画像が表示されない
HTMLに書かれた画像の場所と、実際のファイルの場所が一致しているか確認します。
たとえば、HTMLが次の指定になっている場合、
<img src="images/photo.jpg" alt="">公開するフォルダの中に、次の場所で画像が必要です。
images/photo.jpgMacでは表示できても、公開後に表示できない場合は、ファイル名の大文字と小文字も確認します。
Photo.jpg
photo.jpgこの2つは、公開環境では別のファイルとして扱われます。
画像が表示されない場合は、HTMLに記載されたパスと実際のファイル名をClaude Codeに確認を依頼します。Claude Codeに以下のように伝えます。
Cloudflare Pagesで画像が表示されません。
HTMLに書かれたパスと実際のファイル名を確認してください。
まだ変更せず、原因を先に教えてください。CSSやJavaScriptが反映されない
hrefやsrcに、パソコン内だけで使える場所が書かれていないか確認します。
/Users/名前/Desktop/...このようなパスは、公開後のサイトからは読み込めません。
公開したのに古い画面が表示される
ブラウザに以前のファイルが残っている場合があります。
ページを再読み込みし、それでも変わらない場合は、シークレットウィンドウや別の端末でも確認します。
Wranglerで別のサイトへ公開しそうになる
複数のCloudflare Pagesプロジェクトがある場合は、公開前にプロジェクト名を確認します。
Claude Codeへ公開を任せる場合も、実行前に次の3点を表示させると安全です。
- 公開するフォルダ
- 公開先のプロジェクト名
- 実行するコマンド
公開方法の選び方
Cloudflare Pagesの公開方法は、GitHubを使うかどうかと、更新頻度に合わせて選ぶと分かりやすいです。
- まず一度公開してみたい：ドラッグ＆ドロップ
- GitHubは使わないが、何度も更新する：Wrangler
- GitHubで変更履歴を管理したい：Git連携
- WordPressサイトを運営したい：レンタルサーバーなど別のサーバー（入口はMacでWordPressブログを始める方法）
独自ドメインは、Cloudflare PagesでもGitHub Pagesでも利用できます。
そのため、選ぶ基準は独自ドメインの有無ではなく、GitHubを使うか、どのくらいの頻度で更新するかです。
まとめ
- Cloudflare Pagesを使えば、GitHubなしでもWebサイトを公開できる
- 初めてなら、フォルダやZIPをアップロードするDirect Uploadが分かりやすい
- 更新が多い場合は、Claude CodeからWranglerを使って公開できる
- Claude Codeへ任せる場合も、公開するフォルダとプロジェクト名は自分で確認する
- Direct Uploadで作ったプロジェクトは、後からGit連携へ切り替えられない
- ドラッグ＆ドロップは1,000ファイル、Wranglerは20,000ファイルまで
- WordPressは、そのままCloudflare Pagesへアップロードしても動かない
- 独自ドメインの設定とHTTPSに対応している
Cloudflare Pagesを使うと、Claude CodeやCodexで作ったサイトを、レンタルサーバーを借りずに無料プランから公開できます。
まず公開を体験したい場合はドラッグ＆ドロップ、継続的に更新するようになったらWranglerやGit連携を検討すると、無理なく進められます。
GitHub Pagesで公開する方法は、Claude Codeで作ったWebサイトをGitHub Pagesで公開する方法にまとめています。
気になったことは、お気軽に
この記事のとおりに進めてみて、うまくいかないところがあれば遠慮なく聞いてください。
制作や設定のご相談も、同じ窓口で受けています。
