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