#VitePress 部署

将你的 VitePress 网站部署到线上非常简单，因为 VitePress 会构建出一个完全静态的网站。这意味着你可以将它托管在任何支持静态文件的服务上。

#构建你的网站

在部署之前，你需要先构建生产环境所需的文件。在你的项目根目录下运行以下命令：

npm run docs:build

这个命令会执行 vitepress build docs（这里的 docs 是你的源文件目录）。构建成功后，所有静态文件（HTML, CSS, JavaScript, 和其他资源）都会被输出到 docs/.vitepress/dist 目录。

你需要部署的，就是这个 dist 目录下的所有内容。

#常见的部署平台

你可以将构建好的 dist 目录部署到各种流行的平台。

#部署到 GitHub Pages

1. 修改 config.js

   如果你的 GitHub Pages URL 是 https://<USERNAME>.github.io/<REPO>/，你需要设置 base 选项。

   // .vitepress/config.js
   export default {
     base: '/<REPO>/', // <REPO> 替换为你的仓库名
     // ...其他配置
   }

2. 创建部署脚本

   你可以创建一个脚本文件，例如 deploy.sh，来自动化部署流程。

   #!/usr/bin/env sh
   
   # 发生错误时中止
   set -e
   
   # 构建
   npm run docs:build
   
   # 进入构建输出的目录
   cd docs/.vitepress/dist
   
   # 如果是发布到自定义域名
   # echo 'www.example.com' > CNAME
   
   git init
   git add -A
   git commit -m 'deploy'
   
   # 如果发布到 https://<USERNAME>.github.io/<REPO>
   git push -f git@github.com:<USERNAME>/<REPO>.git main:gh-pages
   
   cd -

3. 运行脚本

   sh deploy.sh

   最后，在你的 GitHub 仓库设置中，将 Pages 的源设置为 gh-pages 分支。

#部署到 Netlify / Vercel

对于 Netlify, Vercel, Cloudflare Pages 等现代托管平台，部署过程更加简单。

1. 将你的代码推送到 GitHub/GitLab/Bitbucket 仓库。
2. 在对应的平台（如 Netlify）上，导入你的 Git 仓库。
3. 配置构建设置：
   • 构建命令 (Build Command): npm run docs:build
   • 发布目录 (Publish Directory): docs/.vitepress/dist

平台会自动在你每次推送到主分支时拉取代码、执行构建命令，并将发布目录部署到线上。你无需手动构建和上传文件。