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].astrousesgetStaticPaths()to create one route per published note andrender()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:
- Give one entry an invalid topic and confirm that the schema identifies it.
- Restore the topic, rename the image, and confirm that the asset import fails.
- Restore the image and run the production build.
- 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