SEOとか諸々考えるならnoteとかに記事を書いてるほうがいいんだろうけど、独自ドメインも持ってるし、今は便利なサービスもAIもどんどん出てくるのでサクッと使ってみたい技術を使ってブログを構築するのがいいだろう。と思い立ちAstroでSSGするかぁ。となった。

コード自体はGitHubにPublicな状態で設置したのでなにか気になるものがあればご参考に。 こちらはBlog側で、記事作成等のAdmin機能は別リポジトリとなっております。 https://github.com/mogeta/muzigen.net_v2

技術選定

• Astro 5.14.6
  • 前はAngularとScully を利用していたが色々と厳しさが出てきた
• Firebase Hosting
  • デプロイ先
• Firebase Firestore
  • 記事保存
• Firebase Storage
  • 記事作成画面からの画像保存等に使用
• Tailwind
  • おなじみのCSS周り
• GitHub Action
  • デプロイ担当

やってること

デプロイ時にFirebaseから記事データを取得。 コードでいうとこの辺。 https://github.com/mogeta/muzigen.net_v2/blob/main/src/pages/blog/%5Bid%5D.astro

最初はmarkedを利用していたが、流石にこの辺もモダンなものに変換するか。ということで、次にremarkに移行。codeハイライト等を行っていたが、色々調査した結果、Astro本体が持つパース機能をそのまま流用できるということをAIから指摘され、そちらに移行した（昔のバージョンでは不可だったような気がした）

それがこの辺

//プロセッサーの取得
	const processor = await createMarkdownProcessor({
		syntaxHighlight: {
			type: 'shiki',
			excludeLangs: ['mermaid'],
		},
		rehypePlugins: [rehypeMermaid],
	});

//レンダリング処理
await processor.render(data.content)).code

AIに書かせた構造図等

graph LR
      subgraph "フロントエンド"
          A1[Astro 5.x]
          A2[React 19.x]
          A3[TypeScript strict]
          A4[Tailwind CSS v4]
      end

      subgraph "コンテンツ"
          B1[Astro Content Collections]
          B2[remark/rehype]
          B3[Shiki]
          B4[Mermaid]
      end

      subgraph "バックエンド"
          C1[Firebase Admin SDK]
          C2[Firebase Client SDK]
          C3[Firestore]
      end

      subgraph "Web3"
          D1[Wagmi]
          D2[RainbowKit]
          D3[viem]
      end

      subgraph "ビルド&ツール"
          E1[Vite]
          E2[pnpm]
          E3[PartyTown]
      end

      A1 --> B1
      A1 --> C1
      A2 --> D1
      A2 --> D2
      B1 --> B2
      B2 --> B3
      B2 --> B4
      C2 --> C3
      D1 --> D3

まとめ

Blog用途であればこんなもんでしょ。ってのができたので引き続きリファクタリングとレイアウト改善に着手予定。　WordPressとか使うよりかは楽。