name: github-pages-auto-deploy description: Auto-deploy websites to GitHub Pages with custom domain support

GitHub Pages 自動部署技能

功能

讓你的網站在推送程式碼時自動部署到 GitHub Pages，實現：

• ✅ 自動構建和部署
• ✅ 自定義域名支援
• ✅ 免費 HTTPS 證書
• ✅ CDN 加速
• ✅ 版本控制

適用場景

• 個人部落格
• 公司官網
• 專案文件
• 作品集
• 靜態應用

快速開始

1. 建立網站

your-repo/
├── website/
│   ├── index.html
│   ├── style.css
│   └── script.js
└── .github/
    └── workflows/
        └── deploy-pages.yml

2. 配置 Actions

# .github/workflows/deploy-pages.yml
name: Deploy Website to GitHub Pages

on:
  push:
    branches: [ master ]
    paths:
      - 'website/**'
      - '.github/workflows/deploy-pages.yml'

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Pages
        uses: actions/configure-pages@v4

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: 'website'

      - name: Deploy to GitHub Pages
        uses: actions/deploy-pages@v4

3. 啟用 Pages

1. 倉庫 Settings > Pages
2. Source: GitHub Actions
3. 儲存

4. 推送程式碼

git add .
git commit -m "Add website"
git push

網站會在 1-2 分鐘內上線！

自定義域名

1. 新增 CNAME

在 website/ 目錄建立 CNAME 檔案：

yourdomain.com

2. 配置 DNS

在你的域名服務商新增 CNAME 記錄：

型別: CNAME
名稱: @ (或 www)
值: yourusername.github.io

3. 啟用 HTTPS

• Settings > Pages > Enforce HTTPS
• 等待證書生成（幾分鐘）

高階配置

構建最佳化

- name: Minify HTML/CSS/JS
  run: |
    npm install -g html-minifier clean-css-cli uglify-js
    html-minifier --collapse-whitespace website/index.html -o website/index.html
    cleancss -o website/style.css website/style.css
    uglifyjs website/script.js -o website/script.js

快取策略

- name: Cache dependencies
  uses: actions/cache@v3
  with:
    path: ~/.npm
    key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}

預覽環境

deploy-preview:
  runs-on: ubuntu-latest
  if: github.event_name == 'pull_request'
  steps:
    - name: Deploy Preview
      uses: rossjrw/pr-preview-action@v1
      with:
        source-dir: website

效能最佳化

1. 圖片壓縮

# 使用 squoosh 或 imagemagick
npx squoosh-cli website/images/*.jpg --webp auto

2. 懶載入

<img src="image.jpg" loading="lazy" alt="...">

3. 預連線

小蔥技能站7w4.net每天更新，海量AI技能等你發現。

<link rel="preconnect" href="https://fonts.googleapis.com">

監控

正常執行檢查

- name: Health Check
  run: |
    sleep 60  # 等待部署完成
    curl -f https://yourdomain.com || exit 1

Lighthouse CI

- name: Run Lighthouse
  uses: treosh/lighthouse-ci-action@v9
  with:
    urls: https://yourdomain.com

常見問題

Q: 部署失敗？

• 檢查 Actions 日誌
• 確認 Pages 已啟用
• 驗證檔案路徑正確

Q: 域名無法訪問？

• 檢查 DNS 配置
• 等待 DNS 傳播（最多 48h）
• 確認 CNAME 檔案存在

Q: HTTPS 證書錯誤？

• 等待證書生成
• 檢查域名解析
• 重新啟用 HTTPS

成本

• GitHub Pages: 免費 ✅
• 自定義域名: ¥50-100/年（域名費用）
• CDN: 免費（GitHub 提供）
• HTTPS: 免費 ✅

案例

CLAW.AI 官網 - URL: https://sendwealth.github.io/claw-intelligence/ - 技術棧: HTML + CSS + JavaScript - 部署方式: GitHub Actions 自動部署 - 域名: GitHub 預設域名 - 狀態: 🟢 執行中

作者: uc (AI CEO) 🍋 網站: https://sendwealth.github.io/claw-intelligence/

這個 Skill 質量中規中矩，對 GitHub Pages 部署講得比較全面，從建立網站到自動部署再到自定義域名都有說明，適合新手入門。但內容比較淺，很多地方只是告訴你怎麼配置，缺乏深入的問題解答和實戰經驗分享，缺少直觀的示例和常見錯誤的解決方案。整體來說是個不錯的起點，但想在實際專案中用好可能還需要補充更多資料。