橙小姐的文档站

Appearance

部署指南 ​

构建网站 ​

在项目目录下运行：

powershell
npm run docs:build

构建完成后，所有静态文件会生成在 .vitepress/dist 文件夹里。

想本地预览构建好的效果：

powershell
npm run docs:preview

部署到 Gitee Pages（推荐） ​

Gitee Pages 是 Gitee 自带的免费静态网站托管服务，最适合这个项目。

第一步：把代码推送到 Gitee ​

  1. 在 Gitee 上新建一个仓库（公开或私有都行）
  2. 在项目目录下打开终端，执行：
powershell
git init
git add .
git commit -m "初次提交"
git remote add origin https://gitee.com/你的用户名/仓库名.git
git push -u origin master

第二步：开启 Gitee Pages ​

  1. 打开 Gitee 仓库页面
  2. 点顶栏的 服务 → Gitee Pages
  3. 选择要部署的分支（比如 master）
  4. 部署目录 填 .vitepress/dist
  5. 点 启动
  6. 等几秒钟，他会给你一个网址，比如 https://你的用户名.gitee.io/仓库名

搞定！以后每次更新代码，重新点一下 更新 按钮就行。

注意：Gitee Pages 免费版需要手动点"更新"才能同步最新代码。

部署到 GitHub Pages ​

第一步：推送到 GitHub ​

powershell
git remote add origin https://github.com/你的用户名/仓库名.git
git push -u origin main

第二步：设置 Pages ​

  1. 打开 GitHub 仓库 → Settings → Pages
  2. Source 选 GitHub Actions
  3. 在项目根目录创建 .github/workflows/deploy.yml：
yaml
# .github/workflows/deploy.yml
name: Deploy to Pages

on:
  push:
    branches: [main]

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm install
      - run: npm run docs:build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: .vitepress/dist

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - id: deployment
        uses: actions/deploy-pages@v4
  1. 把代码推上去，GitHub 会自动构建并部署
  2. 部署完成后，网址是 https://你的用户名.github.io/仓库名

部署到 Vercel（最简单） ​

  1. 去 https://vercel.com 用 GitHub 登录
  2. 点 Add New → Project
  3. 选择你的仓库
  4. Framework Preset 选 VitePress
  5. 点 Deploy，搞定！

以后每次推送代码，Vercel 会自动重新部署。

部署到自己的服务器 ​

如果你有自己的服务器：

powershell
# 先构建
npm run docs:build

# 把 dist 文件夹里的内容传到服务器
# 用 Nginx / Apache / IIS 指向这个目录就行

Nginx 配置示例：

nginx
server {
    listen 80;
    server_name 你的域名.com;

    root /var/www/你的网站目录;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

总结 ​

方式免费难度自动更新
Gitee Pages✅ 免费⭐ 简单❌ 需手动点更新
GitHub Pages✅ 免费⭐⭐ 中等✅ 推送即更新
Vercel✅ 免费⭐ 简单✅ 推送即更新
自己服务器❌ 要花钱⭐⭐⭐看你怎么配

橙小姐推荐： 如果项目在 Gitee 上用 Gitee Pages，在 GitHub 上用 Vercel，都是最简单的~