title: "Step 1 — Routing" active_step: 1

# Step 1 — Routing

File structure is your URL structure. No configuration needed.

## How it works

wwwhat uses file-based routing. Every `.html` file inside `site/` automatically becomes a URL. The directory structure maps directly to paths.

File → URL mapping
File
site/index.html
site/about.html
site/tutorial/1.html
site/blog/[slug].html
URL
/
/about
/tutorial/1
/blog/hello-world

## Dynamic routes

Wrap a filename in square brackets to create a dynamic segment. The value becomes a `#params.name#` template variable.

    <!-- site/blog/[slug].html -->
    <what>
    title: "Blog post"
    </what>

    <h1>#params.slug#</h1>

Visit `/blog/hello-world` and `#params.slug#` renders as `hello-world`.

## Live proof

You're on `/tutorial/1` right now. That URL exists because the file `site/tutorial/1.html` exists. Click any link below — each one is a file in `site/tutorial/`.

tutorial/1.html → /tutorial/1 tutorial/2.html → /tutorial/2 index.html → /

## The <what> block

Every page can have an optional `<what>` block at the top. It sets the page title, layout, auth rules, and data fetching. It is stripped from the output — never shown in the browser.

    <what>
    title: "My Page Title"
    layout: none
    auth: user
    fetch.posts = "local:posts"
    </what>

What you learned

- Files in `site/` become URLs automatically
- Directory structure maps to URL paths
- `[name].html` creates dynamic routes, accessible via `#params.name#`
- The `<what>` block controls title, layout, auth, and data — never rendered