想擁有自己的專屬網站,卻不想每個月花錢租伺服器、買網域嗎?那你絕對不能錯過超級佛心的 GitHub Pages!這篇文章將手把手帶你從零開始,只要短短 5 分鐘、5 個簡單的步驟,就能把你的 HTML、CSS、JavaScript 等靜態網頁檔案免費部署上線。不管是個人履歷、作品集還是單頁網頁小應用,通通都能輕鬆搞定,完全沒有寫程式經驗的新手小白也能無痛學會喔!快跟著我們一起看下去吧!

 

 

步驟一:註冊 GitHub 帳號(領取你的工程師身分證)

如果你還沒有 GitHub 帳號,請先前往 GitHub 官方網站 進行註冊。這就像是申請一個專屬於你的雲端開發者空間!

  • 點擊右上角的「Sign up」(註冊)。
  • 輸入你的 Email,並跟著畫面指示設定密碼與使用者名稱(Username)。
  • ⚠️ 超級重要的小提醒:你的「使用者名稱」將會成為你未來個人網址的一部分喔!例如:https://你的帳號.github.io,所以建議取一個順口、好記的英文名字!
  • 去信箱收取驗證信,輸入驗證碼完成註冊。

步驟二:建立新的儲存庫(Repository)

儲存庫(簡稱 Repo)就像是你的「雲端專案資料夾」,用來存放你所有的網頁檔案。

  1. 登入 GitHub 後,點擊右上角的「+」號,選擇「New repository」。
  2. Repository name(儲存庫名稱):幫你的專案取個英文名字(例如:my-resumeportfolio),這也會成為網址的一小部分。
  3. Public / Private(公開/私密):請務必選擇「Public(公開)」,因為 GitHub Pages 的免費版必須在公開儲存庫才能運作喔!
  4. 勾選「Add a README file」(這會自動幫你建立一個專案說明檔,方便後續操作,強烈建議勾選)。
  5. 滑到頁面最下方,點擊綠色按鈕「Create repository」。

步驟三:上傳你的網頁檔案

現在,你要把寫好的網頁檔案(HTML、CSS 或圖片等)放進剛剛建好的雲端資料夾中。

  1. 在你的儲存庫頁面,點擊「Add file」,然後選擇「Upload files」。
  2. 將你電腦裡的網頁檔案拖曳到畫面中間的虛線框內,或是點擊「choose your files」來選擇檔案。
  3. ⚠️ 關鍵守則:請確保你的首頁主檔名一定要命名為 index.html,這樣系統才知道要從哪一頁開始讀取!
  4. 等待檔案上傳完成後,滑到頁面最下方,點擊綠色按鈕「Commit changes」來確認儲存變更。

步驟四:開啟 GitHub Pages 魔術開關

檔案都上傳好了,距離上線只差最後一步!接下來我們要去後台把「靜態網頁託管」的開關打開。

  1. 在儲存庫頁面上方那一排頁籤中,點擊最右邊的「Settings」(齒輪圖示)。
  2. 在左側選單中往下滑,找到並點擊「Pages」。
  3. Build and deployment 區塊中:
    • Source 保持選擇預設的 Deploy from a branch
    • 下方的 Branch 選擇框,將 None 改為 main(或 master)。
    • 右邊的資料夾路徑保持 / (root) 即可。
  4. 點擊旁邊的「Save」儲存設定。


📸 畫面提示:設定完成後,上方通常會出現「GitHub Pages source saved.」的綠色提示框。

步驟五:取得專屬網址,大功告成!🎉

設定儲存後,GitHub 的伺服器需要大約 1 到 2 分鐘 的時間來編譯你的網頁。你可以稍微喝口水,然後重新整理頁面!

當畫面頂部(或回到 Pages 設定頁)出現一段類似這樣的提示文字:
Your site is live at https://你的帳號.github.io/專案名稱/

用力點擊那個網址,就能看到你親手製作的網頁已經成功在網際網路上線啦!趕快把網址傳給親朋好友炫耀一下吧!

💡 同場加映:後續如何更新網頁內容?

網頁上線後,如果之後你想修改內容(例如加了新照片、改了文字),該怎麼辦呢?非常簡單:

  1. 回到這個 GitHub 儲存庫。
  2. 點擊你的 index.html 檔案,再點擊右上角的 ✏️(鉛筆圖示)進行線上編輯。
  3. 或者,你也可以重複「步驟三」,把電腦裡修改好的新檔案再次拖曳上傳,系統會自動覆蓋舊檔案(記得要點擊 Commit changes)。
  4. 重點:儲存後,一樣等待約 1~2 分鐘,回到你的網頁按下 Ctrl + F5(強制重新整理),就會看到熱騰騰的最新畫面囉!
⚠️ 網站安全免責聲明:
使用 GitHub Pages 免費版時,你的程式碼儲存庫(Repository)必須為「公開」狀態。這意味著任何人都可以查看你的網頁原始碼。請務必確保不要上傳任何機密資料、個人密碼或第三方 API 金鑰(如資料庫連線或 OpenAI API Key),以免造成資訊外洩與被盜用的風險喔!
創作者介紹
創作者 小黃老師嘿技術 的頭像
小黃老師

小黃老師嘿技術

小黃老師 發表在 痞客邦 留言(0) 人氣( 461 )