技術知識ゼロ・費用ゼロ：30分で独自ドメインの個人ブログを作る（CF CMS 完全ガイド）

こんな経験、ありませんか？

プラットフォームで2年間書き続けてきたのに、一度の表示制限、一度のアカウント停止で、記事もフォロワーもあっという間に消えてしまった。

自分のブログを持とうと思って調べてみると、サーバーを借りて、環境を構築して、Nginx を設定して、HTTPS を入れて、毎日攻撃に備えて……。書き始める前に心が折れてしまう。

この記事は、そんなあなたのために書きました。

オープンソースの CF CMS を使って、Cloudflare 上に独自のトップレベルドメインを持つ個人ブログを作る方法を紹介します。今あなたが読んでいるこのサイトも、まさにこの方法で作りました。

最初にはっきり言っておきます。

• 技術知識ゼロ：コードは書けなくて大丈夫。やることはコピー、貼り付け、Enter だけ。それすら面倒なら、コマンドを AI エージェントに任せることもできます。
• 費用ゼロ：ドメイン代を除けば（安い TLD なら年に数ドル）、サイト、データベース、画像ストレージ、自動翻訳まで、すべて Cloudflare の無料枠で動きます。サーバーを借りる必要はありません。

準備はいいですか？　始めましょう。

まず結論：何が手に入るのか

• ✅ あなただけのトップレベルドメイン（例：yourdomain.com）
• ✅ HTTPS の自動化 + グローバル CDN で、大手サイトに負けない表示速度
• ✅ 中国語・英語・日本語・スペイン語・アラビア語の5言語。1本書けば、保存時に自動翻訳
• ✅ 8種類のテンプレート + ロゴ、favicon、テーマカラーをワンクリック生成
• ✅ 管理画面はランダムな秘密のパスの奥に。/admin に直接アクセスすると 404
• ✅ MCP インターフェースを標準搭載。AI エージェントに記事の投稿や設定変更を任せられる

用意するものは3つだけ：

• ドメイン（買い方はこのあと説明します）
• Cloudflare の無料アカウント
• ターミナルが使えるパソコン（macOS / Linux。Windows なら WSL がおすすめ）

図でひと目で：どこで動いているの？

ざっくり言うと：

• Pages：サイト本体。ページを描画する
• D1：データベース。記事、タグ、設定を保存
• R2：画像の保存先
• Workers AI：記事の保存時に、ほかの4言語へ翻訳してくれる

あなたが管理しなければならないサーバーは1台もありません。 パッチ当ても、スケールも、DDoS 対策も、すべて Cloudflare の仕事です。

全体の流れを1枚で：8ステップ

順調にいけば 30〜60分。本当に頭を使うのはステップ1の名前決めだけです。

ステップ1：ドメインを買う

ドメインはインターネット上の住所。そして、この構成で唯一お金がかかる部分です。

信頼できるレジストラならどこでも構いません。たとえば Spaceship、Cloudflare Registrar、Namecheap など。価格が明快で、更新料が良心的で、WHOIS プライバシー保護に対応しているところを選べば OK です。

ドメイン選びの3つのコツ：

1. 短く、覚えやすく、綴りやすく。 友だちに口頭で伝えられるなら、それは良いドメインです。
2. 初年度の価格だけでなく、更新料を確認する。 初年度は激安でも、2年目から何倍にもなる TLD があります。
3. .com にこだわらなくて大丈夫：.cc、.dev、.me も個人ブログにぴったりです。

ステップ2：ドメインを Cloudflare につなぐ

1. Cloudflare の公式サイトを開き、無料アカウントを作成します。
2. Add a site をクリックしてドメインを入力し、プランは Free を選びます。
3. Cloudflare からネームサーバーのアドレスが2つ表示されます。
4. ドメインを買ったレジストラの管理画面に戻り、ネームサーバーをその2つに変更します。
5. 数分〜数時間待って、Cloudflare に Active と表示されれば完了です。

ポイント：ドメインは、このあとデプロイに使うのと同じ Cloudflare アカウントに置くこと。 セットアップスクリプトは API トークンを使ってこのドメインを探します。

ステップ3：API トークンを作る（そのまま真似すれば OK）

場所：Cloudflare 右上のアイコン → My Profile → API Tokens → Create Token → Create Custom Token。

下の図のとおり、1つずつチェックを入れていきます。

• Account · Cloudflare Pages · Edit
• Account · D1 · Edit
• Account · Workers R2 Storage · Edit
• Account · Account Settings · Read
• Zone · Zone · Read（独自ドメインを使う場合）
• Zone · DNS · Edit（独自ドメインを使う場合）

注意点を2つ：

• Workers AI に追加の権限は不要です。 サイトの実行時は Pages の AI バインディングを使います。
• このトークンはセットアップスクリプト専用。執筆用のエージェントには渡さないでください。 作成時に一度しか表示されないので、すぐに保存しておきましょう。

ステップ4：R2 を有効にする

R2 は画像の置き場所です。事前にダッシュボードで手動で有効にする必要があります。 ここはスクリプトが代わりにクリックできません。

Cloudflare ダッシュボード左側の R2 を開き、有効化するだけです。

⚠️ 正直に言うと：アカウントによっては、R2 を有効にする前にカードか PayPal の登録が必要です。 でも慌てないで。登録しても課金されるわけではなく、無料枠（ストレージ 10 GB）の範囲内なら料金はかかりません。 個人ブログの画像で使い切ることはまずありません。

私も最初のデプロイでここでつまずきました。スクリプトが途中で 10042 を出して止まり、原因は R2 が未有効化だったこと。有効にして再実行したら、一発で通りました。

ステップ5：コードを手に入れる

CF CMS はオープンソースで、コードは GitHub にあります：github.com/jemkuo/cf-cms

どちらか一つ：

• おすすめ：GitHub で Fork をクリックして自分のアカウントにコピー。あとから手を加えやすくなります。
• または直接クローン：

git clone https://github.com/jemkuo/cf-cms.git
cd cf-cms

パソコンには Node.js 20 以降 を入れておいてください（公式サイトからインストーラーをダウンロードして、案内どおり進めるだけ）。

ステップ6：コマンド1つでデプロイ ⭐

ここがこの記事のいちばん大事なところです。まず、ステップ3のトークンを環境変数に入れます（ターミナルの中にだけ存在し、スクリプトが表示することはありません）。

export CLOUDFLARE_API_TOKEN=トークンを貼り付け

そして、コマンドは1つだけ：

npm install && ./scripts/setup.sh --project myblog --domain yourdomain.com

myblog は好きなプロジェクト名に、yourdomain.com はあなたのドメインに置き換えてください。

不安なら、まず --dry-run を付けてリハーサル。チェックするだけで、何も作成しません：

./scripts/setup.sh --project myblog --domain yourdomain.com --dry-run

まず「健康診断」をしてくれる

スクリプトは作業を始める前に事前チェックリストを表示します。トークン、アカウント、Pages、D1、R2、ドメインを1項目ずつ確認します。

• すべて ✓：D1 データベース、R2 バケット、Pages プロジェクト、各種シークレットを自動で作成し、サイトを公開します。
• ✗ がある：リソースは1つも作りません。 どのステップに問題があるか、ダッシュボードのどこを直すか、直したあとどのコマンドで再実行するかを、中国語と英語で教えてくれます。
• account id を自分で探す必要なし：トークンから見えるアカウントが1つだけなら、スクリプトが自動で入力します。

途中で失敗したら？　そのまま再実行

進捗はローカルの .cf-cms-setup.json に記録されます。再実行すると続きから進みます。 作成済みの D1、R2、Pages は再利用され、重複して作られることも、記事が消えることもありません。

ドメインに古いレコードがある？　まず確認してくれる

ドメインが以前ほかのサーバーを指していた場合、スクリプトは古い A / AAAA / CNAME レコードをまず一覧表示し、デフォルトでは削除しません。

置き換えて問題ないと確認できたら、--replace-dns を付けて再実行（またはプロンプトで y と回答）すると、Pages を指す CNAME に切り替えてくれます：

注意：切り替えたあとは、古いサーバーがこのドメインで提供していたサービスにはアクセスできなくなります。TXT などのほかのレコードは残ります。

完了すると

ターミナルの最後に Admin の URL が1行表示されます。こんな感じです：

Admin:      https://yourdomain.com/<ADMIN_SAFEPATH>/admin/

管理画面のパスワードはランダムに生成され、プロジェクトフォルダの .dev.vars に書き込まれます。画面には表示されません。

👉 Admin の URL と .dev.vars はセットで大切に保管してください。 これがあなたのブログの鍵です。

ドメインのステータスが pending でも焦らずに。証明書の発行と DNS の反映には、たいてい数分かかります。

ステップ7：隠し管理画面に入って、自分らしく

その Admin の URL を開いてパスワードを入力します：

なぜ隠すのか？ ほとんどのスキャナーは /admin や /wp-login を狙ってきます。CF CMS の管理画面はランダムなパスの奥にあるので、/admin に直接アクセスしても 404。ログインフォームすら見えません。

入ったら、まず2つだけやりましょう：

1. テンプレートを選ぶ：個人の技術ブログ（Dispatch、Signal）、ライフスタイル（Atelier、Hearth）、企業サイト（Practice、Civic）、テック企業（Launch、Orbit）、さらにオリジナルの Paper、Ink、Terminal。
2. ビジュアルキットをワンクリック生成：Generate visual kit を押すと、テンプレートに合ったロゴ、favicon、テーマカラーが自動で生成されます。気に入らなければ再生成するか、自分の画像に差し替えましょう。

ステップ8：記事を書けば、自動で5言語に

デプロイしたてのサイトにはサンプル記事がいくつか入っているので、まずは見た目を確認できます：

確認したら削除して、自分の記事を書きましょう：

• Markdown で執筆。見出し、リスト、コードブロック、画像に対応
• 画像はそのままアップロードすれば R2 に保存
• 保存時に翻訳にチェックを入れると、Workers AI が英語・日本語・スペイン語・アラビア語版を自動生成（アラビア語は自動で右から左のレイアウトに）
• 記事ごとに SEO を設定可能：キーワード、canonical、Open Graph のシェア画像

一度書けば、5つの言語の読者があなたを見つけられる。 大手プラットフォームでも、なかなかできないことです。

日々の運用：AI エージェントを編集者に

ブログの公開はスタートにすぎません。本当にラクなのは、日々の運用をほぼ AI に任せられることです。

1. ひとことで AI エージェントを接続

CF CMS には MCP インターフェース（あなたのドメインの /mcp）が組み込まれています。Cursor や Claude など MCP 対応のクライアントに、プロジェクトの README にある「ひとこと説明」を貼り付け、.dev.vars の ADMIN_API_TOKEN を設定すれば、エージェントは次のことができます：

• 記事の一覧表示、作成、編集、公開、削除
• タグ、カテゴリ、テンプレート、ロゴの管理
• 画像のアップロード

接続したら、こう話しかけるだけです：

「slug を edge-notes にした中国語の下書きを notes カテゴリに作って、ほかの言語にも翻訳して。」

安全設計：ADMIN_API_TOKEN で扱えるのはコンテンツだけ。デプロイはできず、Cloudflare アカウントにも触れません。 ステップ3の Cloudflare トークンをエージェントに渡さないのも、このためです。

2. シークレットは定期的にローテーション

パスワードやトークンが漏れたかも？　コマンド1つで差し替えられます：

npx wrangler pages secret put ADMIN_PASSWORD --project-name myblog

ADMIN_API_TOKEN や SESSION_SECRET も同じです。デプロイが終わったら、ステップ3の Cloudflare API トークンも削除またはローテーションして、次のデプロイ時に作り直せば OK です。

3. 無料枠を把握しておく

リソース	ブログでの役割	一般的な無料枠
Pages	サイトと Functions	月 500 ビルド、1日 10 万 Functions リクエスト
D1	記事、設定	5 GB、1日あたりの行の読み書き上限
R2	画像	ストレージ 10 GB、読み書き操作の回数に上限あり
Workers AI	保存時の翻訳	1日 10,000 Neurons

最新の数値は Cloudflare ダッシュボードで確認してください。個人ブログのアクセス量なら、まず上限には届きません。 翻訳はアクセスのたびではなく保存時にだけ実行され、Workers AI の枠は毎日リセットされます。

4. よくあるエラー早見表

表示される内容	対処法
✗ R2 is not enabled、エラー 10042	ダッシュボードで R2 を有効化（先に支払い方法の登録が必要な場合あり）してから再実行
トークンが無効（10000）または権限不足（9109、HTTP 403）	ステップ3のリストどおりに権限を追加し、もう一度 export してから再実行
ドメインがずっと pending	スクリプトが一覧表示した古い A / AAAA / CNAME を確認し、問題なければ --replace-dns を付けて再実行。DNS が正しくなってから証明書発行までさらに数分かかる
Pages のプロジェクト名が使用済み	別の --project 名にする
D1、R2、Pages がすでに存在する	そのまま再実行。同じ名前のリソースは再利用される
ネットワークエラー	接続を確認して再実行。完了済みのステップはスキップされる

覚えておくのはこれだけ：エラーが出たら、メッセージを読んで、直して、再実行。 どこを直して何を実行すればいいかは、スクリプトが教えてくれます。

「技術知識ゼロ」について、正直なところ

この流れの中で、ターミナルを開いてコマンドをいくつか打つのは事実です。

でも、それが何をしているか理解する必要はありません。 やることはこれだけ：

1. コマンドをコピー
2. ターミナルに貼り付け
3. Enter を押して、✗ が出ていないか確認

もっとラクな方法：この記事と README を AI エージェントに渡して、代わりに実行してもらう。 エージェントが止まるのは、ダッシュボードでのクリック（R2 の有効化など）か、あなたの確認（DNS の置き換えなど）が必要なときだけ。案内どおりに進めれば大丈夫です。

コストを計算してみる

項目	費用
ドメイン	年に数ドルから（TLD による）
サーバー	0（Cloudflare Pages）
データベース	0（D1 無料枠）
画像ストレージ	0（R2 無料枠）
5言語翻訳	0（Workers AI 無料枠）
HTTPS 証明書 + CDN	0
CMS ソフトウェア	0（オープンソース）

ドメイン以外、1円もかかりません。

最後に

プラットフォームは集客をくれるけれど、その土地はいつまでもプラットフォームのものです。

独立ブログこそ、あなたのデジタル資産：ドメインもコンテンツもあなたのもの。読者はあなたに直接たどり着けます。

今日、最初の一歩を踏み出しましょう：気に入ったドメインを選んで、この記事のとおりに一度やってみてください。

構築中に困ったことがあれば、気軽にコメントを。プロジェクトが役に立ったら、GitHub で CF CMS に ⭐ をもらえると嬉しいです。

次回は、AI エージェントに毎日このブログを運営してもらう方法について話します。