Content in Astro

Content is the third chapter of the free Astro tutorial. Asha stops writing her posts as code and starts writing them as Markdown files, checked by a schema and turned into pages automatically.

What each lesson covers:

  • Markdown and MDX: Markdown pages, frontmatter, layouts, heading IDs, import.meta.glob(), Markdown processors, syntax highlighting and MDX.
  • Content Collections: src/content.config.ts, defineCollection(), the glob() and file() loaders, Zod schemas, getCollection(), getEntry() and render().
  • Pages from Content: A page per entry, listing pages, paginate(), tag pages and reference() between collections.
  • Images and Fonts: <Image />, <Picture />, local and remote images, responsive layouts, image() in schemas, SVG components and the Fonts API.
  • External Data and Environment Variables: fetch() at build time, error handling, custom loaders, .env files, PUBLIC_ variables and astro:env.

Every lab builds with Astro 7's real runtime in your browser. Markdown uses Astro's own processor package. The chapter ends with a checkpoint: a complete static blog.

Lessons in this section

  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.

    • Write a Markdown page with frontmatter and a layout
    • Read many Markdown files with import.meta.glob()
    • Choose a Markdown processor and highlighter
    • Decide between Markdown and MDX
  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.

    • Define a collection with a loader and a schema
    • Catch bad frontmatter with a Zod schema
    • Query, filter and sort entries
    • Render an entry's Markdown with render()
  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().

    • Build one page per collection entry
    • Split a long list into pages with paginate()
    • Build tag pages with nested pagination
    • Link entries across collections with reference()
  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.

    • Show optimised images with Image and Picture
    • Tell local images from remote images
    • Add images to collection entries with image()
    • Load web fonts with 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.

    • Fetch data from an API at build time
    • Handle a failed fetch without breaking the build
    • Keep secrets out of the browser with .env
    • Validate environment variables with astro:env