Getting Started with Astro
Why I chose Astro for my personal website and what makes it great for content-driven sites.
Why Astro?
When I set out to build my personal website, I knew I wanted something that prioritized performance and simplicity. After evaluating several frameworks, I landed on Astro — and I haven’t looked back.
What Makes Astro Special
Astro takes a fundamentally different approach to building websites. Instead of shipping a JavaScript framework to the browser, it renders everything to static HTML at build time. Here’s what that means:
- Zero JavaScript by default — Your pages load instantly because there’s no JS framework overhead
- Bring your own framework — Use React, Vue, Svelte, or just plain HTML
- Content-first design — Built specifically for content-rich websites like blogs and portfolios
- Island architecture — Only hydrate interactive components, not the whole page
Setting Up
Getting started with Astro is incredibly straightforward:
npm create astro@latest
This gives you a clean project structure with:
my-site/
├── src/
│ ├── components/
│ ├── layouts/
│ ├── pages/
│ └── styles/
├── public/
├── astro.config.mjs
└── package.json
Content Collections
One of Astro’s killer features is Content Collections. You can write your blog posts in Markdown, define a schema for your frontmatter, and Astro gives you type-safe access to all your content.
---
title: "My Blog Post"
pubDate: "2026-02-20"
tags: ["astro", "web dev"]
---
Your markdown content here...
Performance Matters
In a world where the average webpage is over 2MB, Astro sites often clock in at under 50KB. That’s not just a number — it means:
Your content loads instantly, whether your reader is on fiber internet or a slow mobile connection.
I’ve found this to be especially important for a personal website where first impressions count.
What’s Next
I’m planning to explore more of Astro’s features, including:
- View Transitions for smooth page navigation
- MDX support for interactive blog posts
- RSS feeds for blog subscribers
- Sitemap generation for SEO
Stay tuned for more posts as I continue building out this site!