隨機分配問卷?讓 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 複製一份到自己的帳號底下:

vocus|新世代的創作平台

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

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

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

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

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

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

vocus|新世代的創作平台

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

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

vocus|新世代的創作平台

設定 Github Pages

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

vocus|新世代的創作平台

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

vocus|新世代的創作平台

看到上圖,就可以去看看部署的 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
操作筆記、安裝git、下載github專案
Thumbnail
操作筆記、安裝git、下載github專案
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
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
不知道你是否有以下困擾呢? 「自己寫好的程式,若要呈現在網路上,該怎麼辦?」 「手上有個html的檔案,但是要如何分享給朋友們?」 「做一個網站要花主機的錢,如何有個免費託管主機的地方呢?」 以上問題,將由github pages來幫你解決喔!
Thumbnail
不知道你是否有以下困擾呢? 「自己寫好的程式,若要呈現在網路上,該怎麼辦?」 「手上有個html的檔案,但是要如何分享給朋友們?」 「做一個網站要花主機的錢,如何有個免費託管主機的地方呢?」 以上問題,將由github pages來幫你解決喔!
Thumbnail
對於前端工程師來說github上的gh-page是一個很適合放置自己作品的地方 尤其適合想要練練手感的時候可以方便地展示成果的地方 在過去使用手動commit至gh-page的分支上,或是使用deploy.sh檔來部署,對於我這種懶人來說都是多一個步驟,時常會覺得麻煩 現在能夠透過github ac
Thumbnail
對於前端工程師來說github上的gh-page是一個很適合放置自己作品的地方 尤其適合想要練練手感的時候可以方便地展示成果的地方 在過去使用手動commit至gh-page的分支上,或是使用deploy.sh檔來部署,對於我這種懶人來說都是多一個步驟,時常會覺得麻煩 現在能夠透過github ac
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
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
本教學文章目標為使用 GitLab Pages 來協助達成隨機分配問卷或網址入口等需求
Thumbnail
本教學文章目標為使用 GitLab Pages 來協助達成隨機分配問卷或網址入口等需求
Thumbnail
還在苦惱怎麼樣把你的檔案上傳到Github嗎?這裡教大家簡單上傳你的檔案可以沿用到如何上傳整體專案到Github並展示你的作品集
Thumbnail
還在苦惱怎麼樣把你的檔案上傳到Github嗎?這裡教大家簡單上傳你的檔案可以沿用到如何上傳整體專案到Github並展示你的作品集
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文目標是用 gh-pages 來部署靜態網頁達成需求 最近有人剛好有兩個版本的問卷,需要在使用者進入時隨機給予其中一份。他也找了程式碼,只差部署到一個地方來做隨機派發的需求。 簡單看一下發現其實用 Github Pages 就能達成(單純的前端而已),可是程式碼內容比較不符個人習慣,所以就改了一下
Thumbnail
本文目標是用 gh-pages 來部署靜態網頁達成需求 最近有人剛好有兩個版本的問卷,需要在使用者進入時隨機給予其中一份。他也找了程式碼,只差部署到一個地方來做隨機派發的需求。 簡單看一下發現其實用 Github Pages 就能達成(單純的前端而已),可是程式碼內容比較不符個人習慣,所以就改了一下
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News