Getting Started with Astro and Content Collections

Astro is a modern web framework that brings a fresh approach to building fast, content-focused websites. One of its most powerful features is content collections, which provide type-safe content management in any format—whether it's YAML, MDX, JSON, or Markdown.

Why Content Collections Matter

Traditional content management can be messy. You might have:

• Content scattered across different file formats and locations
• No type safety, leading to runtime errors
• Difficulty sharing schemas across different page types
• Framework-specific dependencies baked into your content layer

Content collections solve these problems by providing:

• Type Safety: Zod schemas ensure your content matches expected shapes
• Framework Agnostic: Your content layer works across any framework
• Flexible Formats: Support for multiple content formats in a single collection
• Static Generation: Automatic route generation for all your content entries

Setting Up Your First Collection

Here's how to define a blog collection with Astro Content Collections Config:

import { defineCollection, z } from "astro:content";
import { glob } from "astro/loaders";
 
const blog = defineCollection({
  loader: glob({ pattern: "**/*.mdx", base: "./src/content/blog" }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    author: z.object({
      name: z.string(),
      avatar: z.string().optional(),
    }),
    date: z.string(),
    tags: z.array(z.string()).optional(),
  }),
});
 
export const collections = { blog };

Creating Your First Blog Post

Now you can create blog posts as MDX files in src/content/blog/:

---
title: My First Post
description: An introduction to my blog
author:
  name: Your Name
date: 2026-02-20
tags:
  - astro
  - blogging
---
 
# Welcome to My Blog
 
This is my first blog post using Astro and content collections!

Querying Your Content

Once your collection is set up, querying your content becomes simple and type-safe:

---
import { getCollection } from "astro:content";
 
// Get all blog entries
const allPosts = await getCollection("blog");
 
// Filter by tags
const astroTutorials = allPosts.filter((post) => post.data.tags?.includes("astro"));
 
// Sort by date
const sortedByDate = allPosts.sort(
  (a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
);
---

The Framework-Agnostic Advantage

One of the most powerful aspects of this approach is that your content layer doesn't know—or care—about Astro. The same content collection configuration could be used with Next.js, Gatsby, or any other framework. This separation of concerns makes your content truly portable.

Your implementation layer (Astro pages) can change, but your content and its schema remain consistent.

Next Steps

• Explore more complex schemas with nested objects
• Set up automatic route generation for dynamic content
• Implement filtering and search across collections
• Consider using the same collections in multiple frameworks

Content collections represent a paradigm shift in how we think about content management. By making content type-safe and framework-agnostic, Astro opens up new possibilities for scalable, maintainable web projects.

Happy building! 🚀