Why learn Astro?
-
Ships zero JavaScript by default — pages are fast.
-
Use any framework (React, Vue, Svelte) as an island when you need interactivity.
-
Perfect for blogs, docs, marketing sites, and content-heavy apps.
-
Built-in MDX, image optimization, and content collections.
What you can build with Astro
Blogs and documentation sites Marketing and landing pages Content-heavy portfolios Multi-framework sites
Astro tutorials
5 articlesHand-written tutorials, ordered as a recommended learning path.
- 01 What Is Astro? A clear introduction to Astro — what it is, why zero JavaScript by default matters, how content collections and islands work, and the kinds of sites Astro is the right tool for.
- 02 Install & First Page A practical walkthrough for scaffolding an Astro 5 project — installing Node.js, running npm create astro, understanding the file layout, writing your first .astro page, and producing a production build.
- 03 Components & Layouts A practical guide to Astro components and layouts — frontmatter, typed props, slots, named slots, and the BaseLayout pattern every Astro project converges on for shared shell HTML.
- 04 Content Collections A practical guide to Astro content collections — defining a zod schema in src/content/config.ts, using the glob loader, fetching entries with getCollection, and building a dynamic [...slug].astro route.
- 05 Islands A practical guide to the Astro islands architecture — installing a UI framework with astro add, the four client directives, sharing props between server and island, and when an island is actually worth shipping.