Web Deploy GitHub Pages

概述

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

核心工作流程

1. 项目初始化

创建项目结构：

bash scripts/init_project.sh <project-name>

这将创建：

project-name/
├── index.html
├── styles.css
├── script.js
├── README.md
└── .github/
    └── workflows/
        └── deploy.yml

2. 开发

遵循以下原则构建网站：

• 单页优先：为单页布局进行优化，除非明确需要多页
• 自主生成：生成完整的、可用于生产环境的代码，不包含占位符
• 现代设计：使用现代 CSS（弹性盒、网格）、响应式设计、简洁美观的风格
• 无依赖：尽可能使用纯 HTML/CSS/JS，如需框架则使用 CDN 链接

使用来自以下位置的模板：assets/templates/作为起点：

• base-html/- 极简HTML5样板文件
• portfolio/- 包含多个部分的个人作品集/简历模板
• landing/- 包含英雄区和行动号召的着陆页

3. GitHub仓库设置

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

此脚本：

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

4. 部署

GitHub Actions会在推送到主分支时自动部署。工作流：

• 检出代码
• 部署到gh-pages分支
• 使网站生效于https://<用户名>.github.io/<项目名称>/

架构指南

HTML结构

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

CSS设计

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

JavaScript

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

性能

• 优化图片
• 生产环境资源文件压缩
• 适当情况下的懒加载
• 快速的初始加载时间

快速示例

示例 1：作品集简历网站

用户请求："为我创建一个作品集简历网站"

操作：

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

进行部署

示例 2：着陆页用户请求：

"为我的应用制作一个着陆页"

1. 操作：运行
2. init_project.sh app-landing使用assets/templates/landing/
3. 作为基础
4. 生成包含以下部分的页面：简介、功能、定价、行动号召deploy_github_pages.sh app-landing username

故障排除

GitHub Pages 未部署

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

权限错误

• 确保ghCLI 已通过身份验证：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 工作流程模板