GitHub Actions自動部署Vue專案至GitHub Page
Published in
Mar 5, 2024
每次push一次更新版本，就要手動再推gh-pages上去，實在太麻煩了！會用GitHub Actions就能夠自動化這些步驟，不用再手動部署，也不會再忘記要部署了！這是什麼懶人福音，難怪有人說越懶越能當個好的軟體工程師。
設定token
從個人資料中的Setting點進去，找到Developer Setting，設定Personal token。
原本就有token的話，就編輯token權限，沒有的話就新增，總之要把workflow打勾就對了：
之後在yml檔中存取這個token的語法是：${{ secrets.ACCESS_TOKEN }}
Repo中的GitHub Actions
先找到你預計要部署的repo，點選Actions，新增一個自己的workflow。
下面有很多別人寫好的workflow可以用，之後有需要可以直接引用。
設定workflow的檔案是一種yml檔：
內容如下：
# workflow的名字
name: deploy
# 當以下事件發生時，觸發
on:
# 這邊設定的是：push/pullrequest到main時即觸發
push:
branches:
- main
pull_request:
branches:
- main
# 有加這行可以手動觸發actions
workflow_dispatch:
# 觸發內容
jobs:
# 這個workflow有個job叫做build
build:
# 這個job要run在ubuntu上
runs-on: ubuntu-latest
# job的步驟要做些什麼咧
steps:
# 1. 專門for node.js的actions，記得依node.js版本更新其後version
- uses: actions/checkout@v4
# 把vue內容build起來
- name: Install & Build # 執行
run: |
npm install
npm run build
# 2. deploy
- name: Deploy
# 別人的actions拿來借用
uses: JamesIves/github-pages-deploy-action@releases/v4
with:
token: ${{ secrets.ACCESS_TOKEN }} # Settings > Secret 建立的 ACCESS_TOKEN，推同個 repo 的話可以不需要
BRANCH: gh-pages # deploy 到 gh-pages 這個分支
FOLDER: dist # build 後的資料夾簡單來說yml檔分為三大區域：
- name：這個workflow的名字
- on：觸發條件
- jobs：觸發內容
-steps：觸發步驟
1. 先把vue build起來，使用actions/checkout@v4，記得依據不同的node.js版本來調整version，不然deploy的時候會報錯！
2. 把build出來的內容部署至github page
接著將這個yml commit上去並push至main，就會自動觸發這個GitHub Actions，在Actions分頁中可以看到有沒有執行成功！
真是太方便拉！
