Features
Markdown + カスタムディレクティブ
remark-directive と rehype-components による拡張 Markdown。写真、GitHub 埋め込み、アドモニション等のリッチコンテンツを記事内に配置。
高速なページ表示
Astro の Islands Architecture により、必要な部分だけに JavaScript を読み込む。静的生成で高速なページロード。
Svelte インタラクティブコンポーネント
記事内のインタラクティブな要素を Svelte で実装。軽量で高パフォーマンスなコンポーネントを必要な箇所にだけ配置。
タグ・カテゴリ分類
技術カテゴリやタグによる記事の分類・フィルタリングで、関連コンテンツへの導線を提供。
Tech Stack
| Framework | Astro |
|---|---|
| Interactive | Svelte |
| Content | Markdown + remark-directive |
| Styling | Tailwind CSS |
| Deploy | Cloudflare Pages |
Design Decisions
Astro の Islands Architecture
ブログという基本的に静的なコンテンツに対して、Astro の部分ハイドレーション（Islands Architecture）を採用。ページの大部分は静的 HTML として配信し、インタラクティブな部分だけ JavaScript を読み込むことで、最小限のバンドルサイズを実現。
Svelte による軽量コンポーネント
インタラクティブな Islands には Svelte を選択。コンパイル時に最適化される Svelte の特性を活かし、ランタイムのオーバーヘッドを最小化。React (SubCutter, NextRep) とは異なるフレームワークの経験も示す。
remark/rehype プラグインによる拡張 Markdown
MDX ではなく remark-directive + rehype-components を採用。Markdown のシンプルさを維持しつつ、カスタムディレクティブ（:::photo、:::note 等）でリッチなコンテンツを実現。ビルド時にコンポーネントへ変換されるため、ランタイム JS はゼロ。