Build a small content site

Time to connect everything from this module in one small project. A notes site, with a collection, two routes, a layout, a card component, and one optimized image.

Content

Create src/content/notes/ with three Markdown files. Each one gets a title, description, publication date, topic, and draft flag. Make one of them a draft.

In src/content.config.ts, load them with glob() and validate every field with the schema from the previous lessons. Don’t skip the schema. It’s the part that catches your typos later.

Routes

Build two pages:

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

Wrap both in the layout that takes title and description props. Add a small NoteCard.astro for the list items. Keep the filtering and sorting in the route, and give the card only what it needs to render one item. Components present. Routes decide what becomes public.

One image

Import one local image through astro:assets and render it with responsive widths and real alt text. It’s tempting to drop it in public/ and skip the import. Don’t. The build-time check on the import is the reason to do it this way.

Break things on purpose

A project you haven’t broken is a project you don’t understand yet. Do these in order:

1. Give one note topic: cooking. Build. Read the schema error and find the file and field it points to.
2. Fix the topic. Rename the image file. Build. Watch the import fail with the exact line.
3. Fix the image. Run npm run build and get a clean pass.
4. Open dist/notes/. Count the folders. The draft must not be there.

Add a fourth note

Now write a fourth published note and build again. It shows up in the list and gets its own page. You changed nothing in either template.

That is the whole point of collections. Adding content became data work. The loading, validation, routing, and presentation stayed put. When a site works this way, someone who doesn’t code can add a note by dropping in a Markdown file, and the build tells them if they got a field wrong.

Keep this project around. We’ll add the one island it needs at the end of the course.