mcpField
W
web-deploy-github

web-deploy-github

github.com/cjhfff云与 DevOps143 次安装37 周前更新
代码仓库

关于 web-deploy-github

用于创建静态网站并部署到 GitHub Pages 的技能，适合制作作品集、落地页等单页网站。它提供项目初始化和 GitHub Actions 部署流程，并附带 HTML、CSS 和 JavaScript 模板。

主要功能

  1. 01初始化网站项目结构
  2. 02使用作品集和落地页模板
  3. 03设置 GitHub 仓库和 Pages
  4. 04通过 GitHub Actions 推送后部署
  5. 05提供响应式设计与性能指导

适用场景

  1. 01创建作品集或简历网站
  2. 02为应用制作落地页
  3. 03在 GitHub Pages 发布静态网站

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/cjhfff/cjh-skills --skill web-deploy-github

安装后在 Claude Code 中输入/web-deploy-github确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

_meta.json
.clawhub/
origin.json
assets/templates/base-html/
index.html
script.js
styles.css
assets/templates/landing/
index.html
script.js
styles.css
assets/templates/portfolio/
index.html
script.js
styles.css
references/
design-patterns.md
workflow.md
scripts/
deploy_github_pages.sh
init_project.sh

详细介绍

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（flexbox、grid）、响应式设计和简洁美观的样式
  • 无依赖：尽可能使用纯 HTML/CSS/JS；如需框架，则使用 CDN 链接

使用 assets/templates/ 中的模板作为起点：

  • base-html/ - 最简 HTML5 样板
  • portfolio/ - 包含多个版块的作品集/CV 模板
  • landing/ - 包含主视觉区和 CTA 的落地页
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 会在推送到 main 分支时自动部署。工作流会：

  • 检出代码
  • 部署到 gh-pages 分支
  • 使网站在 https://<username>.github.io/<project-name>/ 上线

架构指南

HTML 结构
  • 使用语义化 HTML5 元素
  • 添加用于 SEO 和社交分享的元标签
  • 配置响应式视口
  • 添加网站图标和其他图标
CSS 设计
  • 采用移动优先的响应式设计
  • 使用 CSS 变量进行主题设置
  • 使用 Flexbox/Grid 布局
  • 添加平滑过渡和动画
  • 适当支持深色模式
JavaScript
  • 优先使用原生 JS
  • 渐进式增强
  • 使用事件委托
  • 不产生控制台错误
性能
  • 优化图片
  • 为生产环境压缩资源
  • 适当使用延迟加载
  • 缩短初始加载时间

快速示例

示例 1：作品集 CV 网站

用户请求：“Crée-moi un site portfolio CV”

操作：

  1. 运行 init_project.sh portfolio-cv
  2. 使用 assets/templates/portfolio/ 作为基础
  3. 生成包含以下版块的完整 HTML：主视觉区、关于、技能、项目、联系
  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. 生成包含主视觉区、功能、定价和 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/ - 作品集/CV 模板
  • templates/landing/ - 落地页模板
  • .github/workflows/deploy.yml - GitHub Actions 工作流模板

评论

支持 Markdown