GitHub Pages 自动部署技能

功能

让你的网站在推送代码时自动部署到 GitHub Pages，实现：

• - ✅ 自动构建和部署
• ✅ 自定义域名支持
• ✅ 免费 HTTPS 证书
• ✅ CDN 加速
• ✅ 版本控制

适用场景

• - 个人博客
• 公司官网
• 项目文档
• 作品集
• 静态应用

快速开始

1. 创建网站

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

2. 配置 Actions

yaml

.github/workflows/deploy-pages.yml

name: 部署网站到 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: 检出代码
uses: actions/checkout@v4

- name: 配置 Pages
uses: actions/configure-pages@v4

- name: 上传构建产物
uses: actions/upload-pages-artifact@v3
with:
path: website

- name: 部署到 GitHub Pages
uses: actions/deploy-pages@v4

3. 启用 Pages

1. 1. 仓库 Settings > Pages
2. Source: GitHub Actions
3. 保存

4. 推送代码

bash
git add .
git commit -m 添加网站
git push

网站会在 1-2 分钟内上线！

自定义域名

1. 添加 CNAME

在 website/ 目录创建 CNAME 文件：

yourdomain.com

2. 配置 DNS

在你的域名服务商添加 CNAME 记录：

类型: CNAME
名称: @ (或 www)
值: yourusername.github.io

3. 启用 HTTPS

• - Settings > Pages > Enforce HTTPS
• 等待证书生成（几分钟）

高级配置

构建优化

yaml

• - name: 压缩 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

缓存策略

yaml

• - name: 缓存依赖

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

预览环境

yaml
deploy-preview:
runs-on: ubuntu-latest
if: github.eventname == pullrequest
steps:
- name: 部署预览
uses: rossjrw/pr-preview-action@v1
with:
source-dir: website

性能优化

1. 图片压缩

bash

使用 squoosh 或 imagemagick

npx squoosh-cli website/images/*.jpg --webp auto

2. 懒加载

html

3. 预连接

html

监控

正常运行检查

yaml

• - name: 健康检查

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

Lighthouse CI

yaml

• - name: 运行 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/