跳至主要內容

GitHub Pages

Jia-Yin2025年2月19日大约 1 分鐘coursefrontendweb

🎯 學習內容：

  • 建立基本的 HTML 頁面
  • 了解 GitHub Pages 及其用途
  • 使用 GitHub Pages 部署 HTML 網站

教學錄影

🛠 步驟一：建立 GitHub Repository

  1. 登入 GitHub。
  2. 點擊 New repository（新建倉庫）。
  3. 設定：
    • Repository name: my-simple-website
    • 選擇 Public（公開）
    • 勾選 Add a README file
    • 點擊 Create repository

📝 步驟二：新增 index.html

  1. 進入剛剛建立的 Repository。
  2. 點擊 Add file → Create new file。
  3. 檔案名稱輸入：index.html
  4. 在內容區域輸入以下 HTML 程式碼：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個 GitHub Pages 網站</title>
</head>
<body>
    <h1>歡迎來到我的網站！</h1>
    <p>這是我的第一個 GitHub Pages 部署的網站。</p>
</body>
</html>
  1. 向下捲動，輸入 Commit 訊息（例如："Add index.html"）。
  2. 點擊 Commit new file。

🌍 步驟三：啟用 GitHub Pages

  1. 進入 Settings（設定）。
  2. 左側選單選擇 Pages。
  3. 在 Branch 下拉選單選擇 main，然後按 Save。
  4. 等待幾分鐘，GitHub Pages 會自動部署網站。

🔗 步驟四：查看你的網站

  1. 回到 Settings → Pages。
  2. 在 Your site is live at... 會顯示你的網站連結（通常是 https://你的GitHub帳號.github.io/my-simple-website/）。
  3. 點擊該連結，即可查看你的網站！

🎯 挑戰任務：

  1. 加入 CSS 美化網頁 在 index.html 中加入以下 <style> 讓網頁更有設計感：
    <style>
    body { font-family: Arial, sans-serif; text-align: center; }
    h1 { color: blue; }
</style>
  2. 新增圖片與連結
    <img src="https://picsum.photos/200/300" alt="示例圖片">
<p>參考 GitHub Pages 官方文件：<a href="https://pages.github.com/" target="_blank">點此查看</a></p>

這樣你就成功建立並部署了一個簡單的 HTML 網站！🚀

💡 注意：GitHub Pages 只適用於靜態網站（HTML、CSS、JavaScript）。

Copyright © 2025 Jia-Yin