CONTACT PRIVACY POLICY
HOME / BLOG
BLOG

Astro.jsでMarkdownブログを作る方法【Content Collections・getStaticPaths】

BLOG
デフォルト画像

Astro.jsは、ブログ、ドキュメント、ポートフォリオ、静的サイトと相性が良いフレームワークです。特にMarkdownで記事を書き、ビルド時にHTMLを生成する構成は、個人開発ブログや技術メディアに向いています。

この記事では、AstroのContent Collectionsを使って、Markdownブログを作る最小構成をまとめます。

Content Collectionsを使う理由

  • Markdown記事のfrontmatterを型付きで扱える
  • タイトル、説明文、公開日、タグなどの必須項目を定義できる
  • 記事一覧や詳細ページでデータを安全に参照しやすい
  • 静的生成と相性が良い

ディレクトリ構成

src/
  content/
    config.ts
    blog/
      first-post.md
  pages/
    blog/
      [...id].astro

Content Collectionsを定義する

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    publishedAt: z.date(),
    tags: z.array(z.string()).default([]),
  }),
});

export const collections = { blog };

Markdown記事を書く

---
title: "Astroでブログを作る"
description: "Content Collectionsを使った最小構成のブログ記事です。"
publishedAt: 2026-08-03
tags: ["Astro", "SSG"]
---

AstroのContent Collectionsを使うと、Markdownの記事を型付きデータとして扱えます。

記事詳細ページを作る

Content Collectionsの中身は、そのままではページになりません。静的サイトとして出力する場合は、動的ルートでgetStaticPaths()を使い、ビルド時に各記事ページを生成します。

---
// src/pages/blog/[...id].astro
import { getCollection, render } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('blog');

  return posts.map((post) => ({
    params: { id: post.id },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await render(post);
---

<article>
  <p>{post.data.publishedAt.toLocaleDateString('ja-JP')}</p>
  <h1>{post.data.title}</h1>
  <p>{post.data.description}</p>
  <Content />
</article>

Astroで気をつけること

  • Content Collectionsはsrc/pages/外に置くため、ルートは自分で作る
  • 静的生成ではgetStaticPaths()で生成対象を明示する
  • ReactやVueコンポーネントを使っても、必要な箇所だけclient:*で動かす
  • 記事本文は静的HTMLに寄せ、検索流入ページでは不要なJavaScriptを増やさない

WordPressとAstroの使い分け

WordPressは管理画面、投稿編集、カテゴリ、既存テーマ資産が強みです。一方、Astroは静的出力、軽いフロントエンド、Markdown管理が強みです。kjnine.comのようなWordPress中心サイトでは、メインブログはWordPress、別プロダクトのドキュメントやLPはAstro、という分け方が現実的です。

あわせて読みたい

参考資料

まとめ

Astro.jsでブログを作るなら、Markdownをただ読み込むよりもContent Collectionsを使う方が安全です。記事データの型、動的ルート、静的生成の流れを最初に作っておくと、記事が増えても破綻しにくい構成になります。

このシリーズの記事

次に読む記事

STEP BACK