Launch Your Astro Blog in Under 15 Minutes

Want a fast blog without the bloat of WordPress? Here’s how to get your own blog running with Astro and Markdown in just a few steps.

🚀 Step 1: Create Your Project

npm create astro@latest my-blog
cd my-blog
npm install

Choose the “Minimal” template with Markdown support when prompted.

🧱 Step 2: Add Your First Blog Post

Create a folder:

src/content/blog/my-first-post.md

With frontmatter:

---
title: "My First Post"
description: "This is the start of something great!"
publishDate: "2025-07-16"
---
Hello world! 🚀

🧠 Step 3: Set Up Blog Routing

In src/pages/blog/[slug].astro:

---
import { getEntry, render } from 'astro:content';
import Layout from '../../layouts/BlogLayout.astro';

const { slug } = Astro.params;
const post = await getEntry('blog', slug);
const { Content } = await render(post);
---

<Layout title={post.data.title}>
  <article>
    <h1>{post.data.title}</h1>
    <Content />
  </article>
</Layout>

🔍 Step 4: Add SEO

Use a simple <SEO> component and pass title/description from frontmatter.

✅ Step 5: Deploy

Connect to Netlify or Vercel, push to GitHub, and publish in seconds.

Your fast, SEO-optimized blog is live!

Bonus: Add RSS with `@astrojs/rss`, sitemap with `@astrojs/sitemap`, and a custom layout for branding.

Astro Blog Boilerplate: Build Once, Use Forever

If you write often, you need a blog layout that’s fast, SEO-friendly, and easy to scale. Here’s how to build your own Astro boilerplate blog.

🏗️ 1. Project Structure

src/
├── layouts/
│   └── BlogLayout.astro
├── pages/
│   └── blog/[slug].astro
├── content/
│   └── blog/*.md

📄 2. Blog Layout Example

---
// layouts/BlogLayout.astro
const { title, description } = Astro.props;
---
<html lang="en">
  <head>
    <title>{title}</title>
    <meta name="description" content={description} />
  </head>
  <body>
    <header><h1>{title}</h1></header>
    <main><slot /></main>
  </body>
</html>

📚 3. Markdown-Driven Content

Add .md files to src/content/blog/ with frontmatter.

Use getCollection() or getEntry() to access content.

🌍 4. Enhance with SEO & Features

<SEO> component for title, description, og:image
Add pagination
Inject breadcrumbs or sidebar navigation
Add RSS feed and sitemap

🔄 5. Reuse It

Once your layout is solid:

Copy it into new projects
Use it for documentation, changelogs, announcements
Share as a GitHub starter

✅ Conclusion

Your Astro blog boilerplate saves you time and ensures every new blog is optimized and production-ready from the start.