GitHub Pages Auto Deploy

功能

让你的网站在推送代码时自动部署到 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

仓库 Settings > Pages Source: GitHub Actions 保存

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. 预连接

<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/