Static Webpage Dev

静态网页开发工作流

功能

提供完整的静态网页开发流程，从需求分析到GitHub Pages部署。

触发词

• "开发网页"
• "创建网站"
• "部署网页"
• "GitHub Pages"
• "制作活动页"
• "静态页面"

工作流程

1. 需求确认

分析用户需求，确认项目类型、核心功能、视觉风格、资源需求。

2. 技术选型

根据需求选择技术方案：

• 简单页面 → 纯HTML/CSS/JS
• 复杂交互 → Vue/React CDN版
• 动画需求 → CSS动画优先

3. 资源获取与验证 ⚠️

关键步骤：必须验证后才能使用

资源获取路径优先级：

1. CDN直链（jsdelivr、cdnjs）
2. 免费资源站（Pixabay、Unsplash）
3. 外链托管服务（kkkkmmmm）
4. 开源项目引用

验证流程：

• WebFetch检查HTTP响应
• 确认内容正确
• 本地测试

4. 代码实现

按模块顺序：HTML结构 → CSS样式 → JS交互 → 资源集成

5. 本地预览验证

cd output && python -m http.server 8080

验证清单：

• 页面正常加载
• 资源正确显示
• 交互功能正常
• 移动端适配

6. GitHub仓库准备

检查/创建仓库，确认Token有repo权限。

7. 推送到GitHub

使用GitHub MCP推送，避免网络问题。

8. 启用GitHub Pages

Settings → Pages → main分支

9. 线上验证

访问Pages地址，确认所有功能正常。

10. 完成交付

报告访问地址和使用说明。

使用方法

当用户提到网页开发相关需求时，自动执行工作流：

from workflow_runner import run_workflow

result = run_workflow("static-webpage-development")

验证规则

常见问题处理

资源找不到

换路径继续搜索，不降级目标。

GitHub认证失败

提示用户检查Token权限（需要repo权限）。

Pages部署失败

检查仓库设置，确认仓库为public。

示例

用户请求：帮我做一个春节活动网页，要有抽奖功能

执行流程：

1. 确认需求（春节主题、抽奖功能、喜庆风格）
2. 选择纯HTML/CSS/JS方案
3. 搜索春节音乐→验证外链可用
4. 实现转盘抽奖、祝福卡片等功能
5. 本地启动服务器预览
6. 创建GitHub仓库
7. 推送代码到GitHub
8. 启用GitHub Pages
9. 验证线上访问正常
10. 交付访问地址给用户