kouno.logのシステム構成
kouno.logのシステム構成
このサイトの技術スタックについてまとめます。
技術スタック
- フレームワーク: Astro
- ホスティング: Cloudflare Pages
- パッケージマネージャー: pnpm
コンテンツ管理
Astro の Content Collections を使用しています。
Memos
技術メモ用。Markdown で記述します。
src/content/memos/
├── system-architecture.md # この記事
└── ...News
お知らせ用。同じく Markdown です。
src/content/news/
├── hello-world.md
└── ...External
外部記事（note, はてなブログ, Docswell）を JSON で管理しています。 GitHub Actions で毎日 RSS を取得して自動更新されます。
src/content/external/
├── 2026-01-10-note-xxx.json
└── ...OG画像の動的生成
memos と news の記事ページでは、OG画像を動的に生成しています。
使用ライブラリ
- Satori: HTML/CSS から SVG を生成
- BudouX: 日本語の改行位置を最適化
- @resvg/resvg-wasm: SVG から PNG に変換
仕組み
- ビルド時に
/og/memos/[id].pngと/og/news/[id].pngが静的に生成される - 各記事ページの
<meta property="og:image">でこの画像を参照 - タイトルは BudouX で日本語の改行位置を自動調整
デザイン
- 1200x630 サイズ（OGP 推奨サイズ）
- オフホワイト背景にタイトルを中央配置
- 左下にアイコン、右下にサイト名
自動デプロイ
- main ブランチへの push で Cloudflare Pages に自動デプロイ
- 毎日 GitHub Actions で外部記事を自動取得