---
title: Quickstart
description: Run the site locally, add a page, and find it in navigation and search.
url: https://hexelstudio.com/docs/get-started/quickstart
---

<Steps>
  <Step title="Install dependencies">
    The site needs Node.js 20.9 or later and pnpm. The pnpm version is pinned in `package.json`; `corepack enable` (once per machine) makes the `pnpm` command use it.

    ```bash
    cd documentation
    pnpm install
    ```
  </Step>
  <Step title="Start the dev server">
    ```bash
    pnpm dev
    ```

    Open [localhost:3000/docs](http://localhost:3000/docs). Every route lives under `/docs`, and `/` redirects there.
  </Step>
  <Step title="Write a page">
    Create `content/docs/get-started/hello.mdx`:

    ```mdx content/docs/get-started/hello.mdx
    ---
    title: Hello
    description: My first page.
    ---

    Some text, with a [link to the quickstart](https://hexelstudio.com/docs/get-started/quickstart).

    <Tip>Components work without imports.</Tip>
    ```
  </Step>
  <Step title="Add it to navigation">
    List its slug in `docs.config.ts`. The slug is the file path under `content/docs`, without the extension.

    ```ts docs.config.ts {4}
    {
      group: "First steps",
      pages: [
        "get-started/hello",
        "get-started/introduction",
        "get-started/quickstart",
      ],
    },
    ```
  </Step>
  <Step title="Check it">
    Refresh the browser. The page is in the sidebar, in search, and at `/docs/get-started/hello.md` as Markdown.
  </Step>
</Steps>

<Tip>
  Content files are read on every request in development, so an edit shows when you refresh. Changes to code and `docs.config.ts` reload on their own.
</Tip>

## Before you push

```bash
pnpm lint
pnpm typecheck
pnpm build
```

The build fails if `docs.config.ts` lists a page that has no file, or if a page has broken MDX. The error names the file and the line.