AstroHow-ToBeginner · 3 min read

How to Create Content Collection in Astro: Simple Guide

In Astro, create a content collection by defining a collection schema in src/content/config.ts using defineCollection and then add markdown or MDX files inside a folder named after the collection. Use getCollection to fetch and display the content in your components.

📐

Syntax

To create a content collection in Astro, you define it in src/content/config.ts using defineCollection. Each collection has a name and an optional schema for validation. Content files go inside a folder named after the collection under src/content/. You fetch the collection data with getCollection.

typescript

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

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

export const collections = {
  blog: blogCollection,
};

💻

Example

This example shows how to create a blog collection with a simple schema, add a markdown file, and fetch the posts in a component.

typescript

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

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

export const collections = {
  blog: blogCollection,
};

// src/content/blog/first-post.md
---
title: "My First Post"
date: "2024-06-01"
---

Hello, this is my first blog post!

// 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><strong>{post.data.title}</strong> - {post.data.date}</li>
      ))}
    </ul>
  </body>
</html>

Output

<h1>Blog Posts</h1> <ul> <li><strong>My First Post</strong> - 2024-06-01</li> </ul>

⚠️

Common Pitfalls

Common mistakes include:

Not placing content files inside the correct folder named after the collection (e.g., src/content/blog/).
Forgetting to export the collections object from config.ts.
Using an invalid schema that does not match frontmatter fields.
Trying to fetch a collection name that is not defined.

typescript

// Wrong: content file outside collection folder
// src/content/first-post.md (should be in src/content/blog/)

// Right: content file inside collection folder
// src/content/blog/first-post.md

// Wrong: missing export
// src/content/config.ts
const blogCollection = defineCollection({ schema: {} });
// forgot: export const collections = { blog: blogCollection };

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

📊

Quick Reference

Remember these key points when working with Astro content collections:

Define collections in src/content/config.ts with defineCollection.
Store content files in folders named after collections inside src/content/.
Use schemas to validate frontmatter with zod.
Fetch content with getCollection('collectionName').

✅

Key Takeaways

Define your content collections in src/content/config.ts using defineCollection.

Place your markdown or MDX files inside a folder named after the collection under src/content.

Use getCollection to fetch and display your content in Astro components.

Validate frontmatter with schemas to avoid errors.

Always export the collections object from config.ts.