9/20/26

26278 部署一個簡單的 HTML 網頁到 GitHub Pages

 部署一個簡單的 HTML 網頁到 GitHub Pages 只需 4 個步驟，完全不需要安裝額外軟體，直接在 GitHub 網頁端即可完成。


1.建立新的 GitHub Repository：必須設為 Public 才能使用免費版 Pages。
  1. 登入 GitHub，點擊右上角的 「+」 號，選擇 「New repository」。

  2. 設定 Repository name（例如：my-first-website）。

  3. 存取權限請務必勾選 Public。

  4. 勾選 Add a README file（便於直接建立預設分支）。

  5. 點擊最下方的 Create repository。

2.新增並命名首頁檔案：檔案名稱必須完全為小寫的 index.html。
  1. 進入剛建立的儲存庫頁面，點擊右上方的 Add file 按鈕，選擇 Create new file。

  2. 在檔案名稱欄位輸入 index.html。

  3. 在下方編輯區貼上基礎 HTML 內容，例如：

HTML
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>我的第一個 GitHub Pages</title>
    <style>
        body { font-family: sans-serif; text-align: center; padding-top: 50px; }
        h1 { color: #2ea44f; }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>這是成功部署在 GitHub Pages 的網頁！</p>
</body>
</html>
  1. 點擊頁面右上角的綠色按鈕 Commit changes...，在彈出視窗中再次確認點擊 Commit changes。

3.開啟 GitHub Pages 設定：
  1. 在該儲存庫頂部的導航選單中，點擊 Settings（設定）。

  2. 在左側側邊欄找到 Code and automation 區塊，點擊 Pages。

  3. 在 Build and deployment 下方的 Source，維持選擇預設的 Deploy from a branch。

  4. 在 Branch 選項中：

    • 第一個下拉選單將 None 改選為 main（或 master）。

    • 資料夾路徑維持預設的 /(root)。

  5. 點擊右側的 Save 儲存設定。

4.等待部署並取得公開網址：
  1. 儲存後稍等 1 到 2 分鐘，GitHub 會自動在後台執行建置。

  2. 重新整理該 Settings > Pages 頁面，頂端會出現醒目的提示方塊：

    "Your site is live at https://<你的帳號名稱>.github.io/my-first-website/"。

  3. 點擊 Visit site 即可看到上線的網頁。

後續更新方法

當你想修改網站內容時，只需點進儲存庫中的 index.html，點擊右上方鉛筆圖示進行編輯並儲存（Commit），GitHub Pages 就會在 1 分鐘內自動重新發布最新內容。
on