# The Astro Guide

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

Author: Flavio Copes | Published: 2026-07-14 | Canonical: https://flaviocopes.com/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](https://flaviocopes.com/astro-introduction/) explains what Astro is and why it exists
2. [Why I use Astro](https://flaviocopes.com/why-i-use-astro/) is my personal take on where it shines
3. [Astro Components](https://flaviocopes.com/astro-components/) covers the building block of every Astro site
4. [Astro Props](https://flaviocopes.com/astro-props/) shows how to pass data to components
5. [Building composable layouts in Astro](https://flaviocopes.com/astro-layouts/) puts components together into pages
6. [Fetching data from the network in Astro](https://flaviocopes.com/astro-fetch-data-network/) brings in external data at build time
7. [Moving a simple site to Astro](https://flaviocopes.com/moving-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](https://flaviocopes.com/astro-prerendering-a-single-component-in-a-ssr-page/)
- [Render different HTML based on HTTP method in Astro](https://flaviocopes.com/render-different-html-based-on-http-method-in-astro/)
- [Set custom cookie in the header and then redirect in Astro](https://flaviocopes.com/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](https://flaviocopes.com/astro-access-configuration/)
- [Astro, embed an image in markdown without relative path](https://flaviocopes.com/astro-markdown-embed-image-without-path/)
- [Astro, fix .md in links](https://flaviocopes.com/astro-fix-dot-md-in-links/)
- [Astro View Transitions and Dark Mode](https://flaviocopes.com/astro-view-transitions-dark-mode/)
- [Passing Astro components to React components](https://flaviocopes.com/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](https://flaviocopes.com/static-site-search-pagefind/)
- [How I generate an Open Graph image for every post](https://flaviocopes.com/generate-og-images-astro/)

## Go deeper

I wrote a free [Astro Handbook](https://flaviocopes.com/ebooks/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](https://flaviocopes.com/courses/aha-stack).

All Astro posts live on the [astro tag page](https://flaviocopes.com/tags/astro/).