標籤

使用 VS Code 製作靜態形象網站，並部署到 GitHub Pages（新手完整教學）

前言｜為什麼選擇 GitHub Pages？

對工程師來說，擁有一個「可公開存取的個人形象網站」已經是基本配備，例如：

  • 個人介紹

  • 技術背景

  • 專案作品集

  • GitHub / 聯絡方式

GitHub Pages 是一個非常適合新手與工程師的選擇，原因包括：

  • 免費

  • 不需要主機

  • 支援純靜態網站（HTML / CSS / JS）

  • 與 Git 版本控制整合

本篇文章將從 0 開始，一步一步帶你完成：

本機開發 → GitHub 上傳 → GitHub Pages 上線


一、環境準備

必要工具

請先確認你電腦中已安裝：

  • VS Code

  • Git

  • GitHub 帳號

確認 Git 是否安裝成功

在 Windows 開啟「命令提示字元」或「PowerShell」：

git --version

有顯示版本號代表安裝成功。

二、建立靜態網站專案結構

建立專案資料夾

建立一個資料夾，例如：

my-profile-website

用 VS Code 開啟該資料夾後，建立以下結構：

my-profile-website/
│
├─ index.html
├─ css/
│   └─ style.css
├─ js/
│   └─ main.js
└─ images/

⚠️ index.html 一定要放在根目錄，GitHub Pages 才找得到

三、撰寫基本網站內容

index.html

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8" />
  <title>Jeff Chen｜個人形象網站</title>
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>

  <header>
    <h1>xxxx</h1>
    <p>Teacher</p>
  </header>

  <section>
    <h2>關於我</h2>
    <p>
      我是一名老師。
    </p>
  </section>

  <section>
    <h2>聯絡方式</h2>
    <ul>
      <li>Email: yourmail@example.com</li>
      <li>GitHub: https://github.com/你的帳號</li>
    </ul>
  </section>

  <script src="js/main.js"></script>
</body>
</html>

css/style.css

body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f5f5f5;
  color: #333;
}

header {
  background: #1e1e1e;
  color: white;
  padding: 40px;
  text-align: center;
}

section {
  background: white;
  margin: 20px auto;
  padding: 20px;
  max-width: 800px;
  border-radius: 8px;
}

js/main.js

console.log("Website loaded successfully");

四、本機測試


直接用瀏覽器打開 index.html：
  • 能正常顯示畫面
  • 樣式有套用
代表你的靜態網站結構正確。




五、建立 GitHub Repository
  1. 登入 GitHub
  2. 點選 New repository
  3. 設定：
    • Repository name：my-profile-website
    • Visibility：Public
    • 不要勾選 README
建立完成後，先記住 Repository URL。




六、將專案推送到 GitHub
在 VS Code 中開啟 Terminal，輸入：
git init
git add .
git commit -m "Initial static website"
git branch -M main
git remote add origin https://github.com/你的帳號/my-profile-website.git
git push -u origin main
完成後，回到 GitHub Repo 頁面確認檔案已出現。




七、使用 GitHub Pages 部署
進入 Pages 設定
  1. 到 GitHub Repository
  2. 點選 Settings
  3. 左側選單點 Pages




正確的 Pages 設定方式


在 Build and deployment 區塊中：
  • Source：Deploy from a branch
  • Branch：main
  • Folder：/root
按下 Save




注意：上方的「Verified domains」可以忽略
該區塊僅用於 自訂網域，與一般 Pages 上架無關。




八、確認網站是否成功上線


設定完成後，回到 Pages 頁面上方，你會看到：
Your site is live at
https://你的帳號.github.io/my-profile-website/
第一次部署約需 30 秒～2 分鐘。




九、之後如何更新網站？


每次修改內容後，只需要：
git add .
git commit -m "update content"
git push
GitHub Pages 會自動重新部署。

 

標籤：

留言

張貼留言

熱門文章