Welcome to Understanding Astro!

This book is the ultimate guide to Astro, the next-gen web framework designed for speed 🚀

Understanding Astro is the result of spending months digging into Astro and conveying the results in a practical and easy-to-understand fashion.

If you want to understand Astro, you've come to the right source.

Don't just learn another framework. Understand it.

Want to download the ebooks? Click here

✨ Table of contents ✨

The following is a detailed table of contents for Understanding Astro.

What you’ll learn
Project Overview
Getting started
- Install Node.js
- Setting up your code editor
Project structure
- tsconfig.json
- package.json
- package-lock.json
- astro.config.mjs
- src/env.d.ts
- src/pages/index.astro
Introduction to Astro pages
Anatomy of an Astro component
Component styles
Page layouts
Rendering components and slots
Capitalising component names
The global style directive
Custom fonts and global CSS
Independent Astro components
Adding interactive scripts
Interactive theme toggle
The :global() selector
Event Handling
Theming via CSS variables
Accessing global client objects
The magic of scripts
Leveraging inline scripts
Global selectors in scripts
Markdown pages
Navigating between pages
Markdown layouts
Composing layouts
Component props
Leveraging markdown frontmatter properties
Interactive navigation state
Component composition
The template flow of data
The dark side of define:vars
Loading multiple local files
Deploying a static Astro site
- 1. Create static production assets
- 2. Serve the static assets via a static web server
- The problem with manual deployments
- Automating the deployment of a static website
How fast is our Astro website?
Conclusion

Chapter 2: Astro Components In-depth
What you’ll learn
Introduction
The backbone of Astro
- The Javascript runtime fatigue
- Ditching the runtime
What is an Astro component?
- An astro component is a .astro file capable of rendering any valid HTML
- Astro components can be composed to make complex pages
Astro components can leverage a powerful templating syntax
- Component script
- Component template
Conclusion

Chapter 4: The Secret Life of Astro Component Islands
What you’ll learn
How islands work in Astro
Responsible hydration
Using multiple frameworks
- An upvote counter in Vue
- Rendering different framework components
Sharing state between component islands
Passing props and children to framework components
Nested framework components
Astro Island gotchas
- 1. Do not use an Astro component in a framework component
- 2. Do not hydrate an Astro component
Why islands?
Conclusion

Chapter 8: Build Your Own Astro Integrations
What you’ll learn
Astro and Vite
What are Astro integrations
Hello world. Sorry, Hello, Integration
The Astro hooks lifecycle
- The when and why of hooks
- Examining the hooks evaluation order
Build a default prerender integration
Building renderers and library Integrations
Conclusion