AstroHow-ToBeginner · 4 min read

How to Use Content Collection for Blog in Astro

In Astro, use content collections by defining a collection schema in src/content/config.ts and placing your blog posts as markdown files in the collection folder. Then, import and fetch these posts in your pages using getCollection to render your blog dynamically.

📐

Syntax

Astro content collections let you organize markdown files with metadata for blogs or other content. You define collections and their schema in src/content/config.ts. Use getCollection('collectionName') to fetch all items in a collection.

defineCollection: Defines a content collection and its schema.
getCollection: Fetches all content items from a collection.
Markdown files: Stored in src/content/collectionName/ with frontmatter metadata.

typescript

import { defineCollection, z } from 'astro:content';

const blogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    pubDate: z.string(),
    description: z.string().optional(),
  }),
});

export const collections = {
  blog: blogCollection,
};

💻

Example

This example shows how to set up a blog collection, add markdown posts, and render them in an Astro page.

typescript

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

const blogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    pubDate: z.string(),
    description: z.string().optional(),
  }),
});

export const collections = {
  blog: blogCollection,
};

// src/content/blog/post1.md
---
title: "My First Blog Post"
pubDate: "2024-06-01"
description: "An intro to Astro content collections."
---

Welcome to my blog! This is a post using Astro content collections.

// src/pages/blog.astro
---
import { getCollection } from 'astro:content';
const posts = await getCollection('blog');
---
<html lang="en">
  <head>
    <title>Blog</title>
  </head>
  <body>
    <h1>Blog Posts</h1>
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <h2>{post.data.title}</h2>
          <p><em>{post.data.pubDate}</em></p>
          <p>{post.data.description}</p>
          <article innerHTML={post.body}></article>
        </li>
      ))}
    </ul>
  </body>
</html>

Output

<html lang="en"><head><title>Blog</title></head><body><h1>Blog Posts</h1><ul><li><h2>My First Blog Post</h2><p><em>2024-06-01</em></p><p>An intro to Astro content collections.</p><article><p>Welcome to my blog! This is a post using Astro content collections.</p></article></li></ul></body></html>

⚠️

Common Pitfalls

Common mistakes when using content collections in Astro include:

Not defining a schema or mismatching frontmatter fields causes errors.
Placing markdown files outside the correct src/content/collectionName/ folder means they won't be found.
Forgetting to export collections from config.ts stops Astro from recognizing the collection.
Using incorrect import paths or forgetting to await getCollection leads to runtime errors.

typescript

/* Wrong: Missing schema or wrong folder */
// src/content/blog/post1.md placed outside src/content/blog/

/* Right: Correct folder and schema */
// src/content/blog/post1.md with frontmatter matching schema

/* Wrong: Not exporting collections */
// config.ts missing export const collections = { blog: blogCollection };

/* Right: Export collections properly */
export const collections = { blog: blogCollection };

📊

Quick Reference

Use this quick reference to remember key steps:

Step	Description
Define Collection	Use defineCollection with a schema in src/content/config.ts
Add Markdown Files	Place .md files with frontmatter in src/content/collectionName/
Fetch Content	Use getCollection('collectionName') in your Astro pages
Render Posts	Map over fetched posts and display metadata and content
Export Collections	Export collections object from config.ts for Astro to recognize

✅

Key Takeaways

Define your blog collection schema in src/content/config.ts using defineCollection.

Store blog posts as markdown files with frontmatter inside src/content/blog/ folder.

Use getCollection('blog') to fetch all blog posts asynchronously in your Astro pages.

Always export the collections object from config.ts to register your collections.

Match frontmatter fields to your schema to avoid build errors.