Building a Blog with Astro and Markdown

Astro makes it incredibly easy to build a blog using markdown files. In this post, we’ll explore how to set up a blog with Astro’s content collections and markdown support.

Content Collections

Astro’s content collections provide a type-safe way to manage your content. They allow you to:

• Define schemas for your content
• Get automatic TypeScript support
• Validate your frontmatter
• Query and filter your content

Setting Up Your Blog

To get started with a blog in Astro:

1. Create a content directory: Place your markdown files in src/content/blog/
2. Define a schema: Create a schema to validate your frontmatter
3. Query your content: Use Astro’s content APIs to fetch your posts
4. Create dynamic routes: Generate pages for each blog post

Example Schema

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

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

export const collections = { blog };

Benefits of This Approach

• Type safety: Catch errors at build time
• Performance: Static generation for fast loading
• SEO friendly: Easy to add meta tags and structured data
• Developer experience: Great tooling and hot reload

This approach gives you a solid foundation for building a professional blog with Astro!