隨機分配問卷?讓 Github Pages 幫你吧!

hms5232
Sep 21, 2021

本文目標是用 gh-pages 來部署靜態網頁達成需求

前言

最近有人剛好有兩個版本的問卷,需要在使用者進入時隨機給予其中一份。他也找了程式碼,只差部署到一個地方來做隨機派發的需求。

簡單看一下發現其實用 Github Pages 就能達成(單純的前端而已),可是程式碼內容比較不符個人習慣,所以就改寫了一下。想說都寫了,為了廣大的莘莘學子就再寫一篇簡易教學吧。

需求

先來講一下執行此專案必備的需求:

  1. Github 帳號(如果想在其他地方部署也 OK,請自行拿程式碼修改後去做對應操作部署吧)
  2. 願意嘗試的心

開始吧

先 fork 吧

請到剛剛的 repo 網址,點右上角的 fork 複製一份到自己的帳號底下:

Github fork button(是說原本的叉子動畫改掉了好可惜)

填入自己要隨機分派的網址們

到剛 fork 到自己帳號底下的 url.js 檔案中,填入你要的網址:

const urls = [
'https://github.com/hms5232',
'https://gitlab.com/hms5232'
];

如上方程式碼,請用逗號分隔每個要隨機前往的網址並用引號包住(陣列中放字串的用法)。

如果不會 clone、編輯、commit + push 的同學,可以直接用 Github web 介面操作。

先點開剛剛 fork 好的 repo,接著點開 url.js 並點鉛筆圖案(如下圖)

點鉛筆,開編輯

之後會進入編輯畫面,就依照說明填入網址們即可。

編輯完檔案後請記得 commit(對 git 不熟悉的同學,請想像成一個存檔快照的感覺)。

填寫 commit 訊息然後按下綠色按鈕就完成這部分啦

設定 Github Pages

回到剛 fork 好的 repo,上面有一排 Tab,請選擇 Settings→Pages,接著將 Source 指定為 main 分支(或是剛剛過程中,你有自己開的新分支),檔案路徑(第二個選單)設定為 /root

Github pages 設定畫面
repo 設定 gh-pages 畫面

按下 Save 後,沒問題的話就會開始跑建置 Github Pages 的流程,成功的話就會出現提示訊息:

成功設定 Github Pages 的提示訊息
成功設定 gh-pages 訊息

看到上圖,就可以去看看部署的 Github Pages 有沒有成功啦。

本文專案 repo 部署起來的樣子可至下面網址參考:

https://hms5232.github.io/random-survey/

※部署通常會要一點時間才能部署完全。如果發現網站不如預期運作,建議等三分鐘或清除快取後再重新瀏覽。

參考資料

結尾

雖然是一個非常簡單的小專案,但要寫成一篇教學文也是不容易呢。感謝大家的收看,如果這篇文章有幫助,請大家給我拍手、按讚、分享給其他有需要的人,或是在 Github 上幫專案加星星也可以喔~甚至是想要小小贊助一下我也可以!那麼我們下次有機會再見~

https://co-fi.com/hms5232

--

--