Building My Personal Website with Astro

I’ve been wanting to build a personal website for a while now. After evaluating several frameworks, I settled on Astro — and I couldn’t be happier with the choice.

Why Astro?

Astro’s content-first approach was exactly what I needed. As someone who writes in Markdown (specifically in Obsidian), I wanted a framework that would let me:

1. Write content in .md files
2. Push to git and have the site rebuild automatically
3. Ship minimal JavaScript to the browser

Astro checks all three boxes.

The Stack

Here’s what I’m using:

• Astro — The framework itself, with content collections for type-safe content
• Tailwind CSS — Utility-first CSS for rapid styling
• React — For interactive components (used sparingly)
• Vercel — For deployment with automatic rebuilds

Content Collections

Astro’s content collections are a game-changer. I define a schema once:

const blog = defineCollection({
  loader: glob({ pattern: '**/*.md', base: './src/data/blog' }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()).default([]),
  }),
});

And every blog post’s frontmatter is validated at build time. No more typos or missing fields.

What’s Next

I plan to add:

• Dark mode toggle
• RSS feed
• Search functionality
• More blog posts!

Stay tuned for more updates.