Building a Personal Site with Astro

When I decided to rebuild my personal website, I had several options to choose from. After some research, I landed on Astro, and I couldn’t be happier with the decision.

Why Astro?

Astro stands out for several reasons:

1. Zero JavaScript by Default

Astro ships zero JavaScript to the browser by default. This means incredibly fast page loads and excellent performance scores. For a content-focused site like a blog, this is perfect.

2. Partial Hydration

When you do need interactivity, Astro’s island architecture lets you hydrate only the components that need it. The rest stays as static HTML.

<!-- Only this component gets JavaScript -->
<InteractiveWidget client:load />

3. Content Collections

Astro’s content collections feature makes managing blog posts a breeze. You get:

• Type-safe frontmatter validation
• Automatic slug generation
• Easy querying and filtering

4. Great Developer Experience

The file-based routing, component syntax, and tooling are all well thought out. It feels familiar if you’ve used React or Vue, but simpler.

The Setup

My stack is intentionally minimal:

• Astro for the framework
• Tailwind CSS for styling
• MDX for blog posts with components

No database, no complex build steps, just markdown files and static generation.

Conclusion

If you’re building a blog, documentation site, or any content-heavy website, give Astro a serious look. The performance benefits alone are worth it.