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

更新 發佈閱讀 4 分鐘
本文目標是用 gh-pages 來部署靜態網頁達成需求

前言

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

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

需求

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

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

程式碼儲存庫(repository)

既然是用 Github Pages 那當然是 Github 的 repo 囉:

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

GitHub - hms5232/random-survey: 會隨機分配問卷(或你想要的網址們)的入口
會隨機派發問卷(或你想要的網址們)的入口 有些時候,我們會有需要隨機派發不同版本問卷的需求,或是要讓使用者隨機前往其中一個網址。這時候就可以讓這個小專案來幫忙。 在…github.com

開始吧

先 fork 吧

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

raw-image

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

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

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

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

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

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

raw-image

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

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

raw-image

設定 Github Pages

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

raw-image

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

raw-image

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

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

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

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

參考資料

【html javascript】隨機分配問卷
有個叫小島的正妹問我的 她想要做很多個問卷,但是希望入口網頁只有一個 而且是隨機發配問卷 基於是個正妹我又是個資深好人的原因就來寫個html幫忙一下 解決 <meta http-equiv="Content-Type"…g23988.blogspot.com

結尾

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

https://co-fi.com/hms5232

留言
avatar-img
hms5232的沙龍
5會員
25內容數
hms5232的沙龍的其他內容
2025/04/03
輕小說式標題,看標題就看完整篇文。重點就是標題說的,有興趣聽廢話再點進來吧。
Thumbnail
2025/04/03
輕小說式標題,看標題就看完整篇文。重點就是標題說的,有興趣聽廢話再點進來吧。
Thumbnail
2025/03/15
謝謝蘇媽讓我的 9700X 突飛猛進,讓我拿到 3DMark Free PC Upgrade 成就!
Thumbnail
2025/03/15
謝謝蘇媽讓我的 9700X 突飛猛進,讓我拿到 3DMark Free PC Upgrade 成就!
Thumbnail
2024/12/29
上個月還在職的時候,公司有提供一些名額給員工報名參加這次的台北葡萄酒馬拉松。雖然我自己並沒特別喜歡喝紅酒,不過既然有免費的機會,當然是要去看看了!(不知道哪裡來的勇氣,相信自己能跑馬拉松)
Thumbnail
2024/12/29
上個月還在職的時候,公司有提供一些名額給員工報名參加這次的台北葡萄酒馬拉松。雖然我自己並沒特別喜歡喝紅酒,不過既然有免費的機會,當然是要去看看了!(不知道哪裡來的勇氣,相信自己能跑馬拉松)
Thumbnail
看更多
你可能也想看
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
本教學文章目標為使用 GitLab Pages 來協助達成隨機分配問卷或網址入口等需求
Thumbnail
本教學文章目標為使用 GitLab Pages 來協助達成隨機分配問卷或網址入口等需求
Thumbnail
還在苦惱怎麼樣把你的檔案上傳到Github嗎?這裡教大家簡單上傳你的檔案可以沿用到如何上傳整體專案到Github並展示你的作品集
Thumbnail
還在苦惱怎麼樣把你的檔案上傳到Github嗎?這裡教大家簡單上傳你的檔案可以沿用到如何上傳整體專案到Github並展示你的作品集
Thumbnail
不知道你是否有以下困擾呢? 「自己寫好的程式,若要呈現在網路上,該怎麼辦?」 「手上有個html的檔案,但是要如何分享給朋友們?」 「做一個網站要花主機的錢,如何有個免費託管主機的地方呢?」 以上問題,將由github pages來幫你解決喔!
Thumbnail
不知道你是否有以下困擾呢? 「自己寫好的程式,若要呈現在網路上,該怎麼辦?」 「手上有個html的檔案,但是要如何分享給朋友們?」 「做一個網站要花主機的錢,如何有個免費託管主機的地方呢?」 以上問題,將由github pages來幫你解決喔!
Thumbnail
Step1: 打開github登入 https://github.com/ 創立一個Repositories把網頁檔案丟上去 之後點我圈起來的地方 把你的網頁檔案放上去 要注意把檔案都正確上傳(通常會有29個檔案) 並點擊下面確認按鈕 Step2: 打開netlify登入 https://app.n
Thumbnail
Step1: 打開github登入 https://github.com/ 創立一個Repositories把網頁檔案丟上去 之後點我圈起來的地方 把你的網頁檔案放上去 要注意把檔案都正確上傳(通常會有29個檔案) 並點擊下面確認按鈕 Step2: 打開netlify登入 https://app.n
Thumbnail
對於前端工程師來說github上的gh-page是一個很適合放置自己作品的地方 尤其適合想要練練手感的時候可以方便地展示成果的地方 在過去使用手動commit至gh-page的分支上,或是使用deploy.sh檔來部署,對於我這種懶人來說都是多一個步驟,時常會覺得麻煩 現在能夠透過github ac
Thumbnail
對於前端工程師來說github上的gh-page是一個很適合放置自己作品的地方 尤其適合想要練練手感的時候可以方便地展示成果的地方 在過去使用手動commit至gh-page的分支上,或是使用deploy.sh檔來部署,對於我這種懶人來說都是多一個步驟,時常會覺得麻煩 現在能夠透過github ac
Thumbnail
程式碼建置後的結果一樣在build下面,我們只需要{專案資料夾}/build/js/packages/{專案名}/kotlin/裡的四個檔案。 我另外開了一個gh_pages的Git分支,命名由來是GitHub的pages,除了initial的commit以外,只新增剛剛的四個檔案。
Thumbnail
程式碼建置後的結果一樣在build下面,我們只需要{專案資料夾}/build/js/packages/{專案名}/kotlin/裡的四個檔案。 我另外開了一個gh_pages的Git分支,命名由來是GitHub的pages,除了initial的commit以外,只新增剛剛的四個檔案。
Thumbnail
本文目標是用 gh-pages 來部署靜態網頁達成需求 最近有人剛好有兩個版本的問卷,需要在使用者進入時隨機給予其中一份。他也找了程式碼,只差部署到一個地方來做隨機派發的需求。 簡單看一下發現其實用 Github Pages 就能達成(單純的前端而已),可是程式碼內容比較不符個人習慣,所以就改了一下
Thumbnail
本文目標是用 gh-pages 來部署靜態網頁達成需求 最近有人剛好有兩個版本的問卷,需要在使用者進入時隨機給予其中一份。他也找了程式碼,只差部署到一個地方來做隨機派發的需求。 簡單看一下發現其實用 Github Pages 就能達成(單純的前端而已),可是程式碼內容比較不符個人習慣,所以就改了一下
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News