隨機分配問卷？讓 Github Pages 幫你吧！
閱讀時間約 3 分鐘
本文目標是用 gh-pages 來部署靜態網頁達成需求
前言
最近有人剛好有兩個版本的問卷，需要在使用者進入時隨機給予其中一份。他也找了程式碼，只差部署到一個地方來做隨機派發的需求。
簡單看一下發現其實用 Github Pages 就能達成（單純的前端而已），可是程式碼內容比較不符個人習慣，所以就改寫了一下。想說都寫了，為了廣大的莘莘學子就再寫一篇簡易教學吧。
需求
先來講一下執行此專案必備的需求：
- Github 帳號（如果想在其他地方部署也 OK，請自行拿程式碼修改後去做對應操作部署吧）
- 願意嘗試的心
程式碼儲存庫（repository）
既然是用 Github Pages 那當然是 Github 的 repo 囉：
開始吧
先 fork 吧
請到剛剛的 repo 網址，點右上角的 fork 複製一份到自己的帳號底下：
填入自己要隨機分派的網址們
到剛 fork 到自己帳號底下的 url.js 檔案中，填入你要的網址：
const urls = [
'https://github.com/hms5232',
'https://gitlab.com/hms5232'
];
如上方程式碼，請用逗號分隔每個要隨機前往的網址並用引號包住（陣列中放字串的用法）。
如果不會 clone、編輯、commit + push 的同學，可以直接用 Github web 介面操作。
先點開剛剛 fork 好的 repo，接著點開 url.js 並點鉛筆圖案（如下圖）
之後會進入編輯畫面，就依照說明填入網址們即可。
編輯完檔案後請記得 commit（對 git 不熟悉的同學，請想像成一個存檔快照的感覺）。
設定 Github Pages
回到剛 fork 好的 repo，上面有一排 Tab，請選擇 Settings→Pages，接著將 Source 指定為 main 分支（或是剛剛過程中，你有自己開的新分支），檔案路徑（第二個選單）設定為 /root。
按下 Save 後，沒問題的話就會開始跑建置 Github Pages 的流程，成功的話就會出現提示訊息：
看到上圖，就可以去看看部署的 Github Pages 有沒有成功啦。
本文專案 repo 部署起來的樣子可至下面網址參考：
※部署通常會要一點時間才能部署完全。如果發現網站不如預期運作，建議等三分鐘或清除快取後再重新瀏覽。
參考資料
結尾
雖然是一個非常簡單的小專案，但要寫成一篇教學文也是不容易呢。感謝大家的收看，如果這篇文章有幫助，請大家給我拍手、按讚、分享給其他有需要的人，或是在 Github 上幫專案加星星也可以喔~甚至是想要小小贊助一下我也可以！那麼我們下次有機會再見~
2會員
12內容數
留言0
查看全部
