Learning Astro

My experience building this blog with Astro

Welcome to my first post! I want to share with you how I created this blog using Astro, a framework that has revolutionized the way we build websites.

What is Astro?

Astro is a modern web framework designed for building fast, content-focused websites. Unlike other frameworks, Astro ships zero JavaScript to the browser by default, resulting in incredibly fast load times.

Main features of Astro:

  • Islands Architecture: Load JavaScript only where needed
  • UI Agnostic: Works with React, Vue, Svelte, or just HTML
  • Zero JavaScript by default: Ultra-fast static sites
  • Content Collections: Type-safe Markdown/MDX content handling
  • Built-in i18n support: Simple internationalization

Why I chose Astro?

After evaluating several options (Next.js, Gatsby, Hugo), I decided on Astro for several reasons:

  1. Simplicity: The learning curve is gentle
  2. Performance: Generated sites are incredibly fast
  3. Flexibility: I can use my favorite components without lock-in
  4. DX (Developer Experience): Development is smooth and enjoyable

Features of this blog

This blog includes some features I want to highlight:

Language toggle (Spanish/English)

I implemented a language selector that allows switching between Spanish and English. This was possible thanks to Astro’s built-in internationalization (i18n) system. URLs are structured like this:

  • Spanish (default): /, /blog, /about
  • English: /en, /en/blog, /en/about

Theme toggle (Light/Dark)

I also included a theme selector that allows toggling between light and dark mode. The theme is saved in localStorage, so your preference persists between visits.

How easy was it?

Surprisingly easy. The process was:

  1. Run npm create astro@latest
  2. Choose a blog template
  3. Customize styles with Tailwind CSS
  4. Configure i18n for Spanish/English
  5. Add the theme toggle
  6. Deploy!

Astro’s documentation is excellent and the community is very active. If you’re considering creating a blog or personal website, I recommend giving Astro a try.

Conclusion

Astro has proven to be an excellent choice for this project. Its focus on performance and simplicity makes it perfect for blogs and content sites. I’m excited to continue exploring its capabilities and sharing more content in the future.

Thanks for reading! 🚀