Web Deploy GitHub Pages

# Web Deploy GitHub Pages

## 概述

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

## 核心工作流

### 1. 项目初始化

创建项目结构：

```bash bash scripts/init_project.sh <project-name> ```

这将创建： ``` project-name/ ├── 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/` - 带首屏宣传（Hero）和号召性用语（CTA）的落地页

### 3. GitHub 仓库设置

```bash bash scripts/deploy_github_pages.sh <project-name> <github-username> ```

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

### 4. 部署

GitHub Actions 会在推送到 main 分支时自动部署。工作流如下： - 检出代码 - 部署到 `gh-pages` 分支 - 使网站上线于 `https://<username>.github.io/<project-name>/`

## 架构指南

### 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：Hero（首屏）、About（关于）、Skills（技能）、Projects（项目）、Contact（联系） 4. 使用 `deploy_github_pages.sh portfolio-cv username` 部署

### 示例 2：落地页 **用户请求：** "Fais-moi une landing page pour mon app"

**操作：** 1. 运行 `init_project.sh app-landing` 2. 使用 `assets/templates/landing/` 作为基础 3. 生成包含 Hero、Features（功能）、Pricing（价格）、CTA 的内容 4. 使用 `deploy_github_pages.sh app-landing username` 部署

## 故障排除

### GitHub Pages 未部署 - 检查仓库 Settings → Pages → Source 是否设置为 `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 工作流模板