Still under construction Check previous version here
Back to Journal
Getting Started with Astro | Journal

Getting Started with Astro | Journal

My first experiences building a personal website with Astro and the lessons learned along the way.

Web DevelopmentAstroJavaScript

Getting Started with Astro

When I first discovered Astro, I was immediately intrigued by its promise of delivering lightning-fast websites without sacrificing developer experience. As someone who has worked with various JavaScript frameworks over the years, I was curious to see how Astro’s “Islands Architecture” would compare.

What Makes Astro Different

Unlike traditional Single-Page Applications (SPAs), Astro takes a different approach by shipping zero JavaScript by default. This “Zero JS” philosophy results in incredibly fast page loads and better performance metrics.

Some key features that stood out to me:

  • Component Islands: Astro lets you use your favorite UI components (React, Vue, Svelte, etc.) but only hydrates them when necessary.
  • Static Site Generation: Pages are pre-rendered at build time, resulting in fast, SEO-friendly static HTML.
  • On-demand Components: JavaScript is only shipped for interactive components, keeping page weight minimal.

Building My Portfolio

For my portfolio website, I decided to embrace Astro’s content-focused approach. Here’s how I structured my project:

  1. Content Collections: Using Astro’s content collections for projects, journal entries, and experience.
  2. Markdown for Content: Writing all my content in Markdown files with frontmatter for metadata.
  3. Tailwind for Styling: Pairing Astro with Tailwind CSS for rapid styling.

Performance Results

After deploying my site, I ran it through Lighthouse and was impressed with the results:

  • Performance: 98/100
  • Accessibility: 100/100
  • Best Practices: 100/100
  • SEO: 100/100

The site loads in under 1 second, even on slower connections, and the Core Web Vitals are all in the green.

Lessons Learned

If you’re considering Astro for your next project, here are a few tips from my experience:

  1. Embrace the content-focused approach: Astro shines when working with content-heavy sites.
  2. Use partial hydration wisely: Only add interactivity where it truly enhances the user experience.
  3. Leverage Markdown and MDX: They make content management so much easier.
  4. Start with a minimal setup: You can always add complexity as needed.

I’m looking forward to continuing my Astro journey and exploring more of its capabilities in future projects.