understanding-astro-book
understanding-astro-book copied to clipboard
Learn to build remarkably fast websites with Astro ✨
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.

Introduction
-
Don't be displeased
-
Differences to the official documentation
-
How the book is structured
-
Chapters overview
-
Prerequisites
-
Typographic conventions

Chapter 1: Build your first Astro Application
-
What you’ll learn
-
Project Overview
-
Getting started
-
Project structure
-
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
-
What is an Astro component?
-
Astro components can leverage a powerful templating syntax
-
Conclusion

-
Chapter 3: Build Your Own Component Island
-
What you’ll learn
-
A brief history of how we got here
-
A partial hydration islands architecture implementation
-
Conclusion
Want to download the ebooks? Click here

-
Chapter 4: The Secret Life of Astro Component Islands
-
What you’ll learn
-
How islands work in Astro
-
Responsible hydration
-
Using multiple frameworks
-
Sharing state between component islands
-
Passing props and children to framework components
-
Nested framework components
-
Astro Island gotchas
-
Why islands?
-
Conclusion

-
Chapter 5: Oh my React! (React documentation site clone)
-
What you’ll learn
-
Set up the starter project
-
Installing dependencies
-
Styling Astro projects with Tailwind
-
Typescript import alias
-
Islands & colocating page components
-
Syntax highlighting
-
Getting Started with Content Collections
-
Query and render content collections
-
Dynamic routing
-
Generate routes with content collections
-
MDX components
-
Integration spotlight: Astro SEO
-
Custom 404 pages in Astro
-
Conclusion

-
Chapter 6: Server-side Rendering (SSR) in Astro
-
What you’ll learn
-
When do you need SSR?
-
How to Enable SSR
-
Deploying an SSR project
-
Use the correct adapter
-
SSR with static pages
-
From Request to Response
-
Environment variables
-
Dynamic routes
-
Server endpoints
-
Streams, oh streams
-
Conclusion

Chapter 7: Be Audible! (Fullstack Astro Project)
-
What you’ll learn
-
Project setup
-
Project overview
-
Technology choices
-
Backend setup
-
Handling authentication
-
Implementing protected pages
-
Cloud storage setup
-
Uploading audio recordings
-
Fetching data from the server
-
Submitting HTML forms
-
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
-
Build a default prerender integration
-
Building renderers and library Integrations
-
Conclusion
