名称： web-deploy-github
描述： 通过自动化工作流，创建并部署单页静态网站到 GitHub Pages。适用于构建作品集网站、简历页面、落地页或任何需要部署到 GitHub Pages 的静态网页项目。处理从项目初始化到通过 GitHub Actions 自动化实现线上部署的完整工作流。

Web Deploy GitHub Pages

概述

此技能支持自主创建静态网站并部署到 GitHub Pages。它遵循从项目结构初始化到通过 GitHub Actions 自动部署的完整工作流，专为单页应用、作品集和落地页优化。

核心工作流

1. 项目初始化

创建项目结构：

bash scripts/init_project.sh <项目名称>

这将创建：

项目名称/
├── index.html
├── styles.css
├── script.js
├── README.md
└── .github/
    └── workflows/
        └── deploy.yml

2. 开发

遵循以下原则构建网站：
- 单页优先：优先优化单页布局，除非明确需要多页
- 自主生成：生成完整、可直接用于生产的代码，无占位符
- 现代设计：使用现代 CSS（flexbox、grid）、响应式设计、简洁美观
- 无依赖：尽可能使用纯 HTML/CSS/JS，如需框架则使用 CDN 链接

使用 assets/templates/ 中的模板作为起点：
- base-html/ - 最简 HTML5 样板
- portfolio/ - 带分区的作品集/简历模板
- landing/ - 带有英雄区和行动号召的落地页模板

3. GitHub 仓库设置

bash scripts/deploy_github_pages.sh <项目名称> <GitHub用户名>

此脚本将：
1. 初始化 git 仓库
2. 通过 GitHub CLI 创建 GitHub 仓库
3. 配置 GitHub Pages 设置
4. 推送初始提交
5. 触发首次部署

4. 部署

GitHub Actions 会在推送到主分支时自动部署。工作流包括：
- 检出代码
- 部署到 gh-pages 分支
- 使网站在 https://<用户名>.github.io/<项目名称>/ 上线

架构指南

HTML 结构

• 语义化 HTML5 元素
• 用于 SEO 和社交分享的 Meta 标签
• 响应式视口配置
• 网站图标和图标

CSS 设计

• 移动优先的响应式设计
• 使用 CSS 变量进行主题化
• 使用 Flexbox/Grid 进行布局
• 平滑的过渡和动画
• 在适当时支持深色模式

JavaScript

• 优先使用原生 JS
• 渐进增强
• 事件委托
• 无控制台错误

性能

• 优化图片
• 生产环境下的资源压缩
• 在适当时使用懒加载
• 快速的初始加载时间

快速示例

示例 1：作品集简历网站

用户请求： "Crée-moi un site portfolio CV"（为我创建一个作品集简历网站）

操作：
1. 运行 init_project.sh portfolio-cv
2. 使用 assets/templates/portfolio/ 作为基础
3. 生成包含以下分区的完整 HTML：英雄区、关于、技能、项目、联系
4. 使用 deploy_github_pages.sh portfolio-cv 用户名 部署

示例 2：落地页

用户请求： "Fais-moi une landing page pour mon app"（为我的应用创建一个落地页）

操作：
1. 运行 init_project.sh app-landing
2. 使用 assets/templates/landing/ 作为基础
3. 生成包含英雄区、功能、定价、行动号召的页面
4. 使用 deploy_github_pages.sh app-landing 用户名 部署

故障排除

GitHub Pages 未部署

• 检查仓库设置 → Pages → 源是否设置为 gh-pages 分支
• 确认 GitHub Actions 工作流已成功运行
• 检查 DNS 传播（可能需要 5-10 分钟）

权限错误

• 确保 gh CLI 已认证：gh auth status
• 检查 GitHub 上的仓库权限

构建失败

• 查看仓库中的 Actions 日志
• 验证 .github/workflows/deploy.yml 语法
• 检查文件路径和引用

资源

scripts/

• init_project.sh - 初始化项目结构
• deploy_github_pages.sh - 部署到 GitHub Pages

references/

• workflow.md - 详细的工作流文档
• design-patterns.md - 设计最佳实践

assets/

• templates/base-html/ - 最简 HTML5 样板
• templates/portfolio/ - 作品集/简历模板
• templates/landing/ - 落地页模板
• .github/workflows/deploy.yml - GitHub Actions 工作流模板