Getting Started

This chapter will guide you through creating a VitePress site from scratch.

Prerequisites

• Node.js version 18 or higher.
• Terminal and code editor (such as VSCode).

Initialize Project

1. Create and enter a new directory

   mkdir my-vitepress-site
   cd my-vitepress-site

2. Initialize npm project

   npm init -y

3. Install VitePress

   npm add -D vitepress

4. Run initialization wizard

   VitePress provides a convenient command-line tool to help you set up the basic structure.

   npx vitepress init

   The wizard will ask a few questions, such as your documentation root directory, site title, and description. Answer according to your needs.

Project Structure

After initialization, your project structure will look roughly like this:

.
├── docs
│   ├── .vitepress
│   │   └── config.js  # Configuration file
│   ├── api-examples.md
│   ├── markdown-examples.md
│   └── index.md       # Home page
└── package.json

• docs: Where all Markdown source files and VitePress configuration are stored.
• .vitepress: The "heart" of VitePress, containing configuration files, themes, and custom components.
• config.js: The core configuration file for the site.

Start Development Server

VitePress automatically adds some scripts to package.json.

1. Start development server

   npm run docs:dev

2. Visit the site

   Open your browser and visit the URL displayed in the command line (usually http://localhost:5173).

Now you should see your VitePress site running! Any changes you make to .md files in the docs directory will be instantly reflected in the browser through hot module replacement (HMR), without needing to refresh the page.

Build Static Site

When you're ready to deploy your site, you can run the following command:

npm run docs:build

This generates the final static files in the .vitepress/dist directory, which you can deploy to any static hosting service.