Data, content, and assets

Build a small content site

Connect collections, dynamic routes, layouts, components, and optimized images in one practical project.

8 minute lesson

~~~

Build a small notes site that connects the boundaries from this module.

Create src/content/notes/ with three Markdown entries. Give each entry a title, description, publication date, topic, and draft flag. In src/content.config.ts, load the files with glob() and validate every field. Make one note a draft.

Then build two routes:

  • /notes/ queries the collection, excludes drafts, sorts newest first, and links by entry ID
  • /notes/[id].astro uses getStaticPaths() to create one route per published note and render() to display its body

Wrap both routes in a layout that accepts title and description props. Add a small card component for list items, but keep filtering and sorting in the route. Components present data; routes decide which content becomes public.

Import one local image through astro:assets, give it contextual alt text, and render responsive sizes. Do not move it to public/ just to avoid the import—the build-time reference check is part of the value.

Now test the failure paths deliberately:

  1. Give one entry an invalid topic and confirm that the schema identifies it.
  2. Restore the topic, rename the image, and confirm that the asset import fails.
  3. Restore the image and run the production build.
  4. Inspect dist/notes/ and confirm there is no page for the draft.

Finally, add a fourth published note and rebuild. The index and detail route should appear without changing either page template. That is the payoff of the collection: adding valid content becomes data work, while loading, validation, routing, and presentation remain stable.

Lesson completed

Take this course offline

Get every free book and course as PDF and EPUB files.

Get the download library →