隨機分配問卷？讓 Github Pages 幫你吧！
本文目標是用 gh-pages 來部署靜態網頁達成需求
前言
最近有人剛好有兩個版本的問卷，需要在使用者進入時隨機給予其中一份。他也找了程式碼，只差部署到一個地方來做隨機派發的需求。
簡單看一下發現其實用 Github Pages 就能達成（單純的前端而已），可是程式碼內容比較不符個人習慣，所以就改寫了一下。想說都寫了，為了廣大的莘莘學子就再寫一篇簡易教學吧。
需求
先來講一下執行此專案必備的需求：
- Github 帳號（如果想在其他地方部署也 OK，請自行拿程式碼修改後去做對應操作部署吧）
- 願意嘗試的心
程式碼儲存庫（repository）
既然是用 Github Pages 那當然是 Github 的 repo 囉：
開始吧
先 fork 吧
請到剛剛的 repo 網址，點右上角的 fork 複製一份到自己的帳號底下：
填入自己要隨機分派的網址們
到剛 fork 到自己帳號底下的 url.js 檔案中，填入你要的網址：
const urls = [
'https://github.com/hms5232',
'https://gitlab.com/hms5232'
];
如上方程式碼，請用逗號分隔每個要隨機前往的網址並用引號包住（陣列中放字串的用法）。
如果不會 clone、編輯、commit + push 的同學，可以直接用 Github web 介面操作。
先點開剛剛 fork 好的 repo，接著點開 url.js 並點鉛筆圖案（如下圖）
之後會進入編輯畫面，就依照說明填入網址們即可。
編輯完檔案後請記得 commit（對 git 不熟悉的同學，請想像成一個存檔快照的感覺）。
設定 Github Pages
回到剛 fork 好的 repo，上面有一排 Tab，請選擇 Settings→Pages，接著將 Source 指定為 main 分支（或是剛剛過程中，你有自己開的新分支），檔案路徑（第二個選單）設定為 /root。
按下 Save 後，沒問題的話就會開始跑建置 Github Pages 的流程，成功的話就會出現提示訊息：
看到上圖，就可以去看看部署的 Github Pages 有沒有成功啦。
本文專案 repo 部署起來的樣子可至下面網址參考：
※部署通常會要一點時間才能部署完全。如果發現網站不如預期運作，建議等三分鐘或清除快取後再重新瀏覽。
參考資料
結尾
雖然是一個非常簡單的小專案，但要寫成一篇教學文也是不容易呢。感謝大家的收看，如果這篇文章有幫助，請大家給我拍手、按讚、分享給其他有需要的人，或是在 Github 上幫專案加星星也可以喔~甚至是想要小小贊助一下我也可以！那麼我們下次有機會再見~
4會員
19內容數
留言0
查看全部
你可能也想看
Google News 追蹤
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增
base: "/Cart/" (/放自己的專案名稱/)
build: {outDir: "docs"},
接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
今天學習Git 的第一步：
取得與建立項目 Getting and Creating Projects [1]。
之前提到「儲存庫 Repository」就是儲存所有「檔案 File」的地方。
在Git 的邏輯裡，儲存庫是要儲存所有的「快照 Snapshots」。
什麼是快照
本篇文章介紹如何使用Git Bash進行版本控制操作，包括創建repository、查看狀態、歷程以及加入暫存和提交暫存等操作。透過基本的Git指令，您可以更深入地瞭解Git工具的使用方法。
※ 簡短說明Git 和 Git Flow 是什麼？如何應用？
Git 是什麼？
Git是一個分散式版本控制軟體，能夠紀錄檔案的狀態變化，以及協調多個開發者之間的工作。它允許團隊成員協作編輯和管理項目的代碼庫，並且能夠追蹤文件的歷史變更、恢復到以前的版本、合併不同版本的代碼，以及解決代碼衝突等。
※ Git(四)
空的資料夾無法被加入 Git 進行版本控制，但這個資料夾如果又是很重要的資料夾，你會怎麼處理？
當空的目錄無法被加入 Git 進行版本控制時，有以下的做法可以解決：
在那個空目錄裡隨便放一個檔案就行了。
在這個資料夾中添加一個名為 .gitkeep 的空檔案，讓 Git 能
※ Git(三)
什麼是 staging area？
在 Git 中，staging area是暫存區的意思，也被稱為索引（index）。透過一個git add 指令把檔案從工作目錄移至暫存區。再透過一個git commit 指令把暫存區的內容移至儲存庫。
當多人協作時你要開發個功能，但不
※ 關於Git (二)
請寫下從 Github 上複製一個專案下來，做一次遞交，然後推上去會用到的所有 git 指令。
複製專案（Clone） markdown-here：
git clone https://github.com/adam-p/markdown-here.git
如果在訊息
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增
base: "/Cart/" (/放自己的專案名稱/)
build: {outDir: "docs"},
接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
今天學習Git 的第一步：
取得與建立項目 Getting and Creating Projects [1]。
之前提到「儲存庫 Repository」就是儲存所有「檔案 File」的地方。
在Git 的邏輯裡，儲存庫是要儲存所有的「快照 Snapshots」。
什麼是快照
本篇文章介紹如何使用Git Bash進行版本控制操作，包括創建repository、查看狀態、歷程以及加入暫存和提交暫存等操作。透過基本的Git指令，您可以更深入地瞭解Git工具的使用方法。
※ 簡短說明Git 和 Git Flow 是什麼？如何應用？
Git 是什麼？
Git是一個分散式版本控制軟體，能夠紀錄檔案的狀態變化，以及協調多個開發者之間的工作。它允許團隊成員協作編輯和管理項目的代碼庫，並且能夠追蹤文件的歷史變更、恢復到以前的版本、合併不同版本的代碼，以及解決代碼衝突等。
※ Git(四)
空的資料夾無法被加入 Git 進行版本控制，但這個資料夾如果又是很重要的資料夾，你會怎麼處理？
當空的目錄無法被加入 Git 進行版本控制時，有以下的做法可以解決：
在那個空目錄裡隨便放一個檔案就行了。
在這個資料夾中添加一個名為 .gitkeep 的空檔案，讓 Git 能
※ Git(三)
什麼是 staging area？
在 Git 中，staging area是暫存區的意思，也被稱為索引（index）。透過一個git add 指令把檔案從工作目錄移至暫存區。再透過一個git commit 指令把暫存區的內容移至儲存庫。
當多人協作時你要開發個功能，但不
※ 關於Git (二)
請寫下從 Github 上複製一個專案下來，做一次遞交，然後推上去會用到的所有 git 指令。
複製專案（Clone） markdown-here：
git clone https://github.com/adam-p/markdown-here.git
如果在訊息