Build Pages in Astro

Build Pages is the second chapter of the free Astro tutorial. You turn Asha's one-page site into a real multi-page site, built from reusable pieces.

What each lesson covers:

  • Component Basics: The .astro file format, the component script, template expressions, conditions, lists with map(), fragments, dynamic tags and props.
  • Slots and Composition: Default and named slots, fallback content, Astro.slots, class:list, set:html, set:text, is:raw and Astro's HTML rules.
  • Layouts and the Document Head: Layout components, shared header and footer, nested layouts, titles, meta tags, Open Graph tags, canonical URLs and favicons.
  • Routing: Static, index and nested routes, route priority, dynamic routes with getStaticPaths(), rest parameters, redirects, rewrites and the 404 page.
  • Styling: Scoped and global styles, :global(), define:vars, CSS imports, Tailwind CSS, Sass, CSS Modules and how styles are bundled.
  • Client-Side Scripts: Bundled and inline scripts, events, data attributes, web components and third-party scripts.

Every lab builds your code in the browser with Astro 7's real runtime and the official Astro compiler. The chapter ends with a checkpoint: a styled, multi-page Dev Journal.

Lessons in this section

  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.

    • Name the two parts of an .astro file and what runs where
    • Show values, conditions and lists in a template
    • Pass props to a component and give them default values
    • Build a page from small reusable 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.

    • Make a component that wraps any content with slot
    • Fill several places in a component with named slots
    • Use class:list, set:html and set:text safely
    • Write HTML that Astro 7's compiler accepts
  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.

    • Build a layout that every page shares
    • Pass a page title and description into a layout
    • Nest a blog-post layout inside a base layout
    • Write a reusable head with SEO and social tags
  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.

    • Predict the address of any file in src/pages
    • Build many pages from one file with getStaticPaths()
    • Read route parameters and props in a dynamic page
    • Add redirects and a 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.

    • Explain why a component's styles stay inside it
    • Add site-wide styles from a layout
    • Pass values from the script into CSS with define:vars
    • Choose between plain CSS, Tailwind, Sass and CSS Modules
  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.

    • Add interactivity with a script tag
    • Make one script work for many copies of a component
    • Pass data from the component script to the browser script
    • Choose between bundled, inline and third-party scripts