Astro tutorial

Build fast, content-driven websites with Astro, one page at a time.

Start the course

Course contents

Get Started

  1. Getting Started with Astro — What Astro is and why it was created, its features, the HTML-first approach, what you can build, Astro vs Next.js and React, the ecosystem, system requirements, creating and running a project, its files, and the Astro CLI.
  2. Project Structure and Configuration — Every folder and file in an Astro project, public/ vs src/, astro.config.mjs and defineConfig(), common options, integrations and astro add, using JavaScript and TypeScript together, astro check, editor setup and the dev toolbar.

Build Pages

  1. Component Basics — The .astro file format, the component script and template, expressions, dynamic attributes, conditional rendering, lists with map(), fragments, dynamic tags, props with defaults and spreading, and importing components.
  2. Slots and Composition — The default slot, named slots, fallback content, passing slots to child components, Astro.slots, the class:list, set:html, set:text and is:raw directives, Astro 7's HTML rules, and composing components.
  3. Layouts and the Document Head — Layout components with slot, the html, head and body elements, a shared header and footer, passing props to a layout, nested layouts, page titles, meta descriptions, Open Graph tags, canonical URLs, favicons and a reusable head component.
  4. Routing — Pages and page file types, linking, static, index and nested routes, route priority, the underscore prefix, trailing slashes, dynamic routes with getStaticPaths() and props, rest parameters, Astro.params, redirects, rewrites and the custom 404 page.
  5. Styling — Scoped styles and how scoping works, styling child components, :global() and is:global, global stylesheets in a layout, CSS order, inline styles, define:vars, styling with props, CSS imports, Tailwind CSS, Sass, PostCSS, CSS Modules, bundling and inlineStylesheets.
  6. Client-Side Scripts — Script tags in Astro components, how scripts are bundled and run once, importing npm packages, TypeScript in scripts, is:inline and define:vars, event handling in repeated components, data attributes, web components, scripts from public/ and Partytown.

Content

  1. Markdown and MDX — Markdown pages, frontmatter, heading IDs, import.meta.glob() (which replaced Astro.glob()), layouts for Markdown, the Sätteri and unified processors, the markdown config option, syntax highlighting with Shiki and Prism, the Code component, MDX and Markdoc.
  2. Content Collections — What collections are, src/content.config.ts, defineCollection(), the glob() and file() loaders, entry IDs, Zod schemas with optional fields and defaults, getCollection() with filters and sorting, getEntry(), render() and the Content component, and JSON Schema support.
  3. Pages from Content — Creating a page for each collection entry, listing pages, pagination with paginate() and the page prop, nested pagination for tags, and references between collections with reference(), getEntry() and getEntries().
  4. Images and Fonts — Images in public/ and src/, the Image and Picture components, local and remote images, authorized domains, image sizes, responsive layouts, fit and position, images in Markdown and collections, getImage(), SVG components, image services and the Fonts API.
  5. External Data and Environment Variables — Fetching data in the component script with top-level await, handling fetch errors, headless CMS, custom content loaders, databases overview, .env files, import.meta.env, PUBLIC_ variables, built-in variables and type-safe astro:env with envField.

Rendering

  1. How Astro Renders Pages — What rendering means, build time vs request time vs the browser, SSG, SSR, CSR and hydration, Astro's static and on-demand modes, client-side islands, static rendering in depth, keeping static sites fresh, the output setting and why hybrid was removed.
  2. On-Demand and Mixed Rendering — How on-demand rendering works, server adapters, Astro.request, Astro.url, Astro.response, Astro.redirect(), returning a Response, dynamic routes without getStaticPaths(), the prerender export, mixing static and on-demand pages, a decision guide, request security, the 500 page and streaming.

Interactivity

  1. Astro Islands — The islands architecture, adding a UI framework with npx astro add, framework components without a directive, client:load, client:idle, client:visible, client:media and client:only, props and children, sharing state between islands with a store, and when to use a script instead.
  2. Page Navigation — Full page loads vs client-side navigation, the ClientRouter component, transition:name and transition:animate, transition:persist for islands, scripts and the astro:page-load event, navigate(), data-astro-reload and prefetching strategies. Checkpoint 3.

Server Development

  1. Endpoints and Server Data — What endpoints are, .js and .ts endpoint files, HTTP method functions, reading JSON and form data, returning JSON and status codes, static and on-demand endpoints, the APIRoute type, RSS feeds, databases in server code, and advanced routing with src/fetch.ts.
  2. Middleware and Cookies — What middleware is, src/middleware.ts, defineMiddleware(), next() and changing responses, sequence(), redirects and rewrites in middleware, sharing data with locals, App.Locals, and reading, setting and deleting cookies with their options.
  3. Sessions — What sessions are, sessions vs cookies, session drivers and the adapter defaults, session.get() and set(), what you can store, regenerate() and destroy(), Astro.session and context.session, disabling sessions and typing App.SessionData.
  4. Actions and Forms — What actions are, defineAction() and the server export, groups, Zod input validation, accept form, isInputError(), calling actions from scripts and HTML forms, getActionResult(), callAction(), ActionError, redirects and securing actions.
  5. Authentication — Authentication vs authorization, how login works, session-based login and logout actions, hashing passwords, protecting pages and endpoints in middleware, why path matching is unsafe, roles and ownership, 401 vs 403, and auth libraries.

Ship It

  1. Fresh Data at Scale — Why one fresh part slows a whole page, server islands with server:defer, fallback content, encrypted props and cookies in server islands, Cache-Control and CDN caching, live collections with defineLiveCollection(), getLiveCollection() and getLiveEntry(), and error handling.
  2. Testing and Debugging — Reading Astro error messages, server vs browser console.log, the Debug component and the dev toolbar, astro check, unit tests with Vitest and getViteConfig(), component tests with the Container API, and end-to-end tests with Playwright.
  3. Deploying Your Site — astro build and preview, static vs server hosting and adapters, the site and base settings, SEO head tags, robots.txt, sitemaps and the 404 page, production environment variables, deploying from Git to Netlify, Vercel, Cloudflare and GitHub Pages, and the capstone checklist.

Appendix

  1. Appendix A: Internationalization Guide — Build an Astro site in more than one language: locale folders, the i18n config, translation dictionaries, getRelativeLocaleUrl(), hreflang and fallbacks.
  2. Appendix B: Astro Cheat Sheet — Every command, project file and piece of syntax from the course on one page: components, routing, content, rendering, islands, navigation and server features.
  3. Appendix C: Troubleshooting and Glossary — Common Astro errors and problems with their causes and fixes, plus a one-line glossary of every term used in the course.