在 Github 上使用 SSH Key push 靜態網頁展示

在開發過程中，我們經常需要將程式碼推送到 GitHub。使用 SSH Key 可以讓我們安全且方便地進行 Git 操作，而不需要每次都輸入帳號密碼。

什麼是 SSH Key

SSH Key 是一種安全的認證方式，它使用一對金鑰：

私鑰 (Private Key)：保存在本地電腦，絕對不能分享給他人
公鑰 (Public Key)：可以分享，上傳到 GitHub

產生 SSH Key

1. 檢查現有的 SSH Key

# 查看是否已存在 SSH Key
ls -al ~/.ssh

如果看到 id_rsa 和 id_rsa.pub 或 id_ed25519 和 id_ed25519.pub，表示已有 SSH Key。

2. 產生新的 SSH Key

# 使用 Ed25519 演算法 (推薦)
ssh-keygen -t ed25519 -C "your_email@example.com"

# 如果系統不支援 Ed25519，使用 RSA
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

執行後會詢問：

儲存位置：直接按 Enter 使用預設位置
Passphrase：可設定密碼增加安全性，或直接按 Enter 跳過

將 SSH Key 加入到 SSH Agent

# 啟動 SSH Agent
eval "$(ssh-agent -s)"

# 將私鑰加入到 SSH Agent
ssh-add ~/.ssh/id_ed25519
# 或者如果使用 RSA
ssh-add ~/.ssh/id_rsa

將公鑰加入到 GitHub

1. 複製公鑰內容

# 複製 Ed25519 公鑰
cat ~/.ssh/id_ed25519.pub

# 或複製 RSA 公鑰
cat ~/.ssh/id_rsa.pub

2. 在 GitHub 上新增 SSH Key

登入 GitHub
點擊右上角頭像 > Settings
左側選單點擊 “SSH and GPG keys”
點擊 “New SSH key”
Title：輸入描述性名稱（如：My MacBook）
Key：貼上剛才複製的公鑰內容
點擊 “Add SSH key”

測試 SSH 連線

ssh -T git@github.com

成功的話會看到類似訊息：

Hi username! You've successfully authenticated, but GitHub does not provide shell access.

建立靜態網頁專案

1. 建立 HTML 檔案

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的靜態網頁</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        p {
            line-height: 1.6;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>歡迎來到我的網頁</h1>
        <p>這是使用 GitHub Pages 建立的靜態網頁。</p>
        <p>透過 SSH Key 我可以安全地將程式碼推送到 GitHub。</p>
    </div>
</body>
</html>

2. 初始化 Git 專案

# 初始化 Git 儲存庫
git init

# 建立 index.html
# (貼上上面的 HTML 程式碼)

# 加入檔案到暫存區
git add .

# 提交變更
git commit -m "初始化靜態網頁"

推送到 GitHub

1. 在 GitHub 建立儲存庫

登入 GitHub
點擊右上角的 “+” > “New repository”
Repository name：輸入專案名稱
設定為 Public（GitHub Pages 免費版需要公開儲存庫）
不要勾選 “Initialize this repository with a README”
點擊 “Create repository”

2. 連接本地儲存庫到 GitHub

# 加入遠端儲存庫（使用 SSH）
git remote add origin git@github.com:username/repository-name.git

# 推送程式碼到 GitHub
git branch -M main
git push -u origin main

啟用 GitHub Pages

進入 GitHub 儲存庫頁面
點擊 “Settings” 標籤
左側選單向下滾動找到 “Pages”
Source 選擇 “Deploy from a branch”
Branch 選擇 “main”
資料夾選擇 “/ (root)”
點擊 “Save”

幾分鐘後，網頁就會在 https://username.github.io/repository-name 上線。

更新網頁內容

# 修改檔案後
git add .
git commit -m "更新網頁內容"
git push origin main

推送後，GitHub Pages 會自動更新網站內容。

常見問題解決

Permission denied (publickey)

# 確認 SSH Key 已加入 SSH Agent
ssh-add -l

# 如果沒有，重新加入
ssh-add ~/.ssh/id_ed25519

測試不同的 SSH Key

# 測試特定的 SSH Key
ssh -i ~/.ssh/id_ed25519 -T git@github.com

設定 SSH Config

建立 ~/.ssh/config 檔案：

Host github.com
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519

自動化部署腳本

建立部署腳本 deploy.sh：

#!/bin/bash
echo "開始部署..."

# 加入所有變更
git add .

# 提交變更
echo "請輸入提交訊息："
read commit_message
git commit -m "$commit_message"

# 推送到 GitHub
git push origin main

echo "部署完成！"
echo "網站將在幾分鐘後更新：https://username.github.io/repository-name"

使用方式：

chmod +x deploy.sh
./deploy.sh

透過 SSH Key 的設定，我們可以安全且便利地管理 GitHub 儲存庫，並輕鬆地部署靜態網頁到 GitHub Pages。