想擁有自己的專屬網站,卻不想每個月花錢租伺服器、買網域嗎?那你絕對不能錯過超級佛心的 GitHub Pages!這篇文章將手把手帶你從零開始,只要短短 5 分鐘、5 個簡單的步驟,就能把你的 HTML、CSS、JavaScript 等靜態網頁檔案免費部署上線。不管是個人履歷、作品集還是單頁網頁小應用,通通都能輕鬆搞定,完全沒有寫程式經驗的新手小白也能無痛學會喔!快跟著我們一起看下去吧!
步驟一:註冊 GitHub 帳號(領取你的工程師身分證)
如果你還沒有 GitHub 帳號,請先前往 GitHub 官方網站 進行註冊。這就像是申請一個專屬於你的雲端開發者空間!
- 點擊右上角的「Sign up」(註冊)。
- 輸入你的 Email,並跟著畫面指示設定密碼與使用者名稱(Username)。
- ⚠️ 超級重要的小提醒:你的「使用者名稱」將會成為你未來個人網址的一部分喔!例如:
https://你的帳號.github.io,所以建議取一個順口、好記的英文名字! - 去信箱收取驗證信,輸入驗證碼完成註冊。
步驟二:建立新的儲存庫(Repository)
儲存庫(簡稱 Repo)就像是你的「雲端專案資料夾」,用來存放你所有的網頁檔案。
- 登入 GitHub 後,點擊右上角的「+」號,選擇「New repository」。
- Repository name(儲存庫名稱):幫你的專案取個英文名字(例如:
my-resume或portfolio),這也會成為網址的一小部分。 - Public / Private(公開/私密):請務必選擇「Public(公開)」,因為 GitHub Pages 的免費版必須在公開儲存庫才能運作喔!
- 勾選「Add a README file」(這會自動幫你建立一個專案說明檔,方便後續操作,強烈建議勾選)。
- 滑到頁面最下方,點擊綠色按鈕「Create repository」。

步驟三:上傳你的網頁檔案
現在,你要把寫好的網頁檔案(HTML、CSS 或圖片等)放進剛剛建好的雲端資料夾中。
- 在你的儲存庫頁面,點擊「Add file」,然後選擇「Upload files」。
- 將你電腦裡的網頁檔案拖曳到畫面中間的虛線框內,或是點擊「choose your files」來選擇檔案。
- ⚠️ 關鍵守則:請確保你的首頁主檔名一定要命名為 index.html,這樣系統才知道要從哪一頁開始讀取!
- 等待檔案上傳完成後,滑到頁面最下方,點擊綠色按鈕「Commit changes」來確認儲存變更。
步驟四:開啟 GitHub Pages 魔術開關
檔案都上傳好了,距離上線只差最後一步!接下來我們要去後台把「靜態網頁託管」的開關打開。
- 在儲存庫頁面上方那一排頁籤中,點擊最右邊的「Settings」(齒輪圖示)。
- 在左側選單中往下滑,找到並點擊「Pages」。
- 在 Build and deployment 區塊中:
- Source 保持選擇預設的
Deploy from a branch。 - 下方的 Branch 選擇框,將
None改為 main(或master)。 - 右邊的資料夾路徑保持
/ (root)即可。
- Source 保持選擇預設的
- 點擊旁邊的「Save」儲存設定。

步驟五:取得專屬網址,大功告成!🎉
設定儲存後,GitHub 的伺服器需要大約 1 到 2 分鐘 的時間來編譯你的網頁。你可以稍微喝口水,然後重新整理頁面!
當畫面頂部(或回到 Pages 設定頁)出現一段類似這樣的提示文字:
Your site is live at https://你的帳號.github.io/專案名稱/
用力點擊那個網址,就能看到你親手製作的網頁已經成功在網際網路上線啦!趕快把網址傳給親朋好友炫耀一下吧!
💡 同場加映:後續如何更新網頁內容?
網頁上線後,如果之後你想修改內容(例如加了新照片、改了文字),該怎麼辦呢?非常簡單:
- 回到這個 GitHub 儲存庫。
- 點擊你的
index.html檔案,再點擊右上角的 ✏️(鉛筆圖示)進行線上編輯。 - 或者,你也可以重複「步驟三」,把電腦裡修改好的新檔案再次拖曳上傳,系統會自動覆蓋舊檔案(記得要點擊 Commit changes)。
- 重點:儲存後,一樣等待約 1~2 分鐘,回到你的網頁按下 Ctrl + F5(強制重新整理),就會看到熱騰騰的最新畫面囉!
使用 GitHub Pages 免費版時,你的程式碼儲存庫(Repository)必須為「公開」狀態。這意味著任何人都可以查看你的網頁原始碼。請務必確保不要上傳任何機密資料、個人密碼或第三方 API 金鑰(如資料庫連線或 OpenAI API Key),以免造成資訊外洩與被盜用的風險喔!