このブログの仕組みは、3つの役割分担で考えると分かりやすいです。
3つの役割
| 役割 | コンポーネント | やること |
|---|---|---|
| 原稿 | GitHub Issues / Discussions | 記事を書く場所(CMS の入力画面の代わり) |
| 工場 | GitHub Actions + Node.js | 公開ラベルの記事を集めて、Astro 用の Markdown を生成 |
| 店頭 | Astro + GitHub Pages | 一覧と個別ページを静的生成して公開 |
記事は「1記事 = 1 Issue/Discussion」
- 記事本文の先頭に YAML frontmatter(
slug/title/publishedAtなど)を書きます。 - 公開状態はラベル
status:publishedで管理します。 - GitHub Actions のスクリプトが
status:publishedのものだけを取得し、src/content/posts/{slug}.mdを再生成します。
変換スクリプトの流れ
- GitHub API で
status:publishedラベルの記事を取得(Issues は REST、Discussions は GraphQL)。 gray-matterで frontmatter と本文を解析。src/content/posts/を一度クリアしてから、記事ごとの Markdown を書き出し。astro buildで一覧・個別ページを生成。
画像の扱い
Issue / Discussion の本文に画像をドラッグ&ドロップで貼ると、GitHub が絶対 URL に変換します。このテンプレートでは URL をそのまま使うため、画像のダウンロード処理は不要です。シンプルで壊れにくい設計です。