getting-started

Clone or use the starter kit

The fastest way to get started is to clone the repository directly. This gives you a fully working project with all configuration pre-set.

git clone https://github.com/your-org/doc-site-starter-kit.git my-docs
cd my-docs

Replace my-docs with your project name.

Install dependencies

Install all required packages using pnpm. The lockfile ensures you get exactly the same dependency versions as tested.

pnpm install

This installs Vike, React 19, Tailwind CSS v4, and all dev dependencies.

Start the development server

Launch the Vite dev server with hot module replacement. Changes to pages, components, and styles are reflected instantly in the browser.

pnpm dev

Open http://localhost:3000 in your browser.

Add your first page

Create a new directory under pages/ with a +Page.tsx file. Vike automatically picks it up and maps it to a URL.

// pages/my-page/+Page.tsx
export function Page() {
  return (
    <div>
      <h1>My New Page</h1>
      <p>This page is now available at /my-page</p>
    </div>
  )
}

The page is automatically wrapped in the Layout component defined in renderer/Layout.tsx, so the sidebar and base styles are applied for you.

Add your page to the sidebar

Open components/Sidebar.tsx and add your new page to the navigation array under the appropriate section.

const navigation = [
  {
    section: 'Guides',
    items: [
      // ... existing items
      { label: 'My Page', href: '/my-page', icon: '✨' },
    ],
  },
]