使用 Github Actions 部署 VuePress 部落格

lastknight發表於2021-05-31
GithubVue

隨著我 VuePress 部落格中的東西越來越多，每次我打包好專案然後上傳到 Github 上需要好一會兒時間，之前在一些文章中知道 Github Actions 可以幫我自動部署專案，正好今天嘗試嘗試。

在使用 Github Actions 以前，部署過程是這樣的：

  • 寫文章
  • 生成靜態檔案
  • 將靜態檔案部署到 Github Page 上

使用了 Github Actions 後，過程變為了：

  • 寫文章
  • 提交文章到 Github 上

配置檔案

接著我們介紹如何使用這一利器。首先你需要在你的專案下新建 .github/workflows/ 資料夾，接著在 workflows 資料夾下新增 xxx.yml 檔案，這個檔名隨意，但是必須是 YAML 檔案，比如我新增檔名為 deploy.yml，給出我的配置內容(去掉了一些個性化的配置)

name: Build and Deploy
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout ?️
        uses: actions/checkout@v2.3.1

      - name: Install and Build ? 
        run: |
          npm install
          npm run build

      - name: Deploy ?
        uses: JamesIves/github-pages-deploy-action@4.1.3
        with:
          BRANCH: gh-pages
          FOLDER: docs/.vuepress/dist
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
複製程式碼

當你向 Github 提交程式碼時，它會自動的檢測 .github/workflows/ 目錄，如果有配置的話，就會根據你的配置 workflow 自動部署專案。

從上面的配置看，主要分為三個部門：

  • name：這個 workflow 的名稱，自己隨便取

  • on：觸發條件

    on:
  push:
    branches:
      - master
複製程式碼

    上述表示當我們向 master 分支 push 時就會觸發該 workflow

  • jobs：規定要執行的任務，例如上面我們定義了一個任務 build-and-deploy，每個任務包含如下配置

    • runs-on：執行所需要的虛擬機器環境，Github 為我們提供瞭如下環境

      • ubuntu-latest，ubuntu-18.04或ubuntu-16.04
      • windows-latest，windows-2019或windows-2016
      • macOS-latest或macOS-10.14

      這裡我們選擇了 ubuntu-latest

    • steps：任務執行的步驟

接著我們對我們執行的步驟進行說明，我們的步驟包含三步，第一步是拉取主分支的程式碼

- name: Checkout ?️
  uses: actions/checkout@v2.3.1
複製程式碼

第二步，執行兩個命令 npm install 與 npm run build

- name: Install and Build ? 
  run: |
    npm install
    npm run build
複製程式碼

第三步，將 生成的靜態資料夾部署到 gh-pages 分支上

- name: Deploy ?
  uses: JamesIves/github-pages-deploy-action@4.1.3
  with:
    BRANCH: gh-pages
    FOLDER: docs/.vuepress/dist
    ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
複製程式碼

配置金鑰

使用 Github Actions 是需要 ACCESS-TOKEN，既然都已經會使用 Github 了，就肯定知道這個東西怎麼生成了，如果不會，請求參照官方文件。

我們需要在倉庫的 Setting 中選擇 Secrets

image-20210531185033956

點選右上方的 New repository secret

image-20210531185129280

Name 必須寫為 ACCESS_TOKEN，Value 就是你的 token，填寫完畢點選 Add secret，如果填寫沒有問題的話，點選之後就會提示新增成功。

每次當你將 Vuepress 專案提交到 Github 上的時候，Github 就會自動幫你部署專案。

image-20210531185615412

在 Actions 的這個選項中可以看到專案的部署情況，上面可以看到我嘗試了三次，第三次成功了，前兩次是踩坑，下面就介紹了我踩的兩次坑。

踩坑

在 VuePress 官網上面，給出的構建指令碼命令是

npm run docs:build
複製程式碼

我覺得麻煩，改為了 npm run build，所以第一次執行的時候，就提示我沒有這個指令碼

image-20210531190036475

我改過來了，所以如果你構建的指令碼命令和我的不一致的話，還是要改的。

另一個坑，上面配置好了以後，我將我的 VuePress 部落格提交到 Github，但是執行一段時間之後爆出了錯誤

image-20210531190224283

從錯誤的型別看好像是超記憶體了，然後經過我的搜尋，在 Github 的一個 issue 中找到了解決辦法，新增下面的環境變數

env:
  NODE_OPTIONS: '--max_old_space_size=4096'
複製程式碼

更改後的配置檔案如下

name: Build and Deploy
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout ?️
        uses: actions/checkout@v2.3.1

      - name: Install and Build ? 
        run: |
          npm install
          npm run build
        env:
          NODE_OPTIONS: '--max_old_space_size=4096'

      - name: Deploy ?
        uses: JamesIves/github-pages-deploy-action@4.1.3
        with:
          BRANCH: gh-pages
          FOLDER: docs/.vuepress/dist
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
複製程式碼

在最後給出我的個人部落格Coder

相關文章