Why I Built My Portfolio with Astro

When it came time to build my personal site, I evaluated several options: Next.js, Gatsby, Hugo, and Astro. Here’s why I chose Astro.

The Problem with SPAs for Content Sites

Most JavaScript frameworks ship a full runtime to the browser. For a portfolio site that’s mostly static content, that’s unnecessary overhead. Your visitors are waiting for JavaScript to hydrate before they can read text that doesn’t need JavaScript at all.

What Makes Astro Different

Zero JavaScript by Default

Astro renders everything to HTML at build time. No JavaScript ships to the browser unless you explicitly opt in. This means:

• Faster page loads - just HTML and CSS
• Better SEO - search engines get fully rendered content
• Lower hosting costs - static files are cheap to serve

Content Collections

Astro has a built-in content system that’s perfect for blogs:

const posts = await getCollection('blog');

It handles:

• Markdown and MDX parsing
• Frontmatter validation with Zod schemas
• Type-safe content queries

Island Architecture

When you do need interactivity, Astro uses “islands” - isolated interactive components in a sea of static HTML. You can even choose when to hydrate them:

<!-- Only loads JS when the component is visible -->
<Counter client:visible />

The Result

My site scores 100/100 on Lighthouse for performance. Pages load in under 100ms from Cloudflare’s edge. And I can write blog posts in Markdown directly on GitHub.

If you’re building a content-focused site, give Astro a serious look.