無料ではじめる
← 一覧に戻る

Claude Codeにプロンプトを1つ投げて運用費用（ホスティング費）無料のブログを作成する

  • 作ってみた
  • React Router
  • Cloudflare Workers
  • AIコーディング

「ブログを作りたいけど、サーバーを立てるのも記事を管理する仕組みを作るのも面倒」という人は多いと思います。今回は、その面倒な部分をまるごとAIに投げてみたらどうなるか試してみました。

やったことはシンプルです。

Claude Codeに次のプロンプトを1つ渡して、オートモード（確認なしで最後まで進めるモード）のまま放置しただけです。

Claude Code打ち込んだプロンプト

React Router v7（Framework Mode、Cloudflare Workers用テンプレート
npx create-react-router@latest --template remix-run/react-router-templates/cloudflare
ベース、SSR）で、presto.pw（headless CMS）と連携するブログサイトを作ってください。

presto.pw ドキュメント
https://presto.pw/docs/

デザインは design_handoff_tech_blog_article/README.md を読んでください。

渡したのはこの1プロンプトとあらかじめ用意しておいたデザインハンドオフ資料（ワイヤーフレームHTML + デザインシステムのCSS変数）だけです。

あとは何も指示していません。

戻ってきたら、ブログが1本できていた

30分程度放置して戻ってくると、sample-react-router-blog というディレクトリに、動く状態のReact Routerプロジェクトが出来上がっていました。

できたブログがこちら

記事の一覧ページ

image.png

記事の詳細ページ

image.png

ちゃんと本番運用を意識した作りになってます。

  • / — 記事一覧（ページネーション、?tag= での絞り込み対応）
  • /articles/:slug — 記事詳細（デザインハンドオフの「1b 左レール」案を実装）
  • /series / /series/:slug — シリーズ一覧・シリーズ内の記事一覧
  • /about — 固定ページ
  • /rss.xml — RSS 2.0 フィード

一覧・詳細・シリーズ・RSSと、ブログとして最低限欲しい機能がひととおり揃っています。CMS側には記事の本文とタグくらいしか渡していないのに、「シリーズ」という概念まで自前で設計してきたのは正直予想していませんでした。

presto.pwにはない概念を、CMSを拡張せずに作っていた

面白かったのが、CMS（presto.pw）側のデータモデルを一切変更せずに、アプリ側の実装だけで機能を拡張していた点です。

presto.pwの記事エントリには「シリーズ」や「読了時間」のようなフィールドはありません。あるのはタイトル・本文・タグ・投稿日時くらいです。にもかかわらず、app/lib/article.ts を見ると、こんな設計になっていました。

  • タグに series:rust-concurrency のような特殊な値を仕込み、それを「シリーズ所属」として扱う
  • シリーズ名はスラッグから rust-concurrency → Rust Concurrency のように自動生成
  • 読了時間はCMSに保存せず、本文HTMLから毎回推定（CJK文字数 ÷ 500 + 英単語数 ÷ 200）

CMS本体に手を入れず、既存の「タグ」という汎用フィールドを規約で使い倒すことで機能を足す発想です。ヘッドレスCMSとフロント側の役割分担として、これは人間が設計してもそう悪くない判断だと思います。

サーバー側でHTMLを加工して、デザイン通りに仕上げている

デザインハンドオフには「見出しのページ内目次をサイドバーに出す」「コードブロックにコピーボタンをつける」「画像は四隅にレジストレーションマーク付きの枠で囲む」といった、地味に手間のかかる指定が並んでいました。

これらもクライアントサイドのJSに頼らず、Workerの中でサーバーサイドにHTML文字列を書き換える形で実装されていました。

// app/lib/article.ts より
export function addHeadingIdsAndExtractToc(html: string) { /* h2/h3にidを振ってTOCを抽出 */ }
export function addCodeCopyButtons(html: string) { /* <pre>にコピーボタンを挿入 */ }
export function wrapImagesAsFigures(html: string) { /* <img>を枠付きfigureに変換 */ }

CMSから返ってくる本文HTMLを、SSRのタイミングでこの3つの関数に順番に通すことで、目次生成もコードコピーも画像の枠線も、追加のクライアントJSなしで実現しています。デザインシステムのCSS変数（色・余白・フォント）もハードコードせず、ハンドオフの styles.css をそのままコピーして使っていました。

presto.pw側の呼び出しは、ちゃんと「読み取り専用・サーバーのみ」

CMS連携部分（app/lib/presto.server.ts）も見てみましたが、ここは基本に忠実でした。

  • ファイル名が .server.ts になっており、クライアントバンドルに含まれない
  • APIキーはWorkerの環境変数（本番は wrangler secret put、ローカルは .dev.vars）から読み、コードに埋め込んでいない
  • 記事取得のリクエストには cf: { cacheTtl: 60, cacheEverything: true } を指定し、Cache APIでpresto.pw側へのリクエスト数を抑える設計

presto.pwのContent APIがもともと読み取り専用の設計なので相性がいいというのもありますが、「読み取り専用のAPIキーを使い、サーバー側だけでアクセスする」という一番大事な部分を、特に指示していないのに守ってくれていたのは安心材料でした。

気になった点・自分でチェックが必要だった部分

もちろん、できたコードをそのまま無条件で信用したわけではありません。実際に手を動かしたのは次のあたりです。

  • presto.pwのダッシュボードで読み取り専用のAPIキーを発行し、.dev.vars に設定する作業（これはさすがに人間がやる必要があります）
  • npm install → npm run dev でローカル起動し、実際に記事一覧・詳細ページが表示されるか目視確認
  • 生成されたコードに秘密情報の埋め込みや、意図しない外部送信がないかの確認

「プロンプト1つで全自動」とはいえ、APIキーの発行と最終確認だけは人間の役目として残ります。ここを飛ばして本番デプロイまで自動化するのはさすがに怖いので、今回はあえてやっていません。

制作完了までの時間 —> 25分

こちらに制作開始と制作完了の時間をログから抽出したものがあります。

かかった時間は25分（ claude-sonnet-5使用 ）です。

$8.46   2026-09-10 15:22:10  2026-09-10 15:47:16

クロードコードは月額課金なので特に料金は意識しなくてもいいですが

ログから抽出した料金を見ると8.46ドルです

運用費用はいくらかかるのか？ —> ゼロ円

今回の構成、実はホスティング費用が発生しません。

  • フロントは Cloudflare Workers（無料枠）でSSR配信
  • CMSは presto.pw の無料プラン（サイト1つ・コンテンツセット1つまで）

このブログ記事自体、presto.pwの無料プランのコンテンツセット枠でぴったり収まる規模です。

「AIにプロンプトを投げて無料の範囲でホスティングまで完結するブログが手に入った」という状態です。

最後に

今回試してわかったのは、「デザインの意図（ハンドオフ資料）とAPIドキュメントのURLさえ渡せば、CMS連携込みのブログサイトの土台はAIに30程度で作らせられる」ということです。人間の仕事は、要件をプロンプトとデザイン資料にまとめることと、APIキーの発行のような「AIにはできない・させるべきではない」作業、そして最後に出てきたコードを読んで納得することに絞られていきます。

自分でCMSからブログを組んでみたい方は、まず presto.pwのドキュメント を覗いてみるところから始めてみてください。

無料プランでも今回のような構成は十分試せます。

自分のサイトでも、同じことができます。

無料プランで登録し、管理画面から記事を書き始めましょう。

無料ではじめる