界面设计
界面设计
技能简介
该技能支持从零开始创建单页静态网站，并通过GitHub Actions工作流自动部署到GitHub Pages。
业务背景
面向个人开发者与小型团队，快速搭建作品集、简历页或产品展示站点。无需服务器运维知识，从项目创建到网站上线全程自动化，降低技术门槛与部署成本，让业务人员也能独立发布专业静态页面。
落地案例：设计师小王需要上线个人作品集。他提供项目名称和GitHub用户名，技能自动初始化HTML/CSS结构、配置GitHub Actions工作流并开通Pages服务。代码推送到main分支后，网站自动构建发布，获得专属访问链接。后续更新作品只需修改代码再次推送，无需手动操作部署流程。
能做什么
- 一键初始化项目结构（HTML/CSS/JS + GitHub Actions配置）
- 基于模板生成作品集、简历页、产品落地页等站点
- 自动创建GitHub仓库并配置Pages服务
- 推送代码后自动触发部署，无需手动操作
使用说明
前置条件：已安装GitHub CLI（gh）并完成认证。
步骤1：安装与初始化
# 克隆技能仓库后执行
bash scripts/init_project.sh <项目名称>该命令生成标准目录结构，包含index.html、样式脚本、README及部署工作流文件。
步骤2：开发与定制
从assets/templates/选择模板起步：
base-html/– 极简HTML5骨架portfolio/– 作品集/简历模板landing/– 营销落地页模板
编码原则：优先原生技术栈，响应式设计，无占位符的完整实现。
步骤3：部署上线
bash scripts/deploy_github_pages.sh <项目名称> <GitHub用户名>脚本自动完成git初始化、远程仓库创建、Pages设置及首次推送。后续每次推送到main分支即自动重新部署。
输入与输出
见下方输入与输出表格。
| 项目 | 内容 |
|---|---|
| 输入 | 项目名称、GitHub用户名、模板类型（可选）、页面内容描述（可选） |
| 输出 | GitHub仓库、GitHub Pages线上站点、自动化部署工作流 |
| 适用人群 | 需要快速上线静态展示页面的开发者、设计师、求职者、产品人员 |
| 不包含 | 服务端渲染、数据库交互、自定义域名配置、多页面路由管理 |
风险提示
- 需提前配置
gh认证，否则仓库创建步骤失败 - GitHub Pages首次生效存在5-10分钟延迟
- 仓库权限不足会导致Actions运行失败
- 自定义域名需额外DNS配置，本技能未覆盖
来源信息
原始链接：https://github.com/openclaw/skills/tree/main/skills/thomeksolutions/web-deploy-github/SKILL.md
来源类型：开源技能仓库
常见问题
Q1：GitHub静态网站部署 适合哪些场景？
A：适合需要「该技能支持从零开始创建单页静态网站，并通过GitHub Actions工」的场景，尤其是希望快速验证并落地的团队与个人。
Q2：第一次使用应该先做什么？
A：先明确目标任务，再按照页面中的“能做什么”和“使用说明”完成最小可行流程。
Q3：如何判断是否值得长期使用？
A：建议连续使用 1-2 周，对比效率、稳定性和协作成本，再决定是否纳入长期工具栈。
替代方案
相关推荐
数据统计
相关导航
暂无评论...