Step 4: Pages & zones

Now you'll add a new zone so readers always know where they are.

Before you start

Step 3 finished

Do it

Type each command on its own and wait for it to finish before the next one.

Create the folder for the zone.

bash

mkdir site/tutorials

Expected output

text

(no output)

Create site/tutorials/index.md in your editor with this content:

# Tutorials

Step-by-step lessons.

In config.ts, add a nav link and a sidebar for the zone:

nav: [{ text: 'Tutorials', link: '/tutorials/' }],
sidebar: {
  '/tutorials/': [{ text: 'Tutorials', items: [{ text: 'Overview', link: '/tutorials/' }] }],
},

Result

Tutorials shows in the top nav. Its sidebar lists only its own pages.

Checkpoint

Every zone has an index.md
Each sidebar shows one zone

Next step

Step 5: Components

Back: Step 3: Theme & design tokens

Step 4: Pages & zones ​

Before you start ​

Do it ​

Result ​

Checkpoint ​

Next step ​