Getting Started
This guide will walk you through setting up your first VitePress site.
Prerequisites
- Node.js version 18 or higher
- A terminal for accessing VitePress via its command line interface (CLI)
- A text editor with Markdown syntax support
- VSCode is recommended, along with the official Vue extension
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
- Learn about routing
- Explore Markdown extensions
- Customize your theme
- Deploy your site with our deployment guide