Introduction

In this technical guide, I’ll walk you through the process of building a high-performance personal website using Astro. Astro is an all-in-one web framework for building fast, content-focused websites.

Why Astro?

Astro is unique because it ships zero JavaScript to the client by default. This makes it incredibly fast. It also supports:

1. Component Islands: Interactive UI components only where you need them.
2. Content Collections: Type-safe Markdown and MDX content.
3. View Transitions: Native-like page navigation animations.

Setting Up the Project

We started by initializing a new Astro project:

npm create astro@latest

Then we added Tailwind CSS for styling:

npx astro add tailwind

Content Collections

One of the most powerful features is Content Collections. We defined our blog schema in src/content/config.ts:

const blog = defineCollection({
    type: 'content',
    schema: z.object({
        title: z.string(),
        description: z.string(),
        pubDate: z.coerce.date(),
        heroImage: z.string().optional(),
    }),
});

Conclusion

This setup provides a solid foundation for a personal blog. It’s fast, easy to maintain, and looks great.