2025 GitHub Pages 完整教學：免費架設網站從入門到進階

想要免費架設一個專業的網站，卻不想花錢租虛擬主機？GitHub Pages 就是你最好的選擇。不論你是想建立個人作品集、專案說明文件，還是公司介紹頁面，GitHub Pages 都能讓你在 5 分鐘內把網站上線，而且完全免費。

這篇文章會從零開始，帶你了解 GitHub Pages 的所有功能。從最基本的網站建立，到進階的框架部署、自訂網域設定，一次幫你整理清楚。不管你是剛接觸網站架設的新手，還是想找免費方案的開發者，這篇教學都能幫你快速上手。

什麼是 GitHub Pages？免費靜態網站託管介紹

GitHub Pages 是 GitHub 提供的免費靜態網站託管服務。簡單來說，你只要把 HTML、CSS、JavaScript 這些檔案放到 GitHub Repository 裡面，GitHub 就會自動幫你把網站上線。

GitHub Pages 的運作原理

當你把程式碼推送到 GitHub Repository 之後，GitHub Pages 會自動讀取你指定的分支（通常是 main 或 gh-pages），然後把裡面的靜態檔案部署到 GitHub 的伺服器上。每次你更新程式碼，網站也會跟著自動更新。

GitHub Pages 適合做什麼？

GitHub Pages 最適合以下幾種用途：

• 個人作品集網站：展示你的專案成果、設計作品
• 專案說明文件：為你的開源專案建立漂亮的文件網站
• 部落格：搭配 Jekyll 或其他靜態網站生成器寫部落格
• 公司或團隊介紹頁面：簡單的形象網站

GitHub Pages vs 傳統虛擬主機

如果你的網站不需要後端程式或資料庫，GitHub Pages 絕對是最划算的選擇。

GitHub Pages 快速入門：5 分鐘建立你的第一個網站

準備好開始了嗎？跟著下面的步驟，你馬上就能擁有自己的網站。

步驟 1：建立 GitHub Repository

首先登入你的 GitHub 帳號，點擊右上角的 + 號，選擇「New repository」。

Repository 名稱有兩種選擇：
- 如果你想要 username.github.io 這種網址，Repository 名稱就要取名為 username.github.io（把 username 換成你的 GitHub 帳號名稱）
- 如果是專案網站，Repository 名稱可以自己取，網址會變成 username.github.io/repository-name

步驟 2：上傳網站檔案

你可以選擇以下任一方式上傳檔案：

方法 A：直接在 GitHub 網頁上傳
1. 進入 Repository 頁面
2. 點擊「Add file」→「Upload files」
3. 把你的 HTML、CSS、JavaScript 檔案拖曳上去
4. 點擊「Commit changes」

方法 B：使用 Git 指令

git clone https://github.com/username/repository-name.git
cd repository-name
# 把你的網站檔案複製進來
git add .
git commit -m "Add website files"
git push origin main

步驟 3：啟用 GitHub Pages

1. 進入 Repository 頁面
2. 點擊「Settings」
3. 左側選單找到「Pages」
4. 在「Source」區塊，選擇你要發布的分支（通常是 main）
5. 點擊「Save」

步驟 4：確認網站上線

設定完成後，等待 1-2 分鐘，你就可以在瀏覽器輸入網址來看你的網站了。GitHub 也會在 Pages 設定頁面顯示你的網站網址。

如果你看到綠色的勾勾和網址，恭喜你！你的網站已經上線了。

快速入門遇到問題？VibeFix 幫你 30 分鐘內搞定 GitHub Pages 部署

不管是設定卡關、網站不顯示，還是搞不懂為什麼一直失敗，VibeFix 的專家都能幫你快速解決。我們專門處理各種部署問題，讓你的網站順利上線。

立即預約諮詢 →

GitHub Pages 網站類型：User/Organization vs Project Sites

GitHub Pages 有兩種網站類型，網址格式和設定方式都不太一樣。

User/Organization Sites

這是你的 GitHub 帳號專屬網站，每個帳號只能有一個。

特色：
- Repository 名稱必須是 username.github.io
- 網址是 https://username.github.io
- 自動從 main 分支發布
- 適合當作個人或組織的主要網站

Project Sites

每個 Repository 都可以有自己的網站。

特色：
- Repository 名稱可以自訂
- 網址是 https://username.github.io/repository-name
- 可以從 main、gh-pages 分支或 /docs 資料夾發布
- 適合專案說明文件或獨立專案

該選哪一種？

如果你只是想架一個簡單的個人網站，用 User Site 就好。如果你有多個專案需要各自的網站，那就用 Project Site。

靜態網站生成器整合：Jekyll、Hugo、Next.js

光靠手寫 HTML 很麻煩，好在 GitHub Pages 支援多種靜態網站生成器，讓你可以用更有效率的方式建立網站。

Jekyll：GitHub 內建支援

Jekyll 是 GitHub Pages 原生支援的靜態網站生成器。你只要把 Jekyll 專案推上去，GitHub 就會自動幫你 build。

優點：
- 不需要另外設定 GitHub Actions
- 支援 Markdown 寫作
- 有大量免費主題可以用

基本使用：

# 安裝 Jekyll
gem install jekyll bundler

# 建立新網站
jekyll new my-site
cd my-site

# 本地預覽
bundle exec jekyll serve

Hugo、Next.js、React、Vue

這些框架需要先在本地 build，再把 build 結果部署到 GitHub Pages。你可以手動部署，或是用 GitHub Actions 自動化。

想深入了解各框架的部署方式？請參考完整框架部署教學：React、Vue、Angular、Hugo。

GitHub Pages 自訂網域設定入門

預設的 username.github.io 網址很長，如果你有自己的網域，可以設定成像 www.mysite.com 這樣更專業的網址。

基本設定流程

1. 購買網域：在 Namecheap、GoDaddy 或其他註冊商購買
2. 設定 DNS：新增 A 記錄或 CNAME 記錄指向 GitHub
3. GitHub 端設定：在 Repository 的 Settings → Pages 輸入你的網域
4. 啟用 HTTPS：勾選「Enforce HTTPS」

DNS 記錄設定

如果你要用 example.com（apex domain），需要設定 A 記錄：

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

如果你要用 www.example.com，設定 CNAME 記錄指向 username.github.io。

DNS 設定卡關？讓 VibeFix 專家協助你完成自訂網域設定

DNS 設定牽涉到很多細節，設定錯誤可能導致網站無法連線。如果你不確定怎麼設定，VibeFix 可以幫你從頭到尾搞定。

預約網域設定協助 →

想要更詳細的設定教學？請參考自訂網域完整設定指南。

GitHub Actions 自動部署簡介

每次改程式碼都要手動部署很麻煩，GitHub Actions 可以幫你實現「推程式碼就自動上線」。

什麼是 CI/CD？

CI/CD 就是持續整合、持續部署的意思。簡單來說，就是讓電腦自動幫你做那些重複的事情：

• 自動執行測試
• 自動 build 程式碼
• 自動部署到伺服器

GitHub Actions 基本概念

GitHub Actions 透過 workflow 檔案來定義自動化流程。這個檔案放在 .github/workflows/ 資料夾裡面，用 YAML 格式撰寫。

基本範例

name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

這個 workflow 會在你推程式碼到 main 分支時，自動把 build 資料夾的內容部署到 GitHub Pages。

想學習完整的 GitHub Actions 設定？請參考 GitHub Actions 自動部署完整教學。

GitHub Pages 常見問題與限制

GitHub Pages 雖然免費好用，但也有一些限制你需要知道。

主要限制

不支援的功能

GitHub Pages 是純靜態網站託管，所以不支援：

• 後端程式（PHP、Node.js、Python 等）
• 資料庫
• Server-side rendering
• 伺服器端的表單處理

如果你需要這些功能，可能要考慮 Vercel、Netlify 或其他方案。

私有 Repository

免費的 GitHub 帳號可以把私有 Repository 的網站發布出來，但網站本身會是公開的。如果你想要更多進階功能，可能需要 GitHub Pro。

想了解更多限制細節和替代方案？請參考 GitHub Pages 限制與收費完整說明。

GitHub Pages 錯誤排除基礎

網站上線後看到 404 錯誤？或是畫面一片空白？這邊教你怎麼排查。

常見錯誤類型

404 Not Found
- Repository 名稱設定錯誤
- Pages 功能沒有啟用
- 檔案路徑或名稱錯誤
- index.html 檔案缺失

空白頁面
- JavaScript 載入失敗
- 框架的 base path 設定錯誤
- Build 過程有錯誤

CSS/圖片無法載入
- 路徑使用絕對路徑但沒有包含 Repository 名稱
- 檔案名稱大小寫問題（GitHub Pages 區分大小寫）

基本除錯步驟

1. 確認 Pages 設定：Settings → Pages，確認有正確選擇發布來源
2. 檢查 Actions：如果有用 GitHub Actions，去 Actions 頁面看有沒有錯誤
3. 確認檔案存在：Repository 裡面要有 index.html
4. 開 DevTools：按 F12 看 Console 和 Network 有沒有錯誤訊息

需要專人協助排除錯誤？

聯繫 VibeFix 專家 →

想要完整的 404 錯誤解決方案？請參考 GitHub Pages 404 錯誤完整解決指南。

總結：GitHub Pages 學習路徑與下一步

恭喜你讀完這篇教學！現在你應該對 GitHub Pages 有了完整的認識。

學習路線建議

新手入門：
1. 先用這篇教學的快速入門建立第一個網站
2. 熟悉基本操作後，試著自訂網域
3. 學習 GitHub Actions 自動部署

進階使用者：
1. 選擇適合的框架（React、Vue、Hugo 等）
2. 建立完整的 CI/CD 流程
3. 優化網站效能和 SEO

延伸閱讀

根據你的需求，可以繼續閱讀以下文章：

• 遇到 404 錯誤？→ GitHub Pages 404 錯誤完整解決指南
• 想用框架部署？→ 完整框架部署教學：React、Vue、Angular、Hugo
• 設定自訂網域？→ 自訂網域完整設定指南
• 了解限制與方案？→ GitHub Pages 限制與收費完整說明
• 設定自動部署？→ GitHub Actions 自動部署完整教學

準備好讓你的網站上線了嗎？VibeFix 提供 GitHub Pages 全方位支援服務

不論你是剛開始接觸 GitHub Pages，還是遇到了技術問題需要協助，VibeFix 都能幫你解決。我們的服務包括：

• 網站部署設定
• 自訂網域配置
• GitHub Actions 自動化設定
• 錯誤排除與效能優化

VibeFix 的理念是「AI 幫你寫代碼，我們幫你上線」。讓我們一起把你的專案順利部署上線！

立即預約免費諮詢 →

FAQ

GitHub Pages 是免費的嗎？

是的，GitHub Pages 對所有 GitHub 使用者都是免費的。免費方案包含 1GB 儲存空間和每月 100GB 頻寬，對大多數個人網站和小型專案來說已經足夠。不過如果你需要從私有 Repository 發布網站並使用進階功能，可能需要考慮 GitHub Pro 方案。

GitHub Pages 可以放後端程式嗎？

不行。GitHub Pages 只支援靜態網站，也就是 HTML、CSS、JavaScript 這些在瀏覽器執行的程式碼。它不支援 PHP、Node.js、Python 等後端程式，也不能連接資料庫。如果你需要後端功能，可以考慮 Vercel、Netlify、Heroku 或傳統虛擬主機。

GitHub Pages 網站要多久才會上線？

通常在設定完成後 1-10 分鐘內就會上線。如果你有使用 GitHub Actions 來部署，可以到 Actions 頁面查看部署進度。有時候因為 DNS 快取或 GitHub 伺服器忙碌，可能需要等待稍長一點的時間。

GitHub Pages 支援哪些靜態網站生成器？

GitHub Pages 原生支援 Jekyll，不需要額外設定 GitHub Actions 就能自動 build。其他靜態網站生成器如 Hugo、Gatsby、Next.js（靜態匯出）、Nuxt.js、VuePress、Hexo 等都可以搭配 GitHub Actions 來部署。基本上只要能產生靜態 HTML 檔案的工具都能用。

GitHub Pages 和 Vercel/Netlify 有什麼不同？

三者都是免費的靜態網站託管服務，但有些差異。GitHub Pages 完全免費但功能較基本，最適合單純的靜態網站。Vercel 和 Netlify 提供更多進階功能，像是 Serverless Functions（讓你能執行簡單的後端邏輯）、表單處理、更快的 CDN 等。如果你的專案需要這些功能，可以參考我們的 GitHub Pages 限制與收費完整說明 來做比較。