對於前端工程師來說github上的gh-page是一個很適合放置自己作品的地方
尤其適合想要練練手感的時候可以方便地展示成果的地方
在過去使用手動commit至gh-page的分支上，或是使用deploy.sh檔來部署，對於我這種懶人來說都是多一個步驟，時常會覺得麻煩
現在能夠透過github action的功能實現推上github時自動部署至專案gh-page的分支上，設定完成以後非常適合懶人使用，遵循此篇文章設定即可輕鬆完成設定附上範例專案 搭配閱讀
設定自動部署
設定專案部署時的base url
使用此github action會預設部署至這個url底下
https://你的帳號.github.io/專案名稱/所以在部署時需要設定專案的base url，以vite部署為例需要在vite.config.js中設定
base: process.env.NODE_ENV === 'production'
? '/該專案名稱/'
: '/',
設定專案.yaml檔
前往專案的Action頁面
你的專案沒有設定過github action所以頁面應該是長得跟我的圖差不多
隨意選一個set up this wordflow的按鈕點下去，別擔心預設的內容我們都不需要。
點擊按鈕後github會提供你一個預設的模板內容。
將裡面預設的內容全部清除，將下面的內容貼上。
name: Build and Deploy
on: [push]
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.4
with:
branch: gh-pages
folder: dist
檔名看自己要不要修改一下，如果不需要修改的話直接點選右上角的commit按鈕commit上去。
開啟github page功能
由github action自動推上gh-page分之後github會預設開啟該專案的github page。
如果遇到沒有開啟的話可以從專案的setting頁面中選擇左邊的page頁籤進入設定github page的地方
在這裡選擇gh-page分支後點選save即可手動開啟github page功能
在部署時使用環境變數
如果要在專案中使用環境變數需要先設定專案的Actions secrets資料並且稍微修改一下.yaml檔的內容
設定secrets
前往專案的setting -> secrets頁籤，直接點選New repository secret新增專案的環境變數。
新增的方式很簡單，Name的欄位對應環境變數的key，value的欄位對應value，直接複製貼上即可。
到這裡就設定完部署時的環境變數，接著我們要設定.yaml的地方引用變數。
修改.yaml檔的內容
將.yaml檔的內容修改成以下內容
name: Build and Deploy
on: [push]
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:
環境變數key : ${{ secrets.環境變數key }}
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@4.1.4
with:
branch: gh-pages
folder: dist
主要是在run底下設定env，設定方式是專案部署的環境變數key對應先前在secrets裡的環境變數key。
