快速开始：安装与部署 VitePress 网站

本地安装与运行

相关的要求参见：https://vitepress.dev/guide/getting-started

1. 新建目录，并新建项目

假设我们要使用的目录是 vpsite

mkdir vpsite && cd vpsite
npm init -y

2. 安装 VitePress

npm add -D vitepress

当前安装所使用的 VitePress 版本是：1.1.0。

3. 运行 Setup Wizard

npx vitepress init

注意，为了后续方便操作，将 VitePress 创建在 ./doc。

其中，我们还做了如下选项：

• 采用 TypeScript
• 选用缺省主题（Default Theme），但会对之定制化

创建选项如下

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme + Customization
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
└  Done! Now run npm run docs:dev and start writing.

Tips:
- Since you've chosen to customize the theme, you should also explicitly install vue as a dev dependency.

按其中的提示，我们安装 Vue：

npm add -D vue

安装后，你可以查看目录结构：VitePress 项目在 ./docs中，其中使用 ./docs/.vitepress来存放 Theme 和配置文件。你可用如下命令查看：tree -a -I node_modules

.
├── docs
│   ├── .vitepress
│   │   ├── config.mts
│   │   └── theme
│   │       ├── index.ts
│   │       └── style.css
│   └── index.md
└── package.json

之后，我们将修改config.mts配置，并扩展缺省主题。

4. 运行与浏览网站

现在，你可以在本地运行文档网站，并在http://localhost:5173/查看。

npm run docs:dev

你可用如下命令来运行构建：

npm run docs:build

Vercel 部署指南

通常，我们会将网站部署到如 Vercel、Cloudflare等。这里以 Vercel 为例给出步骤：

1. 在 Github 上，创建一个项目

在 Github 网页上，创建一个项目比如 vpsite

2. 新增 .gitignore

/node_modules
**/dist
**/cache

3. 将项目提交到 Github

请注意做相应的修改：

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:****abcdefg****/vpsite.git
git push -u origin main

4. 在 Vercel 创建项目和部署

在 Vercel 界面上，创建新项目。

选择导入我们刚刚新建的 Git Repo。（这里假设你已经做了 Vercel 和 Github 之间的连接。）

由于我们的vitepress是放在 ./docs/目录，你可以不做任何设置，直接运行部署。

你的网站将可以部署成功。祝贺，你的网站成功上线了。

相关的部署参考见：Deploy - Platform Guides