vitepress项目使用github的action自动部署到github-pages中，理论上可以通用所有

news2025/11/4 22:01:06

使用`github`的`action`自动部署到`github-pages`中

创建部署的`deploy.yml`文件，在项目的根目录下面

.github\workflows\deploy.yml
请添加图片描述
完整的代码：使用的是pnpm进行依赖安装。

name: 部署VitePress

on:
  push:
    branches:
      - docs # 这段是在推送到 docs 分支时触发该命令

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2
        with:
          ref: docs # 这一步检查 docs 代码

      - name: Setup Node.js and pnpm
        uses: actions/setup-node@v3
        with:
          node-version: '20.10.0' # 设置 nodejs 的版本
          
      - name: Install pnpm
        run: npm install -g pnpm # 全局安装 pnpm

      - name: Install dependencies
        run: pnpm install # 使用 pnpm 安装依赖

      - name: Build VitePress
        run: pnpm run docs:build # 这里是打包 vitepress 命令

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.PAT_TOKEN }} # 这一步很重要，单独看下面的大步骤，主要是用来给该脚本一些仓库权限
          publish_dir: .vitepress/dist # 指定该文件夹中的 dist 
          publish_branch: gh-pages # 推送到关联仓库的 gh-pages 分支
          dotfiles: true  # 包括在提交中，即使被 .gitignore 文件忽略

这段 YAML 文件定义了一个 GitHub Actions 工作流，用于在推送到 docs 分支时构建和部署 VitePress 项目。

on: 定义触发工作流的事件，这里是在推送到 docs 分支时触发。
jobs: 定义工作流中的任务。
- build-and-deploy: 任务的名称，表示构建和部署。
  - runs-on: 指定任务运行的操作系统，这里是 ubuntu-latest。
  - steps: 定义任务的一系列步骤。
    - name: 步骤的名称。
    - uses: 使用的 GitHub Action。
    - with: 配置项，用于传递参数给 Action。
    - run: 执行的脚本命令。

其中，具体步骤解释如下：

检出代码：使用 actions/checkout Action 将代码检出到工作目录。
设置 Node.js 和 pnpm：使用 actions/setup-node Action 设置 Node.js 和安装 pnpm。
安装 pnpm：全局安装 pnpm。
安装依赖：使用 pnpm 安装项目依赖。
构建 VitePress：运行 pnpm 命令构建 VitePress 项目。
部署到 GitHub Pages：使用 peaceiris/actions-gh-pages Action 部署生成的静态文件到 GitHub Pages。配置中包括 GitHub Token、发布目录、发布分支以及是否包括 dotfiles（即使在 .gitignore 中也提交）等。