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

創(chuàng)建部署的deploy.yml文件，在項目的根目錄下面

.github\workflows\deploy.yml

完整的代碼：使用的是pnpm進行依賴安裝。

name: 部署VitePresson:push:branches:- docs # 這段是在推送到 docs 分支時觸發(fā)該命令jobs:build-and-deploy:runs-on: ubuntu-lateststeps:- name: Checkout codeuses: actions/checkout@v2with:ref: docs # 這一步檢查 docs 代碼- name: Setup Node.js and pnpmuses: actions/setup-node@v3with:node-version: '20.10.0' # 設置 nodejs 的版本- name: Install pnpmrun: npm install -g pnpm # 全局安裝 pnpm- name: Install dependenciesrun: pnpm install # 使用 pnpm 安裝依賴- name: Build VitePressrun: pnpm run docs:build # 這里是打包 vitepress 命令- name: Deploy to GitHub Pagesuses: peaceiris/actions-gh-pages@v3with:github_token: ${{ secrets.PAT_TOKEN }} # 這一步很重要，單獨看下面的大步驟，主要是用來給該腳本一些倉庫權限publish_dir: .vitepress/dist # 指定該文件夾中的 dist publish_branch: gh-pages # 推送到關聯(lián)倉庫的 gh-pages 分支dotfiles: true  # 包括在提交中，即使被 .gitignore 文件忽略

這段 YAML 文件定義了一個 GitHub Actions 工作流，用于在推送到 docs 分支時構建和部署 VitePress 項目。

• on: 定義觸發(fā)工作流的事件，這里是在推送到 docs 分支時觸發(fā)。

• jobs: 定義工作流中的任務。

  • build-and-deploy: 任務的名稱，表示構建和部署。

    • runs-on: 指定任務運行的操作系統(tǒng)，這里是 ubuntu-latest。

    • steps: 定義任務的一系列步驟。

      • name: 步驟的名稱。

      • uses: 使用的 GitHub Action。

      • with: 配置項，用于傳遞參數(shù)給 Action。

      • run: 執(zhí)行的腳本命令。

其中，具體步驟解釋如下：

1. 檢出代碼：使用 actions/checkout Action 將代碼檢出到工作目錄。

2. 設置 Node.js 和 pnpm：使用 actions/setup-node Action 設置 Node.js 和安裝 pnpm。

3. 安裝 pnpm：全局安裝 pnpm。

4. 安裝依賴：使用 pnpm 安裝項目依賴。

5. 構建 VitePress：運行 pnpm 命令構建 VitePress 項目。

6. 部署到 GitHub Pages：使用 peaceiris/actions-gh-pages Action 部署生成的靜態(tài)文件到 GitHub Pages。配置中包括 GitHub Token、發(fā)布目錄、發(fā)布分支以及是否包括 dotfiles（即使在 .gitignore 中也提交）等。

倉庫說明

以下創(chuàng)建私人token和pages詳細的步驟截圖

如果看不清楚，可以右鍵打開到新窗口預覽

github_token: ${{ secrets.PAT_TOKEN }}創(chuàng)建

1. 先點擊個人頭像，進入設置頁面
   

2. 進入 Developer Settings 設置
   

3. 生成個人token Personal access tokens (classic)
   

4. 設置token
   

5. 保存生成的token
   

6. 進入倉庫添加該倉庫的token
   
   
   

4. 創(chuàng)建githubpages