零基礎也能架網站!3分鐘學會使用 GitHub Pages 免費架設網站!快速把網頁上線 🚀

更新 發佈閱讀 4 分鐘

必知重點 1:首頁檔案要命名為 index.html

瀏覽器進入網站時,會自動尋找 index.html

如果檔名錯了,就會出現 404 找不到頁面

✅ 正確:index.html

❌ 錯誤:home.htmlmain.html

raw-image



必知重點 2:哪些檔案能放?哪些不能放?

GitHub Pages 只能放「靜態網頁」,這代表:HTML、CSS、JavaScript、圖片都可以,但 PHP、Node.js 等後端程式無法執行。

✅ 可以放的檔案

  • HTML
  • CSS
  • JavaScript
  • 圖片(JPG、PNG、SVG)


在 GitHub Pages 中,不是所有檔案都能成功被載入,以下整理給你:

raw-image



❌ 不能放的檔案

  • PHP
  • Node.js
  • 資料庫檔案(MySQL 等)

後端程式(例如 PHP、Node.js 等)在 GitHub Pages 上無法執行。

raw-image



GitHub Pages 架網站實際設定步驟

接下來就帶你從 GitHub 設定 Pages,到最後看到作品上線!

Step 1:進入 Settings

raw-image



Step 2:選擇 Pages

raw-image



Step 3:設定來源分支

  1. 選擇 main
  2. 再選擇 / (root)
  3. 點選 Save
raw-image



Step 4:切換到 Actions

raw-image



Step 5:確認部署狀態

這裡會看到 pages build and deployment

  • 黃色 → 代表「還在上傳中」
  • 綠色 → 代表「成功部署」
raw-image



Step 6:點擊網址,檢查成果

部署完成後,系統會給你一個網址,點進去就能看到你的網頁啦!

raw-image



Step 7:完成 🎉

你的 GitHub Pages 網頁正式上線啦!就是這麼簡單~~

raw-image



GitHub Pages 架站常見問題 (FAQ)

1. GitHub Pages 一定要叫 index.html 嗎?

是的,首頁檔案務必命名為 index.html,因為瀏覽器會自動讀取這個檔案作為首頁。

2. 為什麼我上傳後還是 404?

可能原因:

  • 檔案沒放在根目錄 /
  • 檔名不是 index.html
  • GitHub Actions 還在跑,稍等幾分鐘

3. GitHub Pages 免費嗎?

完全免費,而且不限制瀏覽人次,非常適合個人作品集或小專案展示。



結論:用 GitHub Pages 免費架設個人網站

透過 GitHub Pages,你可以:

  • 上傳作品集網站
  • 分享個人履歷網頁
  • 架設小型專案展示

整個過程不需要後端伺服器,操作簡單、快速,而且零成本。

只要照著步驟,你也能在幾分鐘內擁有屬於自己的網頁。

特別提醒兩個重要重點

  1. 首頁檔案務必命名為 index.html,否則瀏覽器會出現 404。
  2. GitHub Pages 只能放靜態檔案(HTML、CSS、JavaScript、圖片等),後端程式無法執行。




留言
avatar-img
留言分享你的想法!
avatar-img
Yuna
17會員
21內容數
歡迎來到我的部落格!這裡是個佛系經營的角落,我會在這裡分享我的學習及心路歷程,及不定時生活大小事分享,包括科技、閱讀、星座、金融、好物等。 希望分享的內容能夠幫助大家,與大家一同學習成長,無論是知識的豐富還是心靈的提升。歡迎留言、討論,分享你的看法和經驗。如文章內容有誤,請不吝指教,我會虛心接受並改進! 什麼都發~
你可能也想看
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
這篇涵蓋了 Notion 建立網站的基礎,還有免費的教學資源,讓你不用寫程式,就能用 Notion 快速建立個人網站! Notion 簡易入口網站適合學生、求職、接案、小店家使用,能快速產出一個網站,節省成本又快速方便。
Thumbnail
這篇涵蓋了 Notion 建立網站的基礎,還有免費的教學資源,讓你不用寫程式,就能用 Notion 快速建立個人網站! Notion 簡易入口網站適合學生、求職、接案、小店家使用,能快速產出一個網站,節省成本又快速方便。
Thumbnail
如果你也想發展個人自媒體,推薦不妨也先從擁有一個自己的網站開始吧!你是不是想架設一個自己的網站,卻不知道該如何開始呢?很多人也好奇自己架設網站要錢嗎?這裡就也來分享常見的幾種自媒體架站方式,讓你可以更清楚瞭解喔!
Thumbnail
如果你也想發展個人自媒體,推薦不妨也先從擁有一個自己的網站開始吧!你是不是想架設一個自己的網站,卻不知道該如何開始呢?很多人也好奇自己架設網站要錢嗎?這裡就也來分享常見的幾種自媒體架站方式,讓你可以更清楚瞭解喔!
Thumbnail
前言與本文適合對象 本篇電子書是在幫目前已經有在經營的自媒體在更往上提升,所以不會教如何架設網站、主機操作與設定等。 如果真的想要自己架設網站的可以參考:網站帶路姬 想要找部落格主機代管的可以找:金城事務所 我自己的建議是架站跟主機選擇都不是創作者需要學習的,可以交給專業的服務商幫你
Thumbnail
前言與本文適合對象 本篇電子書是在幫目前已經有在經營的自媒體在更往上提升,所以不會教如何架設網站、主機操作與設定等。 如果真的想要自己架設網站的可以參考:網站帶路姬 想要找部落格主機代管的可以找:金城事務所 我自己的建議是架站跟主機選擇都不是創作者需要學習的,可以交給專業的服務商幫你
Thumbnail
自架網站的優點包括完全控制網站的設計和功能,自定義擴展和調整空間,無需依賴第三方平台;此外,網站擁有者可以選擇最佳的安全措施和SEO策略,提升網站的安全性和可見性。 然而,自架網站的缺點是需要技術知識和時間成本,設置和維護較為複雜,初期投入費用較高,且若缺乏技術支持,可能會遇到技術問題難以解決。
Thumbnail
自架網站的優點包括完全控制網站的設計和功能,自定義擴展和調整空間,無需依賴第三方平台;此外,網站擁有者可以選擇最佳的安全措施和SEO策略,提升網站的安全性和可見性。 然而,自架網站的缺點是需要技術知識和時間成本,設置和維護較為複雜,初期投入費用較高,且若缺乏技術支持,可能會遇到技術問題難以解決。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
本文章介紹了建立網頁的整個流程,包括設置 Templates, Views, Urls 等步驟。透過這些步驟,大家便能創建一個新的網頁,並成功測試。
Thumbnail
本文章介紹了建立網頁的整個流程,包括設置 Templates, Views, Urls 等步驟。透過這些步驟,大家便能創建一個新的網頁,並成功測試。
Thumbnail
建立自己的網站需要考慮許多因素,包括網站類型、架站軟體的選擇、素材的準備、網域名稱的購買、主機空間的租用、網站設計的進行以及網站被收錄的步驟。透過這些步驟,你可以自己建立一個符合需求的網站,展示你的企業形象、進行電子商務或建立社交媒體平臺等。
Thumbnail
建立自己的網站需要考慮許多因素,包括網站類型、架站軟體的選擇、素材的準備、網域名稱的購買、主機空間的租用、網站設計的進行以及網站被收錄的步驟。透過這些步驟,你可以自己建立一個符合需求的網站,展示你的企業形象、進行電子商務或建立社交媒體平臺等。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News