# Static Webpage Dev

> 静态网页开发与GitHub Pages部署工作流。当用户需要开发网页、创建网站、部署静态页面、制作活动页时调用。包含完整的需求分析、资源验证、本地预览、GitHub部署流程。

- Skill: `cyangzhou/static-webpage-dev` (Agent Skill)
- Install (CLI): `npx skillmds@latest add cyangzhou/static-webpage-dev`
- Raw SKILL.md: https://api.skillmd.com/api/skills/cyangzhou/static-webpage-dev/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: cyangzhou (https://skillmd.com/u/cyangzhou)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/cyangzhou/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. 本地预览验证
```bash
cd output && python -m http.server 8080
```

验证清单：
- [ ] 页面正常加载
- [ ] 资源正确显示
- [ ] 交互功能正常
- [ ] 移动端适配

### 6. GitHub仓库准备
检查/创建仓库，确认Token有repo权限。

### 7. 推送到GitHub
使用GitHub MCP推送，避免网络问题。

### 8. 启用GitHub Pages
Settings → Pages → main分支

### 9. 线上验证
访问Pages地址，确认所有功能正常。

### 10. 完成交付
报告访问地址和使用说明。

## 使用方法

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

```python
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. 交付访问地址给用户