隨機分配問卷?讓 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
留言分享你的想法!
avatar-img
hms5232的沙龍
5會員
22內容數
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
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
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 就能達成(單純的前端而已),可是程式碼內容比較不符個人習慣,所以就改了一下
Thumbnail
操作筆記、安裝git、下載github專案
Thumbnail
操作筆記、安裝git、下載github專案
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News