Building a Blog with Astro

Creating a blog with Astro is straightforward thanks to its content-first approach. In this guide, we’ll walk through the key components of a blog.

Project Structure

A typical Astro blog structure looks like this:

src/
├── content.config.ts    # Collection definitions
├── data/
│   └── blog/           # Markdown posts
├── pages/
│   ├── index.astro     # Homepage
│   └── blog/
│       ├── index.astro # Blog listing
│       └── [slug].astro # Individual posts
└── components/
    └── PostCard.astro  # Reusable components

Dynamic Routes

The [slug].astro file uses dynamic routing to generate pages for each post:

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

Styling Your Blog

Astro supports scoped CSS out of the box. Each component’s styles are automatically scoped to prevent conflicts.

What’s Next?

Consider adding:

• RSS feeds
• Search functionality
• Categories and tags
• Comments system
• Social sharing

Happy blogging with Astro!