Why I Chose Astro for My Blog (And You Should Too)

When I set out to build this blog, I had a simple requirement: fast, minimal, and easy to maintain.

I looked at Next.js, Hugo, Gatsby, and Eleventy. They’re all fine tools. But Astro stood out for one reason - it ships zero JavaScript by default.

The Problem with Most Frameworks

Most modern frameworks are built for applications, not content. Next.js is amazing for dashboards, SaaS products, and interactive apps. But for a blog? You’re shipping a React runtime to render static text.

That’s unnecessary weight.

What Makes Astro Different

Astro takes a content-first approach:

• Zero JS by default - Pages are static HTML unless you opt in to interactivity
• Markdown/MDX native - Write in Markdown, use components when needed
• Island architecture - Only hydrate interactive components, not the entire page
• Framework agnostic - Use React, Vue, Svelte, or nothing at all

// An Astro component - compiles to pure HTML
---
const title = "Hello World";
---
<h1>{title}</h1>

This compiles to <h1>Hello World</h1>. No JavaScript shipped.

Performance Results

After building this blog with Astro + Tailwind CSS:

• Lighthouse score: 100/100 across all categories
• First Contentful Paint: ~0.5s
• Total page weight: ~15KB (gzipped)
• Build time: < 2 seconds for 50+ posts

These aren’t optimized numbers. This is what you get out of the box.

The Content Layer

Astro’s content collections make managing blog posts simple:

// src/content.config.ts
const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.coerce.date(),
    description: z.string(),
    tags: z.array(z.string()),
  }),
});

Type-safe frontmatter, automatic validation, and zero runtime overhead. Write Markdown, get a fast site.

When Not to Use Astro

Astro isn’t the right choice for everything:

• Highly interactive apps - Use Next.js or SvelteKit
• Real-time dashboards - You need client-side state management
• Complex authentication flows - Server-side frameworks handle this better

For content sites, documentation, blogs, and marketing pages? Astro is hard to beat.

Getting Started

npm create astro@latest my-blog -- --template minimal
npm install @astrojs/tailwind @astrojs/mdx

Add your Markdown files to src/content/blog/, create a layout, and you’re live.

The best tech stack is the one that gets out of your way. For content, that’s Astro.