# VitePress — Vite and Vue Powered Static Site Generator

> VitePress is a static site generator built on top of Vite and Vue. Designed for documentation websites with Markdown-centered authoring, Vue component extensibility, and lightning-fast dev/build. The successor to VuePress by the Vue.js team.

## Install

Save as a script file and run:

## Quick Use

```bash
npm i -D vitepress
mkdir docs && echo "# Hello VitePress" > docs/index.md
npx vitepress dev docs                      # Dev at :5173
npx vitepress build docs                    # Build
npx vitepress preview docs                  # Preview build
```

`docs/.vitepress/config.ts`:
```ts
import { defineConfig } from "vitepress";

export default defineConfig({
  title: "TokRepo Docs",
  description: "Open Source Asset Guides",
  themeConfig: {
    nav: [
      { text: "Home", link: "/" },
      { text: "Guide", link: "/guide/" },
    ],
    sidebar: [
      {
        text: "Getting Started",
        items: [
          { text: "Introduction", link: "/guide/" },
          { text: "Installation", link: "/guide/install" },
        ],
      },
    ],
  },
});
```

## Intro

VitePress is a static site generator built on top of Vite and Vue by the Vue.js team. Designed for documentation websites: Markdown-centered authoring, Vue component extensibility in Markdown, and lightning-fast dev/build. Successor to VuePress with a complete rewrite on Vite.

- **Repo**: https://github.com/vuejs/vitepress
- **Stars**: 17K+
- **Language**: TypeScript
- **License**: MIT

## What VitePress Does

- **Markdown + Vue** — use Vue components inside Markdown
- **Vite-powered** — instant HMR during development
- **Default theme** — beautiful docs theme with search, sidebar, nav
- **Code highlighting** — Shiki with line highlighting
- **Frontmatter** — YAML metadata per page
- **Built-in search** — local search or Algolia
- **i18n** — multi-language support
- **Last updated** — git-based timestamps
- **Custom themes** — extend or replace the default theme
- **SSG + SPA** — static generation with client-side navigation

## Comparison

| Tool | Framework | Speed | Components |
|---|---|---|---|
| VitePress | Vue + Vite | Fastest | Vue |
| Docusaurus | React | Fast | React |
| mdBook | Rust | Fast | None |
| Starlight (Astro) | Astro | Fast | Any |
| Nextra (Next.js) | React | Medium | React |

## 常见问题 FAQ

**Q: VitePress vs Docusaurus？**
A: VitePress 更轻（Vue + Vite），Docusaurus 功能更全（版本管理、i18n、插件生态更大）。Vue 项目选 VitePress，React 项目选 Docusaurus。

**Q: 能用 React 组件吗？**
A: 不能。VitePress 绑定 Vue。需要 React 选 Docusaurus 或 Nextra。

## 来源与致谢 Sources

- Docs: https://vitepress.dev
- GitHub: https://github.com/vuejs/vitepress
- License: MIT

---
Source: https://tokrepo.com/en/workflows/ce6e1d98-3651-11f1-9bc6-00163e2b0d79
Author: Script Depot