VitePress is a static site generator (SSG) designed specifically for building fast, content-centric sites. Simply put, VitePress takes content written in Markdown, applies a theme to it, and generates static HTML pages that can be easily deployed anywhere.
Differences from VuePress
| Feature | VuePress v1 | VitePress |
|---|---|---|
| Build Tool | Webpack | Vite |
| Dev Server Performance | Slower | Extremely Fast |
| Configuration | Relatively complex | More concise |
| Ecosystem | Mature, rich plugins | Rapidly developing |
If you're starting a new project, consider using VitePress—it has become the preferred choice for its excellent development experience and performance.
Use Cases
VitePress is perfect for building:
- Technical documentation
- Personal blogs
- Product introduction sites
- Open source project homepages
Quick Start
Using VitePress is very simple—follow these steps to get started quickly.
- Create a VitePress project quickly with the following command:
npm add -D vitepress
npx vitepress initThen follow the command-line prompts to start your documentation website.
- Create a Markdown file, such as
docs/index.md(the command above typically generates this), and write your content in it. - Configure basic site information in the
.vitepress/config.mtsfile, such as the site title, description, and logo. - Start the development server with
npm run docs:dev. - Visit
http://localhost:5173in your browser, and VitePress will preview your site in real time.
Additionally, when you're ready to deploy your site, you can run the following command:
npm run docs:buildThis generates the final static files in the .vitepress/dist directory, which you can deploy to any static hosting service.