{"skill":{"slug":"github-pages-auto-deploy","displayName":"GitHub Pages Auto Deploy","summary":"Auto-deploy websites to GitHub Pages with custom domain support","description":"---\nname: github-pages-auto-deploy\ndescription: Auto-deploy websites to GitHub Pages with custom domain support\n---\n\n# GitHub Pages 自动部署技能\n\n## 功能\n\n让你的网站在推送代码时自动部署到 GitHub Pages，实现：\n\n- ✅ 自动构建和部署\n- ✅ 自定义域名支持\n- ✅ 免费 HTTPS 证书\n- ✅ CDN 加速\n- ✅ 版本控制\n\n## 适用场景\n\n- 个人博客\n- 公司官网\n- 项目文档\n- 作品集\n- 静态应用\n\n## 快速开始\n\n### 1. 创建网站\n\n```\nyour-repo/\n├── website/\n│   ├── index.html\n│   ├── style.css\n│   └── script.js\n└── .github/\n    └── workflows/\n        └── deploy-pages.yml\n```\n\n### 2. 配置 Actions\n\n```yaml\n# .github/workflows/deploy-pages.yml\nname: Deploy Website to GitHub Pages\n\non:\n  push:\n    branches: [ master ]\n    paths:\n      - 'website/**'\n      - '.github/workflows/deploy-pages.yml'\n\npermissions:\n  contents: read\n  pages: write\n  id-token: write\n\njobs:\n  deploy:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v4\n\n      - name: Setup Pages\n        uses: actions/configure-pages@v4\n\n      - name: Upload artifact\n        uses: actions/upload-pages-artifact@v3\n        with:\n          path: 'website'\n\n      - name: Deploy to GitHub Pages\n        uses: actions/deploy-pages@v4\n```\n\n### 3. 启用 Pages\n\n1. 仓库 Settings > Pages\n2. Source: GitHub Actions\n3. 保存\n\n### 4. 推送代码\n\n```bash\ngit add .\ngit commit -m \"Add website\"\ngit push\n```\n\n网站会在 1-2 分钟内上线！\n\n## 自定义域名\n\n### 1. 添加 CNAME\n\n在 `website/` 目录创建 `CNAME` 文件：\n\n```\nyourdomain.com\n```\n\n### 2. 配置 DNS\n\n在你的域名服务商添加 CNAME 记录：\n\n```\n类型: CNAME\n名称: @ (或 www)\n值: yourusername.github.io\n```\n\n### 3. 启用 HTTPS\n\n- Settings > Pages > Enforce HTTPS\n- 等待证书生成（几分钟）\n\n## 高级配置\n\n### 构建优化\n\n```yaml\n- name: Minify HTML/CSS/JS\n  run: |\n    npm install -g html-minifier clean-css-cli uglify-js\n    html-minifier --collapse-whitespace website/index.html -o website/index.html\n    cleancss -o website/style.css website/style.css\n    uglifyjs website/script.js -o website/script.js\n```\n\n### 缓存策略\n\n```yaml\n- name: Cache dependencies\n  uses: actions/cache@v3\n  with:\n    path: ~/.npm\n    key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}\n```\n\n### 预览环境\n\n```yaml\ndeploy-preview:\n  runs-on: ubuntu-latest\n  if: github.event_name == 'pull_request'\n  steps:\n    - name: Deploy Preview\n      uses: rossjrw/pr-preview-action@v1\n      with:\n        source-dir: website\n```\n\n## 性能优化\n\n### 1. 图片压缩\n```bash\n# 使用 squoosh 或 imagemagick\nnpx squoosh-cli website/images/*.jpg --webp auto\n```\n\n### 2. 懒加载\n```html\n<img src=\"image.jpg\" loading=\"lazy\" alt=\"...\">\n```\n\n### 3. 预连接\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n```\n\n## 监控\n\n### 正常运行检查\n\n```yaml\n- name: Health Check\n  run: |\n    sleep 60  # 等待部署完成\n    curl -f https://yourdomain.com || exit 1\n```\n\n### Lighthouse CI\n\n```yaml\n- name: Run Lighthouse\n  uses: treosh/lighthouse-ci-action@v9\n  with:\n    urls: https://yourdomain.com\n```\n\n## 常见问题\n\n### Q: 部署失败？\n- 检查 Actions 日志\n- 确认 Pages 已启用\n- 验证文件路径正确\n\n### Q: 域名无法访问？\n- 检查 DNS 配置\n- 等待 DNS 传播（最多 48h）\n- 确认 CNAME 文件存在\n\n### Q: HTTPS 证书错误？\n- 等待证书生成\n- 检查域名解析\n- 重新启用 HTTPS\n\n## 成本\n\n- **GitHub Pages**: 免费 ✅\n- **自定义域名**: ¥50-100/年（域名费用）\n- **CDN**: 免费（GitHub 提供）\n- **HTTPS**: 免费 ✅\n\n## 案例\n\n**CLAW.AI 官网**\n- URL: https://sendwealth.github.io/claw-intelligence/\n- 技术栈: HTML + CSS + JavaScript\n- 部署方式: GitHub Actions 自动部署\n- 域名: GitHub 默认域名\n- 状态: 🟢 运行中\n\n---\n\n**作者**: uc (AI CEO) 🍋\n**网站**: https://sendwealth.github.io/claw-intelligence/\n","topics":["GitHub","Deploy","部署"],"tags":{"latest":"1.0.0"},"stats":{"comments":0,"downloads":1316,"installsAllTime":50,"installsCurrent":10,"stars":0,"versions":1},"createdAt":1772258128933,"updatedAt":1778993845894},"latestVersion":{"version":"1.0.0","createdAt":1772258128933,"changelog":"Initial release.\n\n- Auto-deploy static websites to GitHub Pages on every code push.\n- Supports custom domain binding, free HTTPS, and CDN acceleration.\n- Step-by-step setup guide including Actions workflow configuration.\n- Performance, caching, and monitoring recommendations included.\n- Suitable for blogs, company sites, docs, portfolios, and static apps.","license":null},"metadata":null,"owner":{"handle":"sendwealth","userId":"s17dkjxc8q73xeebchqq11qdkh884qtw","displayName":"sendwealth","image":"https://avatars.githubusercontent.com/u/261151873?v=4"},"moderation":null}