在上一篇文章中，我們已經成功用 VuePress 搭建了項目文檔，并使用 sh 腳本部署到了 GitHub Pages。
但隨著文檔的更新頻率增加，每次都要手動推送，那有沒有不需要手動推送的方法呢？那必須有。

這次我們將用 GitHub Actions 實現“代碼一提交，文檔自動上線”的全流程自動化部署。

---

1. 什么是 GitHub Actions？

GitHub Actions 是 GitHub 提供的 CI/CD（持續集成與持續交付）平臺，支持：

• 根據觸發條件（push、PR、定時等）執行任務
• 在云端虛擬機上自動構建、測試、部署
• 免去本地手動操作，降低出錯率

在我們的場景中，Actions 會：

1. 檢測到代碼更新
2. 在云端安裝依賴并構建 VuePress
3. 將靜態文件部署到 gh-pages 分支
4. 自動更新 GitHub Pages 網站

---

2. 新建工作流文件

在你的項目根目錄下創建目錄和文件：

.github/workflows/deploy.yml

然后將以下配置寫入：

# 工作流名稱
name: Build and Deploy# 觸發條件
on:# 當 develop 分支有代碼推送時觸發push:branches:- develop# 一個 workflow 可以包含多個 job
jobs:# job 唯一 keybuild-and-deploy:# 運行環境runs-on: ubuntu-latest# job 內的步驟steps:# 1. 拉取倉庫代碼- name: Checkout  ?uses: actions/checkout@v2.3.1# 2. 安裝指定版本 Node.js- name: lock npm versionuses: actions/setup-node@v3with:node-version: 18.18.0# 3. 安裝依賴并構建- name: Install and Buildrun: |npm i -g pnpmpnpm run initpnpm run docs:buildenv:NODE_OPTIONS: '--max_old_space_size=4096'# 4. 部署到 GitHub Pages- name: Deployuses: JamesIves/github-pages-deploy-action@4.1.3with:BRANCH: gh-pagesFOLDER: docs/.vuepress/distACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}

---

3. 配置詳解

① 觸發條件

on:push:branches:- develop

當 develop 分支有新提交時，工作流就會運行。
如果你希望直接監聽 master，改成 - master 即可。

---

② 檢出代碼

uses: actions/checkout@v2.3.1

把當前分支的代碼拉取到 GitHub 提供的運行環境中，方便后續構建。

---

③ 安裝 Node.js

uses: actions/setup-node@v3
with:node-version: 18.18.0

指定 Node.js 版本，保證構建環境和本地一致，避免版本差異引起的 bug。

---

④ 構建 VuePress

npm i -g pnpm
pnpm run init
pnpm run docs:build

• 全局安裝 pnpm
• 執行 init（通常是安裝依賴的命令）
• 執行 VuePress 的構建命令，生成靜態文件到 docs/.vuepress/dist

這里額外加了：

env:NODE_OPTIONS: '--max_old_space_size=4096'

調高 Node.js 最大內存限制，避免文檔量大時構建內存不足。

---

⑤ 部署到 GitHub Pages

uses: JamesIves/github-pages-deploy-action@4.1.3

這是社區常用的部署 Action，可以自動將構建后的靜態文件推送到指定分支（這里是 gh-pages）。

參數：

• BRANCH：目標分支（GitHub Pages 會從這里拉取文件）
• FOLDER：靜態文件目錄
• ACCESS_TOKEN：有推送權限的 Token（放在倉庫的 Secrets 中）

---

4. 配置 ACCESS_TOKEN

為了讓 GitHub Actions 能推送到 gh-pages 分支，我們需要一個具有寫權限的 Personal Access Token。

步驟：

1. 打開 GitHub → Settings → Developer settings → Personal Access Tokens

2. 點擊 Generate new token

3. 勾選 repo 權限，生成 Token

4. 回到倉庫 → Settings → Secrets and variables → Actions
   點擊 New repository secret：

   • Name：ACCESS_TOKEN
   • Value：剛剛生成的 Token

5. 保存

---

5. 流程示意

---

6. 效果

現在只需要：

git add .
git commit -m "更新文檔"
git push origin develop

GitHub Actions 會在云端幫你完成：

1. 構建文檔
2. 部署到 GitHub Pages
3. 幾十秒后網站自動更新 🎉

---

7. 總結

這次我們實現了：

• 監聽分支變化
• 云端構建 VuePress
• 自動部署到 GitHub Pages

整個過程無需手動切分支、build、推送，大幅提高了效率。

---

如果你覺得這篇文章對你有幫助，歡迎點贊、收藏或留言交流 😊