AstroのブログをContent管理にする

AstroのContent Collectionsはマークダウンを型安全に管理するための機能です。Content Collectionsを用いたブログの構築手順をご紹介します。

投稿日: 2025-02-15

mdx を使用できるように設定

src/content/config.tsを作成
コンテンツを作成
- src/content/blog/240215.mdx
mdx を使用可能にする
- npx astro add mdx
vscode の設定で mdx を使用可能にする
- .vscode/settings.json

コンテンツ管理のためルーティング設定

コンテンツページを作成
- src/pages/blog/[...slug].astroを作成
  - 動的ルーティングさせる
コンテンツ一覧ページを作成
- pages/blog/index.astro
  - src/pages/blog.astroとバッティングするため、これ削除

コンテンツ管理にできたので目次作って見る

render を使用し、Content と同様、記事の heading リストを取得する
目次をうまい具合に出力する

memo

一旦、frontmatter は使用しない。
- frontmatter layout も使用しない。