在使用之前，我們瞭解一下什麼是 Github Actions。
在 GitHub Actions 的倉庫中自動化、自定義和執行軟體開發工作流程。 您可以發現、建立和共享操作以執行您喜歡的任何作業（包括 CI/CD），並將操作合併到完全自定義的工作流程中。
點選開始入門如果打不開的小夥伴按照一下步驟一起來開始使用簡單的。
- 如果 .github/workflows 目錄不存在，請在 GitHub 的倉庫專案中建立此目錄。
- 在 .github/workflow 目錄中，建立一個名為 github-actions-demo.yml 的檔案。(檔案命名隨便，字尾必須為
.yml) - 將以下 YAML 內容複製到 github-actions-demo.yml 檔案中：
name: GitHub Actions Demo
on: [push]
jobs:
Explore-GitHub-Actions:
runs-on: ubuntu-latest
steps:
- run: echo "? The job was automatically triggered by a ${{ github.event_name }} event."
- run: echo "? This job is now running on a ${{ runner.os }} server hosted by GitHub!"
- run: echo "? The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}."
- name: Check out repository code
uses: actions/checkout@v3
- run: echo "? The ${{ github.repository }} repository has been cloned to the runner."
- run: echo "?️ The workflow is now ready to test your code on the runner."
- name: List files in the repository
run: |
ls ${{ github.workspace }}
- run: echo "? This job's status is ${{ job.status }}."
-
提交這個檔案，並且推送到遠端倉庫去。
-
你將會在遠端倉庫的
Actions中看到執行的日誌。
-
現在你已經掌握了一個簡單的
自動化工作流程。
react,vue 專案提交程式碼自動更新 GitHub Pages
若你是一個前端開發或者喜歡自己開發網站，你肯定想擁有一個屬於自己的網站。把自己的專案或者部落格，放在網路上，任何人都可以看見。接下來，是使用 前端框架 專案提交程式碼自動更新pages。
在使用之前
請檢查一下資訊:
- 確保有一個新的分支專門用來存放
Pages專案的程式碼。
git checkout -b gh-pages #建立 gh-pages分支 並切換到 gh-pages
git push origin gh-pages:gh-pages #把本地分支推送到 遠端倉庫
- Github 倉庫是否開啟
GitHub Pages
在瀏覽器開啟你的 Github 倉庫, 找到 Settings 選項 點選進入，在左側尋找到 Pages 欄目，點選之後，出現一個 Source 標題，下面有個 選擇框，當前是 None，表示你還未開啟Pages功能。點選 None 選擇框 選擇你 建立的分支，這裡選擇 剛剛建立的gh-pages，選擇完之後 還有個資料夾選擇，意思是這個分支的資料夾作為入口來顯示你的專案，我們就按照預設的root/目錄就行了，點選 save 即可。點選完成之後會有個提示：
Your site is ready to be published at
https://{username}.github.io/{store_name}/
說明你的pages開啟成功，不過點選進去是 404 ，因為你gh-pages分支還沒資源所以找不到訪問資訊。
開始部署前端框架(react)專案
在完成了上面的步驟之後，開始編寫Actions。你可以閱讀以下文件：觸發工作流程
- 在當前專案程式碼執行所在的分支，建立
.github資料夾，再在.github資料夾下建立workflows資料夾，在此目錄下新建.yml格式檔案。
├─ .github #資料夾
└─ workflows #資料夾
└─ autoUpdatePages.yml # actions檔案 字尾.yml
- 編寫
autoUpdatePages.yml檔案
程式碼如下：
name: update pages #名稱 隨意
on: # 觸發條件
push: # 當推送的時候
branches: [master] # 分支 可以有多個 且為 master 觸發
paths: ["src/**"] # 且 推送的檔案在此目錄下 觸發
jobs: #要執行的任務
build: #任務名 隨意
runs-on: ubuntu-latest # 執行的機器環境 可以是 linux 等等 具體請查閱文件
# 用到的 node 版本
strategy:
matrix:
node-version: [12]
# 執行步驟
steps:
# 一些檢查 輸出
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
# 開始 打包
- name: Build
# run 下面 是需要執行的命令列 按照命令列步驟執行 先安裝依賴 再 打包 你也可以自定義
run: |
npm install
npm build
# 完成打包之後 使用 github-pages-deploy-action 去自己把打包後的產物釋出上去
- name: Deploy ?
uses: JamesIves/github-pages-deploy-action@v4.3.0
with:
branch: gh-pages # 釋出到哪個分支？
folder: build # 打包的檔案目錄
clean-exclude: | # 忽略清除的檔案 可以是檔名路徑等 每次釋出前都會清除所有檔案所以需要 遮蔽一些檔案或者目錄不要清除。
.gitignore
-
完成以上檔案之後，推送到遠端倉庫即可。
-
注意觸發條件。