静的サイト試作 blog-sappo

2023年4月、blog-sappo で静的ブログサイトを試作した。地域・トピック特化の軽量ブログを作りたくて、ryus.dev 本体とは別に手を動かしてみた回。

最初は「Markdown ベースで軽く」くらいの気持ちだったけど、結局 Astro 2.x + microCMS の構成に落ち着いた。記事本文を自分で書くより、microCMS 側に入れて引っ張ってくる方が運用が楽そうだったので。

環境

• Astro 2.1
• microCMS（microcms-js-sdk）
• Bootstrap 5 ベースの配布テンプレートを流用
• astro-seo + @astrojs/sitemap
• 画像は @astrojs/image + sharp

やったこと

• src/pages/index.astro で記事一覧、articles/[id].astro で詳細
• src/lib/microcms.ts で microCMS からフェッチ
• src/lib/pagination.ts でページング
• ArticleItem / LeftSideBar / RightSideBar / Pagination をコンポーネント分割

見た目はゼロから組まず、Bootstrap のブログ系テンプレート（CSS と font 一式）をそのまま public/ と src/styles/ に置いて流用した。スタイルを自分で詰めるより、まずは形になっているものを動かしたかった。コミットも init → 名前変更 → SEO追加 → スタイル適用 の4つだけで、わりと一気にやった。

学び

microCMS から引いて Astro で静的に吐く、という流れは小さいメディアサイトにはかなり向いてそうだった。テンプレート流用は早いけど、CSS が大量に乗ってくるので、本番にするなら結局自分のスタイルに置き換えることになりそう。

おわり

これ自体は本番投入しなかったけど、Astro でコンテンツサイトを組む練習台になった。のちの Astro 本番移行や、自前の静的サイトジェネレータを書く流れの、わりと手前にある試作。