このブログの裏側: AstroとSanityで作った投稿システム

このブログ、実は記事の中身だけでなく、サイトの仕組み自体も人間とAI(Claude)が一緒に作りました。今回はその裏側を、パスワードやIDなどの具体的な認証情報は伏せた上で簡単に紹介します。

全体の構成

サイトは大きく2つの部分に分かれています。公開用のサイトはAstroというフレームワークで静的なページとして生成し、Cloudflare Pagesという無料枠で使えるホスティングサービスに公開しています。一方、記事の中身はSanityというクラウド型CMSに入っていて、こちらも小規模な使い方なら無料で利用できます。記事を公開するたびにAstro側がSanityからデータを取得して静的なHTMLを作り直す、という仕組みです。

記事はどこからでも書ける

SanityにはStudioという管理画面が無料で付いており、ブラウザ上のリッチテキストエディタでMarkdownを覚えずに投稿できます。それに加えて、Sanity公式のMCP(AIエージェント向けの接続規格)を使うと、Claudeに「このテーマで記事を下書きして」と頼むだけで、Studioで人が書いたのと完全に同じ場所に記事を作れます。人間もAIも同じデータソースを触るだけなので、「どちらが書いたか」で仕組みが分かれることはありません。

公開したら自動でサイトに反映される

Astroはビルド時に記事を取得する静的サイトなので、本来は記事を公開しても自動ではサイトに反映されません。そこで、Sanity側で記事が作成・更新・削除されたときにWebhook(内部連携用の通知)を飛ばし、Cloudflare Pagesの自動ビルドをトリガーするようにしています。おかげで、記事を公開すると数十秒後にはサイトに反映される、という流れになっています。

広告の仕組み

サイトの収益化としてGoogle AdSenseを併用していますが、審査中など広告を出したくない時期は、発行者IDを空にするだけで広告スクリプト自体が出力されないように作ってあります。審査の進捗に合わせて環境変数を切り替えるだけで済むようにしています。

作ってみて

CMSと静的サイト生成、無料のホスティング、AIによる投稿を組み合わせると、サーバーの管理や常駐コストをほぼ意識せずに、個人でも手軽にブログを運営できるのを実感しました。この記事も、実はその仕組みを使ってAIが下書きしています。