Skip to content
Hexel StudioDocs

Quickstart

Run the site locally, add a page, and find it in navigation and search.

On this page
  1. 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.

    cd documentation
    pnpm install
  2. Start the dev server
    pnpm dev

    Open localhost:3000/docs. Every route lives under /docs, and / redirects there.

  3. Write a page

    Create content/docs/get-started/hello.mdx:

    content/docs/get-started/hello.mdx
    ---
    title: Hello
    description: My first page.
    ---
    
    Some text, with a [link to the quickstart](/docs/get-started/quickstart).
    
    <Tip>Components work without imports.</Tip>
  4. Add it to navigation

    List its slug in docs.config.ts. The slug is the file path under content/docs, without the extension.

    docs.config.ts
    {
      group: "First steps",
      pages: [
        "get-started/hello",
        "get-started/introduction",
        "get-started/quickstart",
      ],
    },
  5. Check it

    Refresh the browser. The page is in the sidebar, in search, and at /docs/get-started/hello.md as Markdown.

Before you push

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.