Claude Code オフ会 ワークキット vol.2

自分のウェブサイトを
世界に公開しよう

HTMLを書いたことがなくても大丈夫。Claude Code に話しかけるだけで、自分のテーマのページを作って、Cloudflare Pages に置いて、.pages.dev のURLで誰でも見られるところまで一気に進めます。

このワークキットでできること

4つだけ準備すれば本編は止まりません

公開(ワーク②)に進むため、デスクトップ版 Claude アプリ、作業フォルダ、Cloudflare アカウント、wrangler コマンドの4つを揃えます。コマンドのインストールも Claude Code に丸ごと頼んでOK。

PREP 1

Claude アプリを起動する

Launchpad または Spotlight 検索(command + スペース)で「Claude」と入力して起動します。初回はログインが必要な場合あり。チャット入力欄が表示されれば準備完了。

PREP 2

作業フォルダを作る

デスクトップの何もない場所で右クリック →「新規フォルダ」→ 名前を mysite に。今日作るファイルはすべてここに入れます。Claude アプリ側で、このフォルダを参照先として開きなおしてください。

PREP 3

Cloudflare アカウントを作る

ブラウザで dash.cloudflare.com/sign-up を開き、メールアドレスとパスワードでアカウント作成。メール認証まで済ませればOK。クレジットカード登録は不要です。

PREP 4

Node.js と wrangler を入れる

公開作業に使う wrangler コマンドを入れます。Claude Code に下のプロンプトを渡せば、Node.js のインストールから一気通貫で済みます。

!
PREP 4 ・ Claude Code 一括お任せ
Node.js と wrangler のインストールを丸ごと頼む
ターミナルを開いて長いコマンドを貼り付ける作業は、全部 Claude Code に任せます。下のプロンプトをそのままコピーして送ってください。
Claude に入力する文章
この Mac に Node.js と Cloudflare の wrangler コマンドをインストールしてください。 手順: 1. まず node -v を実行して、Node.js が入っているか確認 2. 入っていなかったら、Homebrew を使って Node.js をインストール ・Homebrew 自体が入っていない場合は、Homebrew の公式インストール手順から先に進めてください 3. Node.js が入ったら npm install -g wrangler で wrangler をグローバルインストール 4. 最後に wrangler --version を実行して、バージョンが表示されることを確認 各コマンドを実行する前に「これから○○を実行します」と一言伝えてください。 途中で Mac のパスワード(sudo パスワード)を求められたら、私に教えてください。私が手元で入力します。
fallback:手動インストール派の人へ Homebrew を入れたくない場合は、nodejs.org から macOS 版 .pkg をダウンロードしてダブルクリックでインストール。その後ターミナルで npm install -g wrangler を実行すればOKです。
つまずきポイント:Cloudflare のメール認証メールが届かない場合は、迷惑メールフォルダを確認してください。無料プラン(Free)のままで本キットの全機能が足ります。「Pro」や「Business」を選ぶ必要はありません。

自分のテーマのページをローカルで作る

いきなり世界に公開する前に、まず自分のパソコンの中だけで動くページを完成させます。ここでテーマを選び、対話で見た目を育てるところまで。個人情報を載せないというルールだけ最初に守れば、あとは自由に遊んでOKです。

テーマを決めて、6ステップで完成です。

1
STEP 1
テーマを選ぶ
最初に決めるのは「何のページを作るか」だけ。下の5つから選んでも、自分で考えてもOK。決まらなかったら一番ピンとくるものでさっと進めましょう。あとから変えられます。
趣味の発信 音楽練習の記録 グルメ食レポ 推し紹介 旅の記録
2
STEP 2
Claude Code にページを作ってもらう
下のプロンプトの [テーマ] を、Step 1 で決めたテーマに書き換えてから送ります。個人情報を書かせないルールもプロンプトの中にあらかじめ仕込んであるので、Claude Code が暴走しにくい設計です。
Claude に入力する文章([テーマ] は自分で差し替え)
HTML ファイル1つで「[テーマ]」をテーマにした自己紹介ページを作ってください。 仕様: - ファイル名は index.html - CSS と JS はすべて