大體介紹
本文對github actions部署前端項目做一個簡單的總結，總體來說，我感覺用它想要部署一個前端項目，可以說非常簡單，簡單得令人震驚🤯。但是高度的封裝，會讓人沒有那種以前travis書寫shell的暢快體驗感。
不過這也是github actions的初衷所在：開發者不用自己寫很多腳本，而是直接拿別人寫好的action，經過自己的搭配組合，形成自己項目的腳本。 所以從其誕生來說，就是為了共享而生，如果你無法忍受你的腳本里出現什么Bob、Nancy、Jack這樣的字眼，選擇自己手擼，那也就意味着你放棄了github actions的優勢。
所以，這是一種天生的拿來主義，你可以在市場marketplace里自由挑選，搭配組合。
給項目一個token☝️
首先我們需要給即將開啟github actions的項目一個token，這步操作的目的是給shell腳本的一些行為授權，正所謂沒有規矩不成方圓，試想一下，假設有很多人都能向一個項目推送代碼，假設某個小子突然有一天推送了一個腳本，這個腳本的目的是為了刪除項目，然后項目真的被刪除了，其他人都沒得玩了。
所以這里必須要有一個授權的過程：只有該github所有者的做了某一步只能他自己完成的操作，給項目頒發了一個具有某些權限的令牌（權限完全由所有者配置），該項目的腳本拿到這個令牌，才能做一些權限內的事情。
首先進入github主頁-->Settings-->Developer settings-->Personal access tokens-->Generate new token生成token，注意這里會讓你輸入密碼，這就是為什么說這個授權的操作只能由github所有者本人來完成。
生成token時，你可以自由配置這個token所擁有的權限，勾選☑️得越多，這個token權限越高，像一個持續集成部署的token，我並不希望它擁有過多的權限，所以只勾選了repo項目基礎權限和workflow工作流權限，足矣。
生成token后，復制它，然后切換到你希望開啟github actions的項目目錄中，依次點擊該項目的Settings-->Secrets-->New Secrets。 
將剛剛復制的token粘貼進去，並取一個名字，保存。一般這種大家都很喜歡叫ACCESS_TOKEN。當然喜歡叫其他的名字也可以，但是后面的腳本也要跟着改。 
`
配置項目路徑
關於如何創建一個react/vue項目，這里不再贅述，因為這確實屬於非常基礎的操作了。我們打開項目的package.json,配置一下項目地址。這一步的操作是為了確定✅項目的根目錄，項目在加載js，css等資源文件時能引用到正確的路徑。
格式為：https://[你的github用戶名].github.io/[你的項目名]。對照着圖中改一下即可。
為項目開啟actions
將上一步配置好的項目路徑推送到遠程，進入項目主頁，可以看到一個很醒目的Actions。
點擊Actions-->set up a workflow yourself，就會進入到一個yml文件的編輯頁面，這個腳本默認放在項目根目錄/.github/workflows/下面，然后書寫以下腳本：
name: CI
on:
push:
branches:
- master
jobs:
main:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
with:
persist-credentials: false
# react項目為npm run-script build，vue項目改為npm run build
- name: Install and Build
run: |
npm install
npm run-script build
# react項目的FOLDER為build，vue項目改為dist
- name: Deploy
uses: JamesIves/github-pages-deploy-action@releases/v3
with:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
BRANCH: gh-pages
FOLDER: build
首先我們形成一個基本的觀念，對於一個workflow來說，從大到小可以按以下划分： workflow（最大） --> job --> step --> action（最小）
然后依次解釋一下這個shell腳本。
name。這個工作流的名稱，沒什么好說的。
name: CI
on。定義工作流觸發的時機，這里表示master分支有push事件時，本工作流會觸發。
on:
push:
branches:
- master
jobs。表示任務，可以有多個任務，注意⚠，如果不特殊指定，️多個任務默認是同時執行的，我們可以通過設定needs來控制執行順序，如下面的shell腳本,表示當first job執行完后才執行second job。
jobs:
first_job:
second_job:
needs: first_job
而對於當前項目來說，拆分多個job感覺有點沒必要，因為一共也就才那么幾行shell腳本，我們寫在一個job里面就好。
runs-on，指定這個工作流會運行在哪個虛擬機，可選windows、macos、ubuntu，除了辣雞windows，其他兩個都可以，默認的是ubuntu。
runs-on: ubuntu-latest
steps表示當前任務下的步驟，一個或多個都可以，從上到下依次執行。每個step可指定以下字段：
name步驟名run步驟執行的命令env步驟所需環境uses步驟使用的actions,可以是一個或多個
steps:
- name: Checkout
uses: actions/checkout@v2
with:
persist-credentials: false
# react項目為npm run-script build，vue項目改為npm run build
- name: Install and Build
run: |
npm install
npm run-script build
# react項目的FOLDER為build，vue項目改為dist
- name: Deploy
uses: JamesIves/github-pages-deploy-action@releases/v3
with:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
BRANCH: gh-pages
FOLDER: build
這里首先第一步為Checkout，用到了一個checkout的action，其作用是拉取你的代碼；
第二步為Install and Build,其作用就是安裝依賴、打包。
第三步為Deploy，用到了一個名叫JamesIves寫的action，我們傳入一些基本配置，比如權限鑰匙🔑ACCESS_TOKEN，要推送的分支BRANCH，取打包好的靜態文件目錄FOLDER。
注意⚠️：shell腳本文件是嚴格縮進的，因為它需要根據空格個數來區分數據結構。如果你的腳本運行報錯了，首先檢查一下shell的縮進是否正確。
寫在最后
在master分支提交腳本后，等待工作流⌛️跑完（工作流流水線和日志可點擊項目的Actions入口進入查看）。
打開之前在package.json文件書寫homepage地址，即可看到如下效果：
