使用github action來實現純前端網頁自動部署至gh-page

鼻爾蓋茲

2021/11/25閱讀時間約 5 分鐘

使用github action來實現純前端網頁自動部署至gh-page封面圖

對於前端工程師來說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