隨機分配問卷？讓 Github Pages 幫你吧！
本文目標是用 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 上幫專案加星星也可以喔~甚至是想要小小贊助一下我也可以！那麼我們下次有機會再見~
4會員
16內容數
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...