隨機分配問卷?讓 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會員
21內容數
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
家中修繕或裝潢想要找各種小零件時,直接上網採買可以省去不少煩惱~看看Sylvia這回為了工地買了些什麼吧~
Thumbnail
家中修繕或裝潢想要找各種小零件時,直接上網採買可以省去不少煩惱~看看Sylvia這回為了工地買了些什麼吧~
Thumbnail
👜簡單生活,從整理包包開始!我的三款愛用包+隨身小物清單開箱,一起來看看我每天都帶些什麼吧🌿✨
Thumbnail
👜簡單生活,從整理包包開始!我的三款愛用包+隨身小物清單開箱,一起來看看我每天都帶些什麼吧🌿✨
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 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 就能達成(單純的前端而已),可是程式碼內容比較不符個人習慣,所以就改了一下
Thumbnail
操作筆記、安裝git、下載github專案
Thumbnail
操作筆記、安裝git、下載github專案
Thumbnail
不過因為網站和 repo 都是託管在 GitHub,就想說是不是可以直接在 GitHub 上讓他自動部署就好,我只要把文件上傳上去,接著 CI 就幫我弄好了。剛好之前 GitHub 就有推出 GitHub Actions,就是 GitHub 自己的 CI/CD 服務。剛好可以來試試看,
Thumbnail
不過因為網站和 repo 都是託管在 GitHub,就想說是不是可以直接在 GitHub 上讓他自動部署就好,我只要把文件上傳上去,接著 CI 就幫我弄好了。剛好之前 GitHub 就有推出 GitHub Actions,就是 GitHub 自己的 CI/CD 服務。剛好可以來試試看,
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News