Skip to content

Getting Started

This guide will walk you through setting up your first VitePress site.

Prerequisites

Installation

Step 1: Create and navigate to a new directory

bash
mkdir vitepress-starter
cd vitepress-starter

Step 2: Initialize with your package manager

bash
npm init -y

Step 3: Add VitePress as a dev dependency

bash
npm install -D vitepress

Step 4: Create your first document

bash
mkdir docs && echo '# Hello VitePress' > docs/index.md

Step 5: Add scripts to package.json

json
{
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  }
}

Step 6: Serve the site locally

bash
npm run docs:dev

VitePress will start a local dev server at http://localhost:5173.

Configuration

Create a .vitepress/config.js inside the docs directory:

js
export default {
  title: 'VitePress',
  description: 'A VitePress Site',
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' }
    ],
    sidebar: [
      {
        text: 'Guide',
        items: [
          { text: 'Introduction', link: '/guide/' },
          { text: 'Getting Started', link: '/guide/getting-started' }
        ]
      }
    ]
  }
}

Next Steps

VitePress Development Guide