Building with Astro: A Modern Web Framework

When it came time to rebuild my personal website, I had countless options. React, Next.js, Gatsby, Hugo, Eleventy… the list goes on. After careful consideration, I landed on Astro, and I couldn’t be happier with the choice.

Why Astro?

🚀 Performance First

Astro’s “zero JavaScript by default” philosophy means your pages ship with minimal client-side JavaScript. This translates to blazing-fast load times and excellent Core Web Vitals scores.

// Astro components are server-rendered by default
---
const greeting = "Hello, World!";
---

<h1>{greeting}</h1>

🏝️ Island Architecture

Need interactivity? Astro’s Islands let you hydrate specific components while keeping the rest of the page static:

<StaticHeader />
<InteractiveSearch client:load />
<StaticContent />

📝 First-Class Markdown Support

For a blog, content authoring experience is crucial. Astro’s built-in Markdown and MDX support makes writing a joy:

• Frontmatter for metadata
• Syntax highlighting with Shiki
• Custom components in MDX

My Setup

Here’s what my Astro configuration looks like:

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import mdx from '@astrojs/mdx';

export default defineConfig({
  integrations: [react(), mdx()],
});

The Results

Since switching to Astro:

Metric	Before	After
First Contentful Paint	2.4s	0.8s
Largest Contentful Paint	3.1s	1.2s
Total Bundle Size	450KB	45KB

Conclusion

If you’re building a content-focused website, I highly recommend giving Astro a try. The developer experience is excellent, and the performance benefits are substantial.

Have questions about my setup? Feel free to reach out!