はじめに｜まず、私のやらかし告白から
まず最初に、私がやらかした大きな勘違いを告白させてください。
「Cloudflareでブログを作るには、Claude Codeを有料プランにしないといけない！」
そう思い込んでいたのです。実はClaude Proプランは、すでに Claudeのチャット（claude.ai）を使うためのもの。 Claude Codeを使うために別途お金がかかると思っていたのですが……
なんと！すでにProプランに入っていれば、Claude Codeも使えるのです！
「え、じゃあ私がずっと悩んでいたのは何だったの……」
と思った方、大丈夫です。私も同じでした（笑）
というわけで今回は、私の実体験をもとに Claude Code × Cloudflare Pagesでブログを開設する手順を 初心者目線でやさしく解説していきます！
- ・ Claude Code と Cloudflare Pages が何かわかる
- ・ 費用と所要時間の目安がわかる
- ・ STEPごとの手順がわかる（コピペするだけでOK！）
- ・ よくあるエラーの解決方法がわかる
そもそも Claude Code・Cloudflare Pages って何？
Claude Code とは？
Claude Code（クロードコード）とは、Anthropic（アンソロピック）という会社が作った AIアシスタント「Claude」をパソコン上で操作するツールです。
チャット感覚で日本語で話しかけると、AIが自動でファイルを作ったり、 インターネットに公開したりしてくれます。 プログラミングの知識がなくても使えるのが最大の魅力です。
Cloudflare Pages とは？
Cloudflare Pages（クラウドフレアページズ）は、 ウェブサイトを無料で公開できるサービスです。 世界中に高速なサーバーを持っており、アクセスが速くて安定しています。 しかも基本機能は完全無料！ブログ初心者に最適なサービスです。
この方法でかかる費用
| サービス | 費用 | 備考 |
|---|---|---|
| Claude Pro | 月額 約3,000円 | すでに契約中の方はそのままOK！ |
| Cloudflareアカウント | 完全無料 | 登録するだけ |
| Node.js | 無料 | パソコンにインストールするツール |
| 独自ドメイン | 年間1,500円〜 | 任意。なくてもOK（無料URLで公開可能） |
最低限必要なのは Claude Pro の月3,000円だけです。 独自ドメイン（〇〇.com のような自分だけのURL）は最初は不要です。 まず無料URLで公開して、気に入ったら後から追加すればOKです！
所要時間の目安
初めての方でも、本記事を見ながら進めれば2〜3時間で公開まで完了できます！ コーヒーでも飲みながら、ゆっくり進めましょう。
まずパソコンの「ターミナル」（黒い画面のやつです）を開いてください。
Macの方は「Launchpad」→「その他」→「ターミナル」で開けます。 Windowsの方は「スタートメニュー」→「cmd」で検索してください。
開いたら、以下を入力して Enter を押してください。
node -v
v20.11.0 のような数字が表示されればOKです！
何も表示されない場合は Node.js がインストールされていません。
nodejs.org にアクセスして「LTS版」をダウンロード・インストールしてください。
「LTS」とは長期サポート版のこと。安定していて初心者に最適です。
インストール後、ターミナルを一度閉じて再度開いてから node -v を試してください。
Node.jsの確認ができたら、次にClaude Codeをインストールします。
npm install -g @anthropic-ai/claude-code
少し待つとインストール完了です。大丈夫です、難しくありません！
cloudflare.com にアクセスして、Googleアカウントでログインするのが一番簡単です。
ログイン後、「どのように活用しますか？」などいくつか質問画面が出てきますが、 どれを選んでも機能は変わりません。 自分に近いものを選んでサクサク進めてOKです！
APIトークンの取得
APIトークン（APIとくん）とは、Claude CodeがCloudflareを操作するための「鍵」です。 この鍵があることで、AIが自動でサイトをアップロードしてくれるようになります。
- 以下のURLに直接アクセスします。
https://dash.cloudflare.com/profile/api-tokens - 「トークンを作成する」をクリック
- 「Cloudflare Workersを編集する」の「テンプレートを使用する」をクリック
- 画面を下にスクロールして以下を設定します
・アカウントリソース → 自分のアカウント名を選択
・ゾーンリソース → 「全ゾーン」を選択 - 「概要に進む」→「トークンを作成する」をクリック
- 表示された長い文字列をコピーしてメモ帳に保存
※この画面は一度しか表示されません！必ず保存してください！
「アカウントリソース」の選択を忘れると、後でエラーになります。 必ず自分のアカウント名を選択してから次に進んでください。
ここで超重要な注意点があります。 必ずこの順番で行ってください。順番を変えると動かないことがあります。
① 新しいターミナルウィンドウを開く
Claude Codeを起動していない状態で、新しいターミナルを開いてください。
② APIトークンを設定する
以下を入力してください。取得したトークン の部分を、先ほど保存したトークンに書き換えてください。
export CLOUDFLARE_API_TOKEN=取得したトークン
③ 作業フォルダを作成してClaude Codeを起動する
mkdir my-blog
cd my-blog
claude
しばらくするとブラウザが自動で開き、ログイン画面が表示されます。 Claude ProのアカウントでログインすればOKです！ ログイン後、ターミナルがチャット画面になれば準備完了です。
焦っていたのか、APIトークンをターミナルではなくClaude Codeのチャット画面に
貼り付けてしまいました……。セキュリティリスクになるので、
すぐにCloudflareのダッシュボードでそのトークンを削除して、
新しいトークンを作り直しました。
トークンは必ずターミナルで設定してください。チャットには絶対に貼り付けないでください！
APIトークンは「家の鍵」と同じです。チャット画面に貼り付けると、
ログが残ってしまいセキュリティリスクになります。
必ずターミナルの export コマンドで設定してください。
いよいよ本番です！Claude Codeのチャット画面に日本語で話しかけるだけです。 プログラミングは一切不要。すごいですよね！
以下をコピーして、（） の部分を自分の情報に書き換えて貼り付けてください。
ビジネス用のブログサイトを作ってCloudflare Pagesに公開してください。
【サイト名】（例：コアラ先生の高配当株ブログ）
【キャッチコピー】（例：副業できない公務員でも大丈夫！高配当株で資産形成）
【自己紹介】（例：元公務員の経験をもとに投資情報を発信しています）
【ブログのテーマ】（例：公務員向け高配当株・資産形成）
デザイン条件：
・プロ仕様のデザイン
・スマホ対応
・SEO対策済み
・ブログ記事一覧ページあり
・HTMLファイルとしてCloudflare Pagesにデプロイ
送信すると、Claude Codeが自動でファイルを作ってCloudflareにアップロードまでやってくれます！ 終わるまでしばらく待ちましょう。
作業中に確認ダイアログが出てきたら？
作業中に「Do you want to proceed?」（進めてもいいですか？）という英語の確認が 何度も出てきますが、焦らなくて大丈夫です。
「2」を選ぶと作業がスムーズに進みます。慣れてきたら積極的に使いましょう。
Cloudflare上にプロジェクトがまだ存在しないために起こるエラーです。 慌てなくて大丈夫！Claude Codeのチャットに以下をそのまま貼り付けてください。
- 「Cloudflare Pagesに新しいプロジェクトを作成してからデプロイしてください」
これだけで自動解決します！
せっかくブログを作っても、Googleに認識されないと検索結果に出てきません。 Search Console（サーチコンソール）に登録することで、 Googleがあなたのブログを認識してくれるようになります。
- search.google.com/search-console にアクセス
- 「URLプレフィックス」に公開されたサイトのURLを入力して「続行」
- 確認方法として「HTMLファイル」を選択してファイルをダウンロード
- ダウンロードしたHTMLファイルをmy-blogフォルダに移動（ドラッグ＆ドロップでOK）
- Claude Codeのチャットに以下を入力：
「ファイルの移動が完了しました。デプロイを続けてください」 - デプロイ完了後、Search Consoleの「確認」ボタンをクリック
Macを使っている場合、macOSのセキュリティ制限でDownloadsフォルダへの
自動コピーができないことがあります。私もこれでハマりました！
解決策は簡単。FinaでDownloadsフォルダを開き、
確認ファイルをmy-blogフォルダに手動でドラッグ＆ドロップするだけです。
コマンドは不要です！
サイトマップ（sitemap.xml）とは、あなたのブログにどんなページがあるかを Googleに伝えるための「地図」のようなものです。 Claude Codeがすでに自動作成してくれているので、登録するだけでOKです！
- Search Consoleの左メニュー「サイトマップ」を開く
- 入力欄に
sitemap.xmlと入力して「送信」をクリック - 「成功しました」と表示されれば完了！
送信直後に「取得できませんでした」と表示されることがありますが、 所有権確認が済んでいれば問題ありません。 数時間〜1日待つと「成功しました」に変わります。慌てずに待ちましょう。
まとめ
お疲れ様でした！これでブログ開設の完了です。🎉
📋 今日やったことのまとめ
- ✅ Node.jsとClaude Codeをインストール
- ✅ Cloudflareのアカウント作成＆APIトークン取得
- ✅ Claude Codeでブログを自動生成＆デプロイ
- ✅ Google Search Consoleに登録
- ✅ サイトマップを登録
振り返ると、私が最初につまづいたのは 「有料プランにしないといけない」という勘違いでした。 でも実際は月3,000円のClaude Proだけでできてしまいます。
あとは細かい失敗もいくつかありましたが （トークンをチャットに貼り付けてしまった事件、 macOSのファイルコピー権限エラーなど）、 全部解決できました！
同じところで詰まったとき、この記事が少しでもお役に立てたら嬉しいです。
一緒にゆっくり、でも確実に進んでいきましょう！🐨
ブログを作ったら次はSEO対策！
高配当株ブログを始めるなら → 入門記事を読む