部署 VitePress 网站

说明

以下配置基于示例项目的文件结构,如果实际项目的文件结构不同请按照实际项目配置:

• VitePress 站点项目位于根目录中(./)。
• (./.vitepress/dist)是默认的构建输出目录。
• 在运行安装向导的时候Add VitePress npm scripts to package.json?这一项已经选择Yes并且在./package.json有以下脚本:

// ./package.json
{
  ...
  "scripts": {
    "docs:dev": "vitepress dev",
    "docs:build": "vitepress build",
    "docs:preview": "vitepress preview"
  },
  ...
}

在本地构建和测试

1. 在终端中运行以下命令构建站点:

npm run docs:build

2. 在终端中运行以下命令在本地预览:

npm run docs:preview

该命令将在本地启动一个静态 Web 服务器并将(./.vitepress/dist)中的文件提供给静态 Web 服务器。打开浏览器输入http://localhost:4173浏览构建的站点确保推送到生产环境之前一切正常。

3. 通过修改./package.json文件传递参数给本地静态 Web 服务器:

// ./package.json
{
  ...
  "scripts": {
    "docs:dev": "vitepress dev",
    "docs:build": "vitepress build",
    "docs:preview": "vitepress preview  --port=8080" // 传递参数
  },
  ...
}

此时运行npm run docs:preview浏览器访问http://localhost:8080即可预览构建站点。

部署到 GitHub

部署到 GitEE

注册 GitEE 账号

创建与账号同名项目

下载sourcetree

构建站点

上传项目

启动 Gitee Pages