CloudflareにHTMLファイルをアップロードしてWebアプリとして公開する

CloudflareにHTML・CSS・JavaScriptなどの静的ファイルをそのままアップロードして簡易デプロイ（本番環境への公開・反映）する。

注意: Cloudflare Pages は現在移行期にあり、画面上の用語や公開URLの形式が本文と異なる場合があります。Cloudflare側の情報が明確になりましたら、この文書も更新します。

1. CloudflareでWebページをサクッと公開する

1-1. Cloudflareアカウントを作る

• Cloudflareのサイトにアクセスして、ページの下の方にある 無料で始める をクリック、または右上の ログイン → Sign up
• Googleアカウントがあればそれでサインアップすると楽

1-2. アップするファイルを準備する

Finderでデスクトップに作業用フォルダ（例えば "cf"）を作成する。

デスクトップ版Claudeアプリを起動。

Code（Claude Code）を選択 → New session をクリック → 作業ディレクトリを指定（~/Desktop/cf）

下記のプロンプトを実行する:

index.html を作って。Hello World と表示するだけのシンプルなHTML。

なお、途中でファイル操作の許可を求められることがあるので、その都度許可する。

完成したらFinderで デスクトップ → cf フォルダを開き、index.html が生成されていることを確認する。

1-3. Cloudflare Pagesにアップロードしてデプロイ

• Cloudflareのダッシュボードの左メニューの Compute → Workers & Pages をクリック
• 右上にある Create application をクリック
• Upload your static files をクリック

• Drag in or click to upload a file or folder と書かれたエリアに、さっき作った index.html をドラッグ＆ドロップする

• Deploy をクリックする

• デプロイが終わるとプロジェクトページになる。上部に公開URLが出ている。URLの形式は、https://プロジェクト名.アカウントID.workers.dev など

• そのページに行ってみると、Hello World! と表示されているのが確認できる

なお、ファイルだけでなく、フォルダごとアップロードもできる（こちらが本来の使い方）。 画像ファイルもアップできるのでウェブサイトがまるっとホスティングできる。

サイトを更新するには:

• プロジェクトページの右上の New deployment ボタンをクリック
• アップロードのページが開くのでまたそこにドラッグ＆ドロップ
• Deploy をクリックすれば完了

更新時の注意:

• これまでのファイルは消えて、新たにアップロードしたものが入る
• 過去のものにロールバックはできる（プロジェクトページのタブ Deployments をクリック）

2. Claude Code でWebアプリを作成してCloudflareでサクッと公開する

1-2 と同じ要領で Claude Code を起動し、簡単なWebアプリを作ってみる。今度は index.html を上書きする形で依頼する。

プロンプト例:

HTML+JavaScriptでポモドーロタイマーを作って！ 1つのファイルにしてindex.htmlに上書きして。

複利計算機をHTML+JavaScriptで作って！ 構成はHTMLファイル(index.html)が1つ。

完成した index.html を「1-3. Cloudflare Pagesにアップロードしてデプロイ」の手順でデプロイして、公開URLを確認する。

3. 次のステップ

このハンズオンでは、静的ファイルを手動でアップロードしてデプロイする方法を学んだ。さらに進みたい場合は以下を参考に。

• Claude CodeでWebアプリを作ってWranglerでCloudflareに公開する — コマンドラインからデプロイする方法を学ぶ。
• GitHub初心者ガイド — コードをGitHubで管理する方法を学ぶ。バージョン管理の基本から始めたい人向け。
• Claude CodeでWebアプリを作ってGitHub ActionsでCloudflareに公開する — GitHubと連携した本格的なデプロイフローにステップアップ。

2026-05-04 (last updated: 2026-05-06)　タツヲ (yto)