The Astro Guide

By Flavio Copes

Learn Astro with this guide: components, props, layouts, data fetching, SSR patterns and real-world tips from running my own sites on Astro.

Astro is my favorite way to build websites. It’s a framework built around a simple idea: ship HTML, and only add JavaScript where you actually need it.

This site runs on Astro. So do most of my other projects. I’ve written about it a lot over the years, from the basics to the small practical problems you hit in real projects.

This page is your map to all the Astro content on the site.

Where to start

Follow these in order and you’ll have a solid foundation:

1. Introduction to Astro explains what Astro is and why it exists
2. Why I use Astro is my personal take on where it shines
3. Astro Components covers the building block of every Astro site
4. Astro Props shows how to pass data to components
5. Building composable layouts in Astro puts components together into pages
6. Fetching data from the network in Astro brings in external data at build time
7. Moving a simple site to Astro walks through a real migration

Working with SSR

Astro can also render pages on the server. These posts cover patterns you’ll need in dynamic sites:

• Astro, prerendering a single component in a SSR page
• Render different HTML based on HTTP method in Astro
• Set custom cookie in the header and then redirect in Astro

Practical tips and fixes

Small problems I hit on real projects, and how I solved them:

• How to access configuration values in Astro components
• Astro, embed an image in markdown without relative path
• Astro, fix .md in links
• Astro View Transitions and Dark Mode
• Passing Astro components to React components

How I use Astro on this site

Two recent posts about features I built here, both good examples of what Astro makes easy:

• How I added search to my static site with Pagefind
• How I generate an Open Graph image for every post

Go deeper

I wrote a free Astro Handbook that collects everything in one place. And if you want to build full apps with Astro, HTMX and Alpine.js, check out the AHA Stack Masterclass.

All Astro posts live on the astro tag page.

Related posts about astro: