使用github action來實現純前端網頁自動部署至gh-page
閱讀時間約 5 分鐘
對於前端工程師來說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的按鈕點下去，別擔心預設的內容我們都不需要。
隨意選一個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。
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
把 side project 放到 GitHub 上，並使用前端部署平台
安裝程式 → 下載範本 → 列出專案的功能清單 → 開始開發
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增
base: "/Cart/" (/放自己的專案名稱/)
build: {outDir: "docs"},
接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
今天學習Git 的第一步：
取得與建立項目 Getting and Creating Projects [1]。
之前提到「儲存庫 Repository」就是儲存所有「檔案 File」的地方。
在Git 的邏輯裡，儲存庫是要儲存所有的「快照 Snapshots」。
什麼是快照
1. Outline
Takeaway
Setting up Git and verifying installation
Configuring your Git username and email
Initializing a new Git repository
Stagin
本篇文章介紹如何使用Git Bash進行版本控制操作，包括創建repository、查看狀態、歷程以及加入暫存和提交暫存等操作。透過基本的Git指令，您可以更深入地瞭解Git工具的使用方法。
※ 需要做版本備份時：
git init：初始化此資料夾，由git 開始追蹤版本控制。
git add：將檔案加入到暫存區。
git commit：把暫存區的內容提交到儲存庫。
git status：查看目前所有檔案的狀態。
git log：查看過去所有commit的記錄。
※ 需要做修
本篇將分享VSCode工作區的設定與功能，包括如何將資料夾新增到工作區、如何存檔、以及外掛推薦。這些小技巧能夠幫助您在使用 rushjs 能更輕鬆地管理 monorepo，提高工作效率。
※ Git(三)
什麼是 staging area？
在 Git 中，staging area是暫存區的意思，也被稱為索引（index）。透過一個git add 指令把檔案從工作目錄移至暫存區。再透過一個git commit 指令把暫存區的內容移至儲存庫。
當多人協作時你要開發個功能，但不
※ 關於Git (二)
請寫下從 Github 上複製一個專案下來，做一次遞交，然後推上去會用到的所有 git 指令。
複製專案（Clone） markdown-here：
git clone https://github.com/adam-p/markdown-here.git
如果在訊息
把 side project 放到 GitHub 上，並使用前端部署平台
安裝程式 → 下載範本 → 列出專案的功能清單 → 開始開發
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增
base: "/Cart/" (/放自己的專案名稱/)
build: {outDir: "docs"},
接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
今天學習Git 的第一步：
取得與建立項目 Getting and Creating Projects [1]。
之前提到「儲存庫 Repository」就是儲存所有「檔案 File」的地方。
在Git 的邏輯裡，儲存庫是要儲存所有的「快照 Snapshots」。
什麼是快照
1. Outline
Takeaway
Setting up Git and verifying installation
Configuring your Git username and email
Initializing a new Git repository
Stagin
本篇文章介紹如何使用Git Bash進行版本控制操作，包括創建repository、查看狀態、歷程以及加入暫存和提交暫存等操作。透過基本的Git指令，您可以更深入地瞭解Git工具的使用方法。
※ 需要做版本備份時：
git init：初始化此資料夾，由git 開始追蹤版本控制。
git add：將檔案加入到暫存區。
git commit：把暫存區的內容提交到儲存庫。
git status：查看目前所有檔案的狀態。
git log：查看過去所有commit的記錄。
※ 需要做修
本篇將分享VSCode工作區的設定與功能，包括如何將資料夾新增到工作區、如何存檔、以及外掛推薦。這些小技巧能夠幫助您在使用 rushjs 能更輕鬆地管理 monorepo，提高工作效率。
※ Git(三)
什麼是 staging area？
在 Git 中，staging area是暫存區的意思，也被稱為索引（index）。透過一個git add 指令把檔案從工作目錄移至暫存區。再透過一個git commit 指令把暫存區的內容移至儲存庫。
當多人協作時你要開發個功能，但不
※ 關於Git (二)
請寫下從 Github 上複製一個專案下來，做一次遞交，然後推上去會用到的所有 git 指令。
複製專案（Clone） markdown-here：
git clone https://github.com/adam-p/markdown-here.git
如果在訊息