Vuepress + GitHub Actions 實現部落格自動部署！

村雨遙發表於2021-08-26

這是我參與8月更文挑戰的第 26 天，活動詳情檢視：8月更文挑戰

前言

正常我們利用 Vuepress 搭建一個文件部落格之後，往往都是通過如下步驟來部署一篇部落格：

首先寫文章；
寫完文章之後生成靜態檔案，這裡一般使用的是 npm run build 命令，但也有使用 yarn build 的；
將我們生成的靜態檔案推送到 Github Pages；
訪問我們對應的網址，檢視我們的推送是否成功。

上述步驟看似簡單，但一旦文件過多時，生成靜態檔案就十分耗費時間。這時候我們就想了，有不有一種方法，能夠幫我們自動構建靜態檔案然後部署到 Github Pages 上呢。剛好，Github 官方提供了這個一個工具：Github Actions。利用它，我們就能夠將重心轉移到創作之後，每次創作之後推送到遠端之後它就會自動後續工作，接下來我們就來看看如何利用 Github Action 實現自動部署我們的部落格。

生成 Token

要部署 Actions，那麼它就需要有能夠操作我們倉庫的許可權，因此需要提前設定個人訪問令牌（Github personal access）。設定方法如下：進入 Github 後，點選我們的頭像，然後依次進入 Settings -> Developer settings -> Personal access tokens，對應地址就是 Token 生成。然後點選右上方的 Generate new token，接著輸入 token 的名字，這個名字可以隨意，不過還是推薦根據它的用途來命名。然後選 Expiration，也就是這個 Token 的有效期，如果我們要長期用，建議選為 No expiration，意思就是無期限。最後就是選許可權，一般來講這裡選 repo 就夠了，但是如果你不確定，那就全都選上也行。然後點選 Generate Token，會生成一個令牌，注意這裡它只會出現一次，一旦重新整理該網頁就不見了，所以最好把它複製到你的備忘錄備份一下，而且我們待會也是需要用到這個 Token 的。

設定 Secrets

進入你存放你部落格原始碼的專案，然後以此點選 Settings -> Secrets，接著點選右上角的 New repository secret，新建一個 Secret。這裡的名字要命名為 ACCESS_TOKEN，然後 Value 就是我們上一步中所生成的 Token。

編寫 Action

進入專案的的 Actions 選項，然後新建一個 workflow（我是因為已經建立過了，所以才是下面的介面），預設新建的 workflow 名字是 main.yml 這個可以自己自定義，根據你自己喜好來就行了。

生成後的 main.yml 位於專案的 .github/workflows 目錄下。

接下來是在 main.yml 中填入如下資訊即可，具體例項的可以參考我的部落格例項：

github.com/cunyu1943/c…

# name 可以自定義
name: Deploy GitHub Pages

# 觸發條件：在 push 到 main/master 分支後，新的 Github 專案 應該都是 main，而之前的專案一般都是 master
on:
  push:
    branches:
      - main

# 任務
jobs:
  build-and-deploy:
    # 伺服器環境：最新版 Ubuntu
    runs-on: ubuntu-latest
    steps:
      # 拉取程式碼
      - name: Checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false

      # 生成靜態檔案
      - name: Build
        run: npm install && npm run docs:build

      # 部署到 GitHub Pages
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # 也就是我們剛才生成的 secret
          BRANCH: gh-pages # 部署到 gh-pages 分支，因為 main 分支存放的一般是原始碼，而 gh-pages 分支則用來存放生成的靜態檔案
          FOLDER: docs/.vuepress/dist # vuepress 生成的靜態檔案存放的地方
複製程式碼