このブログを Astro + Cloudflare Workers で作った話

個人開発

技術記事を書く場所として Zenn や note は手軽で優秀だ。それでも、自分のドメイン・自分のデザイン・自分の配信のされ方でブログを持ちたくなったので、プラットフォームから独立して一から組んでみた。この記事ではその全体像を書く。

方針

最初に決めた方針はシンプルで、次の3つだ。

  • サーバーと DB を持たない(運用対象を最小化する)
  • ランニングコストをほぼゼロにする
  • 書くのは Markdown、公開は git push だけ

物理サーバーを自前で運用すること自体が目的ではない。あくまで「プラットフォームからの独立」がゴールなので、静的サイト + Git 連携デプロイに寄せた。

選んだスタック

レイヤー 採用
フレームワーク Astro
ホスティング Cloudflare Workers(静的アセット)
ソース管理 GitHub
全文検索 Pagefind
RSS @astrojs/rss

Astro を選んだ理由は、デフォルトで JavaScript をほぼ出力しない静的サイトが作れて、なおかつ必要な箇所だけ islands でインタラクティブにできるからだ。読み物であるブログにとって表示速度は正義なので、この特性は都合がよかった。

書いて公開するまでの流れ

記事は src/content/blog/ に Markdown を置くだけでよい。frontmatter は Zod スキーマで型チェックされるので、日付やタグの書き間違いはビルド時に弾かれる。

sh
# ローカルで確認
pnpm dev

# 本番相当のビルド
pnpm build

あとはブランチを切って push し、Pull Request を作れば Cloudflare がプレビュー URL を用意してくれる。内容を確認して main にマージすると本番へ反映される。

これから

この構成のいいところは、あとから必要な機能を足していけることだ。実際、このブログも最初は素の Markdown だけで始めて、そこに検索・RSS・型付きのコンテンツ管理を少しずつ載せていった。次の記事からは、その一つひとつをどう組み込んだのかを書いていく。

ゆべしま
フロントエンドエンジニア。型と開発体験の話が好き。週末は個人開発とコーヒー。