ブログを Astro + Cloudflare Pages で始める


Parlourite Notes を立ち上げるにあたって最初にやったのは、テンプレートに何かを足すことではなく、削ることだった。Astro の公式ブログスターターは親切だ。サンプル記事が 5 本、プレースホルダ画像が 6 枚、SNS リンクが 4 つ、Markdown スタイルガイド、MDX のデモ。全部揃っている。だからこそ全部削った。

なぜ Astro 7 なのか

このブログには JavaScript がほとんど要らない。記事を書いて、静的に配信して、必要なら i18n で切り替える。それだけだ。Astro はまさにその「必要ない JavaScript は送らない」思想で設計されている。Content Collections(v5 以降は Content Layer API)でフロントマターの型を Zod で縛れるのも大きい。lang: z.enum(['ja', 'en', 'zh']) と書けば、言語指定を忘れた記事はビルド時に落ちる。手作業のチェックは信用しない。

v7 を選んだのは、i18n ルーティング(defaultLocale, prefixDefaultLocale, redirectToDefaultLocale, fallback)が config だけで完結するから。src/pages/[lang]/ に切ればあとは Astro が面倒を見る。

なぜ Cloudflare Pages なのか

本体アプリ(Parlourite)は Cloudflare Workers 上で動いている。Pages と Workers はエコシステムが同じで、DNS もダッシュボードも一元化できる。ブログのために別のホスティングを増やす理由がない。GitHub と繋げば push で自動デプロイ、プレビュー URL も PR ごとに生えてくる。無料枠で足りる。

Champagne Silk というパレット

配色は Champagne Silk と名付けた。ベースは温かい紙のような #F5EFE6、インクは深く沈んだ #2B2A28、アクセントはくすんだ金 #B89968。派手な色は使わない。技術ブログはコードのシンタックスハイライトで既に色を使うので、UI が主張すると読みにくくなる。

カテゴリ別のアクセント色(gem palette)は別途用意してある。sapphire、emerald、ruby など、記事のカテゴリごとに小さな色片を差し込む予定。まだ運用していない。EDITORIAL.md に定義だけある。

Marcellus wordmark と self-host

サイトタイトル「Parlourite Notes」だけは Marcellus という書体で表示している。全体は Atkinson Hyperlegible。wordmark の一箇所だけ書体を変えると、視覚的な錨(アンカー)になる。CDN からは読まない。.woff2src/assets/fonts/ に置いて Astro Fonts API で配信している。Google Fonts の CDN に依存すると、その時々のプライバシー配慮やレート制限に振り回される。ローカルに置けば済む。

Material Symbols も同じ理由で self-host した。アイコンは今のところ使っていないが、使う時が来ても外部依存を増やさずに済む。

削減の原則

SPEC.md §0.1 に「追加より削減」と書いた。ブログを長く続けるコツは、書きたくなる仕掛けを増やすことではなく、書きたくなくなる摩擦を減らすことだ。テンプレートに残っていた「Author」「Reading Time」「Related Posts」の類は全部消した。必要になったら足せばいい。今は要らない。

Footer からも SNS リンクを消した。Copyright だけ残した。それで十分だ。

次にやること

  • カテゴリ別 gem palette の実運用(記事一覧に色片を差し込む)
  • OG 画像の自動生成(現状は静的画像のみ)
  • 検索機能(Pagefind を検討中)
  • 本体アプリとの Marcellus 同期確認

急がない。書きながら決める。