Building a Modern Blog with Astro and Markdown

Creating a blog in 2025 doesn’t have to be complicated. If you’re a developer who values performance and complete control over your content, Astro with Markdown is an excellent choice. This guide will walk you through building a blog just like this one.

Why Astro + Markdown?

Astro’s content collections combined with Markdown offer several advantages that make it perfect for modern blogging.

Perfect for Modern Blogging

Astro’s content collections combined with Markdown offer several advantages:

Performance: Zero JavaScript sent to the browser by default SEO-friendly: Server-side rendering with fast loading times
Developer Experience: Write in Markdown, deploy as static files Flexibility: Full control over styling and functionality Type Safety: Built-in TypeScript support for content

Setting Up Your Astro Blog

1. Content Collections Configuration

First, configure your content collections in src/content/config.ts:

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

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    publishDate: z.date(),
    category: z.string(),
    tags: z.array(z.string()).optional(),
    author: z.string().default('Your Name'),
  }),
});

export const collections = {
  blog,
};

2. Create Your First Post

Create a new markdown file in src/content/blog/:

---
title: "My First Post"
description: "This is my first blog post"
publishDate: 2025-01-15
category: "Getting Started"
---

# Welcome to My Blog

This is the content of my first post!

3. Dynamic Blog Routes

Create the dynamic route file src/pages/blog/[...slug].astro:

---
import { getCollection } from 'astro:content';
import Layout from '../../layouts/Layout.astro';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: post,
  }));
}

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

<Layout title={post.data.title}>
  <main class="max-w-4xl mx-auto px-4 py-16">
    <article class="prose prose-lg mx-auto">
      <Content />
    </article>
  </main>
</Layout>

Key Benefits

Lightning Fast Performance

Astro generates static HTML files, resulting in incredibly fast loading times and excellent Core Web Vitals scores.

SEO Optimized

With server-side rendering and static generation, your content is immediately visible to search engines.

Developer Friendly

Write your content in Markdown and deploy as optimized static files. No complex build processes or runtime dependencies.

Getting Started

Ready to build your own Astro blog? Here’s what you need:

1. Install Astro: npm create astro@latest
2. Add content collections: Configure your blog schema
3. Create markdown posts: Write your content
4. Deploy: Push to any static hosting service

That’s it! You now have a modern, fast, and SEO-friendly blog that’s easy to maintain and scale.