GitHub Issues CMS のアーキテクチャ

GitHub Issues CMS のアーキテクチャ An architecture diagram generated by Archify. ブラウザ · SSR / SPA · Architecture component ブラウザ SSR / SPA TanStack Router · ファイルベースルート · TanStack Start アプリ（SSR / プリレンダ） TanStack Router ファイルベースルート UI コンポーネント · PostList / MarkdownBody · TanStack Start アプリ（SSR / プリレンダ） UI コンポーネント PostList / MarkdownBody Server Functions · getPosts / getPostBySlug · TanStack Start アプリ（SSR / プリレンダ） Server Functions getPosts / getPostBySlug Issue → Post 変換 · gray-matter · TanStack Start アプリ（SSR / プリレンダ） Issue → Post 変換 gray-matter GitHub クライアント · github.server.ts · Architecture component · トークンはサーバー限定 GitHub クライアント github.server.ts トークンはサーバー限定 GitHub REST API · api.github.com · Architecture component · GitHub GitHub REST API api.github.com GitHub Issues · status:published · Architecture component · GitHub GitHub Issues status:published GitHub Actions · build:static でプリレンダ · GitHub Pages 配信 · GitHub Actions GitHub Actions build:static でプリレンダ GitHub Pages · dist/client を配信 · GitHub Pages 配信 · GitHub GitHub Pages dist/client を配信 リクエスト loader Issue 取得 REST status:published 描画 frontmatter デプロイ ビルド時 TanStack Start アプリ（SSR / プリレンダ） GitHub Pages 配信 Legend Frontend Backend Cloud External

コンテンツ源

  • • GitHub Issues を CMS として利用
  • • status:published ラベルで公開を制御
  • • frontmatter で slug / tags / 日付を指定

アプリケーション

  • • TanStack Router の loader が Server Functions を呼ぶ
  • • gray-matter で Issue 本文を Post に変換
  • • react-markdown + remark-gfm で描画
  • • GitHub トークンは .server.ts に隔離

配信

  • • GitHub Actions が build:static で全ページをプリレンダ
  • • dist/client を GitHub Pages へ公開
  • • Issue の更新がデプロイをトリガー