最近のAstroブログ改良メモ（Cloudflare Pagesハイブリッド化など）

こんにちは、つかびー(@tsukaby0)です。

2025/12現在、このブログはAstroで構築されています。AstroはWordpressなどと違って自分でthemeを探してインストールするものではないので、自分で見た目を整備する必要があります。

今回の記事では直近2,3日でこのAstroブログに入れた改良をまとめました。

Cloudflare Pages(Workers)向けハイブリッドレンダリング

• Astroはデフォルトではビルド時にHTML化されて、staticなサイトになります。 その方が高速ですが、ビルドが長いと言う問題があったので、一部をオンデマンドレンダリングに変更しました。 初回のアクセスは遅いですが、PRD環境ではCDNによるキャッシュがあるので大丈夫なはずです。
• タグ/カテゴリのルートをオンデマンドレンダリングに改良し、オンデマンドでの再計算を可能にしました。

情報設計・ナビゲーションの強化

• 記事サイドバーにカテゴリとタグを表示しました。Wordpressではある程度自動でやってくれるので、Astroは自由度が高い分自分で作らなくてはいけなくて少しもどかしいですね。
• カテゴリ体系を再編し全記事のカテゴリ・タグを整理しました。生成AIにやってもらいました。こう言う系の作業は得意ですね。
• ヘッダーのナビゲーションを中央配置に変更し、モバイルではSNSアイコンを非表示にすることでファーストビューのシンプルさと可読性を確保しました。 微妙に中央配置になっていなかったり、モバイルでは見づらいなどがあったので改善しました。

リーディング体験とUIのブラッシュアップ

• ブログカードのデザイン、タグ/インデックスのスタイルを統一し、一覧ページでもビジュアルの統一感を向上。 この辺りは多いに他のサイトを参考にさせていただきました。私はデザインは疎いですが、他のサイトはよく考えられて作られているなと思いました。
• コードブロックとインラインコードのスタイルを改善し、技術記事での読みやすさを向上しました。
• 記事本文コンテナや記事詳細レイアウトの余白を見直し、サイドコンテンツと本文のベースラインを揃えて視線移動を滑らかにしました。
• ベースのフォントサイズ調整、UL/LIのフォントサイズ調整、Table of Contentsのインデント調整など、細かい可読性チューニングを実施しました。

執筆ルールの整理

• すべてのブログ見出しをh3以上に揃えるルールを導入し、MDX lintで検証。記事追加時の統一感と自動チェックの仕組みを整備しました。 linterにはremark+カスタムルールを使いました。別にh3とか揃ってなくても大した問題ではないですが。

終わり

AIの台頭もあったり一時期のサボりもあったりして、このサイトは全盛期よりアクセス数は1/3になっています。

ただ、一番の目的は自分自身のアウトプット、成長の場にすることです。正しい情報を伝えていきたいみたいな思いありますが、一旦それは横に置いて、自分の成長のために地道に執筆や改良を続けていきたいと思います。