Cloudflare Workers で静的ブログを立ち上げる

このブログには管理画面もビルドツールもありません。記事は 1本 = 1つの HTML ファイルとして public/posts/ に置かれ、 配信されるものがそのままリポジトリに入っています。

仕組み

役割分担はシンプルです。Git がデータベース、 Claude が編集部 兼 管理画面、 Cloudflare がホスティング。 原稿と画像を渡すと、Claude が記事の HTML を書き、画像を public/images/ に置き、トップの一覧を更新して push します。

公開までの流れ

main ブランチへの push が本番デプロイのトリガーです。 ブランチを切って push すればプレビュー URL が自動発行され、本番に触らずに確認できます。

public/
  index.html          # トップ = 記事一覧
  style.css           # 共有スタイル（記事はここに寄せる）
  posts/<slug>.html   # 記事本体（このファイルがテンプレート）
  images/             # 記事画像

この記事はテンプレートを兼ねる

新しい記事はこの HTML の構造をそのまま踏襲します。見た目は共有 CSS に寄せ、 記事ごとに独自スタイルは足しません。画像を含む記事では、上部コメントの article__hero を有効にするか、本文中に <figure> を置きます。

画像プレースホルダ