GitHub Pages Auto Deploy — GitHub Pages Auto 部署

GitHub Pages 自动部署技能 功能

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

✅ 自动构建和部署 ✅ 自定义域名支持 ✅ 免费 HTTPS 证书 ✅ CDN 加速 ✅ 版本控制 适用场景 个人博客 公司官网 项目文档 作品集 静态应用 快速开始

• 创建网站

your-repo/ ├── 网页site/ │ ├── 索引.html │ ├── style.css │ └── script.js └── .github/ └── 工作流s/ └── 部署-pages.yml

• 配置 Actions

# .github/工作流s/部署-pages.yml name: 部署 网页site to GitHub Pages

on: push: branches: [ master ] paths: - '网页site/' - '.github/工作流s/部署-pages.yml'

权限s: contents: read pages: write id-令牌: write

jobs: 部署: 运行s-on: ubuntu-latest steps: - name: 检查out uses: actions/检查out@v4

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

- name: 上传 artifact uses: actions/上传-pages-artifact@v3 with: path: '网页site'

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

• 启用 Pages

仓库 设置tings > Pages Source: GitHub Actions 保存

• 推送代码

git 添加 . git commit -m "添加 网页site" git push

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

自定义域名

• 添加 CNAME

在 网页site/ 目录创建 CNAME 文件：

yourdomAIn.com

• 配置 DNS

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

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

• 启用 HTTPS

设置tings > Pages > Enforce HTTPS 等待证书生成（几分钟） 高级配置 构建优化

• name: Minify HTML/CSS/JS

运行: | npm 安装 -g html-minifier 清理-css-命令行工具 uglify-js html-minifier --collapse-whitespace 网页site/索引.html -o 网页site/索引.html 清理css -o 网页site/style.css 网页site/style.css uglifyjs 网页site/script.js -o 网页site/script.js

缓存策略

• name: 缓存 dependencies

uses: actions/缓存@v3 with: path: ~/.npm key: ${{ 运行器.os }}-npm-${{ 哈希Files('/package-lock.json') }}

预览环境 部署-preview: 运行s-on: ubuntu-latest if: github.event_name == 'pull_请求' steps: - name: 部署 Preview uses: rossjrw/pr-preview-action@v1 with: source-dir: 网页site

性能优化

• 图片压缩

# 使用 squoosh 或 imagemagick npx squoosh-命令行工具 网页site/images/*.jpg --网页p auto

• 懒加载

• 预连接

监控 正常运行检查

• name: 健康 检查

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

Lighthouse CI

• 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://发送wealth.github.io/claw-intelligence/ 技术栈: HTML + CSS + JavaScript 部署方式: GitHub Actions 自动部署 域名: GitHub 默认域名 状态: 🟢 运行中

作者: uc (AI CEO) 🍋 网站: https://发送wealth.github.io/claw-intelligence/