Cloudflare
— HTML を世界に公開しよう
Node.js と wrangler をインストールし、Claude Code に作ってもらったサイトを wrangler pages deploy で一般公開します。
Claude Code が作った index.html を Cloudflare Pages で公開し、スマホからもアクセスできる URL を取得する
Cloudflare って何？
ウェブサイトを世界中に素早く届けるサービスです。「郵便局が世界中にあって、一番近い場所から届ける」イメージ。速い・安全・無料から始められます。
Cloudflare Pages は HTML ファイルをそのままアップするだけで公開できる機能です。サーバーを買う必要はなく、URL が自動で発行されます（例：mysite.pages.dev）。
Node.js って何？なぜ必要？
Node.js はパソコンで JavaScript を動かす「土台」です。wrangler（Cloudflare を操作するツール）を動かすために必要です。「エンジンを積む」イメージで、一度入れれば使い回せます。
| ツール | 役割 |
|---|---|
| Node.js | 土台・エンジン |
| npm | 道具を追加するしくみ（Node.js に付属） |
| wrangler | Cloudflare を操作するコマンドツール |
Node.js をインストールする
ブラウザで https://nodejs.org を開き、「LTS」版をダウンロードします（LTS ＝ 安定版。迷ったらこちら）。
ダウンロードしたインストーラを開いて「Next」を押し続けるだけで完了します。
インストール後、ターミナルで確認：
node -v npm -v
v22.x.x のような数字が出れば成功です。
wrangler をインストールする
ターミナルで以下を実行します。
npm install -g wrangler
インストール後にバージョン確認：
wrangler --version
Cloudflare にアクセスしてサインアップする
ブラウザで https://dash.cloudflare.com/sign-up を開きます。
メールアドレスとパスワードを入力する
メールアドレスとパスワードを入力して「Create Account」をクリックします。
メール認証を完了する
登録したメールに認証メールが届きます。本文のリンクをクリックして認証を完了します。
ダッシュボードが開いたら登録完了
wrangler login を実行する
ターミナルで以下を実行します。ブラウザが自動で開くので、「Allow」をクリックしてください。
wrangler login
ターミナルに Successfully logged in. と表示されれば完了です。
フォルダを作って Claude Code を起動する
ターミナルで新しいフォルダを作り、Claude Code を起動します。
mkdir my-site cd my-site claude
Claude Code に HTML を作ってもらう
Claude Code が起動したら、以下のように入力してください。
Claude Code が自動的に index.html を生成します。コードを 1 行も書かずに Web ページが完成します！
ブラウザで確認する
生成された index.html をダブルクリックして、ブラウザで見た目を確認しましょう。
wrangler pages deploy でデプロイする
my-site フォルダにいる状態でターミナルに入力します。
wrangler pages deploy .
プロジェクト名を聞かれたら好きな名前を入力（例：my-profile）して Enter。
✨ Deployment complete! 🌍 URL: https://my-profile.pages.dev
URL にアクセスして確認する
発行された 〇〇.pages.dev の URL をブラウザで開いてみましょう。スマホからでも同じ URL でアクセスできます！