CloudflareにHTMLファイルをアップロードしてWebアプリとして公開する
Cloudflare PagesでHTML・CSS・JavaScriptなどの静的ファイルをそのままアップロードして簡易デプロイ（本番環境への公開・反映）する。
注意: Cloudflare Pages は現在移行期にあり、画面上の用語や公開URLの形式が本文と異なる場合があります。Workers と表示されたり、
workers.devのURLが発行されたりしても、実装や公開自体は通常どおり行えます。Cloudflare側の情報が明確になり次第、この文書は書き換える予定です。
1. Cloudflare PagesにWebページをサクッと公開する
1-1. Cloudflareアカウントを作る
- Cloudflareのサイトにアクセスして 無料で始める をクリック、または右上の ログイン → Sign up
- Googleアカウントがあればそれでサインアップすると楽
1-2. アップするファイルを準備する
- Finderでデスクトップに作業用フォルダ（例えば "cf"）を作成する。
- テキストエディット（TextEdit）を開く
cmd + spaceでSpotlightを開き、"textedit" と入力して起動
- テキストエディット メニュー → 設定 → 標準テキスト を選択する（RTF形式を避けるための設定。一度やれば以降不要）
- 新規書類 を開き、下記を貼り付ける
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
cmd + sで保存。ファイル名をindex.html、場所を先ほど作った "cf" フォルダにして保存する
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アプリを作成してサクッと公開する
必要なもの: Claude Desktop アプリ, Claude の有料プラン（Claude Pro でOK）
デスクトップ版Claudeアプリを起動。
Code（Claude Code）を選択 → New session をクリック → 作業ディレクトリを指定（~/Desktop/cf）
あとはプロンプトを入力して、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-05) タツヲ (yto)