9/20/26

26280 使用本機的 VS Code 與 Git 指令將專案推送到 GitHub Pages

 使用本機的 VS Code 與 Git 指令將專案推送到 GitHub Pages，請依照以下 5 個步驟進行操作：


1.準備本機專案與 index.html：先決條件。
  1. 在電腦中建立一個資料夾（例如 my-pages-site）。

  2. 開啟 VS Code，點選 File > Open Folder... 開啟該資料夾。

  3. 在資料夾根目錄建立名為 index.html 的檔案，並輸入基本網頁結構：

HTML
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>本機部署測試</title>
</head>
<body>
    <h1>成功從 VS Code 推送到 GitHub Pages！</h1>
</body>
</html>
  • 驗證方式：在 VS Code 檔案列表確認根目錄確實存在名為 index.html 的檔案。

2.在 GitHub 上建立遠端儲存庫：網頁端操作。
  1. 前往 GitHub 點擊右上角 「+」 > New repository。

  2. 輸入 Repository 名稱（例如 my-pages-site）。

  3. 權限勾選 Public。

  4. 請勿勾選「Add a README file」或「.gitignore」，保持儲存庫完全空白。

  5. 點擊 Create repository，並複製頁面提供的 HTTPS 網址（例如 [https://github.com/](https://github.com/)<username>/my-pages-site.git）。

  • 驗證方式：GitHub 頁面會顯示空白儲存庫的 quick setup 指令提示。

3.在本機初始化 Git 並綁定遠端：VS Code 終端機。
在 VS Code 頂部選單開啟終端機（Terminal > New Terminal），依序執行以下指令：

Bash
# 1. 初始化本機 Git 儲存庫
git init

# 2. 將所有檔案加入暫存區
git add .

# 3. 提交變更
git commit -m "feat: initial commit for pages"

# 4. 將預設分支命名為 main
git branch -M main

# 5. 連接 GitHub 遠端儲存庫（替換為步驟 2 複製的網址）
git remote add origin https://github.com/<你的帳號>/my-pages-site.git
  • 驗證方式：在終端機輸入 git remote -v，會顯示剛剛設定的 fetch 與 push 網址。

4.推送程式碼至 GitHub：Push。
在終端機執行推送指令：

Bash
git push -u origin main
(若彈出 GitHub 登入視窗，請依循瀏覽器指示授權 VS Code/Git 存取。)

  • 驗證方式：回到 GitHub 儲存庫網頁並重新整理，確認剛才建立的 index.html 已經出現在檔案清單中。

5.啟用 GitHub Pages 服務：完成部署。
  1. 在 GitHub 儲存庫點選上方 Settings。

  2. 左側選單點選 Pages。

  3. 在 Branch 下拉選單將 None 改選為 main，路徑保持 /(root)，點擊 Save。

  4. 等候約 1~2 分鐘後重新整理頁面，頂部會出現網站上線網址（格式為 https://<username>.github.io/<repo-name>/）。

  • 驗證方式：點擊 Visit site，確認能順利開啟呈現「成功從 VS Code 推送到 GitHub Pages！」的網頁。

日常修改與更新流程

日後在 VS Code 編輯檔案後，只需要在終端機執行標準三步驟，GitHub Pages 就會在 1~2 分鐘內自動更新：
Bash
git add .
git commit -m "update site content"
git push
on