SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场web-deploy-github

web-deploy-github

部署与运维

查看项目

更新于 10-16 16:27

技能介绍

用途

web-deploy-github 用于自主创建静态网站并将其部署到 GitHub Pages，产出可访问的在线 URL。其核心目标是完成仓库设置、GitHub Actions 配置以及 GitHub Pages 部署的整套流程。

当目标就是仓库搭建、GitHub Actions 和 GitHub Pages 部署时，使用本技能。若核心需求是把应用或游戏打包成单个可分发的 HTML 产物，应使用 web-bundling；如需分发单文件站点，可先运行 web-bundling，再用本技能进行托管。

主要能力

本技能覆盖从项目结构初始化到通过 GitHub Actions 自动部署的完整工作流，针对单页应用、作品集和落地页进行了优化。

核心工作流包括：

  1. 项目初始化：运行 bash scripts/init_project.sh <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/（含 hero 与 CTA 的落地页模板）。

  3. GitHub 仓库设置：运行 bash scripts/deploy_github_pages.sh <project-name> <github-username>，脚本会初始化 git 仓库、通过 GitHub CLI 创建 GitHub 仓库、配置 GitHub Pages 设置、推送首次提交并触发首次部署。

  4. 部署：GitHub Actions 在推送到 main 分支时自动部署，工作流会检出代码、部署到 gh-pages 分支，网站发布在 https://<username>.github.io/<project-name>/。

架构与设计指引

HTML 结构：使用语义化 HTML5 元素、SEO 与社交分享的 meta 标签、响应式 viewport 配置以及 favicon 和图标。

CSS 设计：移动优先的响应式设计、用于主题化的 CSS 变量、flexbox/grid 布局、平滑过渡与动画，适当时支持深色模式。

JavaScript：优先使用原生 JS、渐进增强、事件委托，确保无控制台错误。

性能：优化图片、生产环境压缩资源、适当使用懒加载、加快首屏加载速度。

使用方式

初始化项目：bash scripts/init_project.sh <project-name>

部署到 GitHub Pages：bash scripts/deploy_github_pages.sh <project-name> <github-username>

使用模板：以 assets/templates/ 下的 base-html/、portfolio/、landing/ 为起点。

示例场景：

作品集 CV 网站：运行 init_project.sh portfolio-cv，使用 assets/templates/portfolio/ 作为基础，生成包含 Hero、About、Skills、Projects、Contact 等分区的完整 HTML，再用 deploy_github_pages.sh portfolio-cv username 部署。

落地页：运行 init_project.sh app-landing，使用 assets/templates/landing/ 作为基础，生成包含 Hero、Features、Pricing、CTA 的页面，再用 deploy_github_pages.sh app-landing username 部署。

适用场景

适合构建作品集网站、CV 页面、落地页，以及任何需要部署到 GitHub Pages 的单页静态网站。

限制与注意事项

排查建议：若 GitHub Pages 未部署，检查仓库 Settings → Pages → Source 是否设为 gh-pages 分支，确认 GitHub Actions 工作流是否成功运行，并留意 DNS 传播（可能需 5-10 分钟）。权限错误时确认 gh CLI 已认证（gh auth status）并检查 GitHub 上的仓库权限。构建失败时查看仓库中的 Actions 日志，核对 .github/workflows/deploy.yml 语法以及文件路径与引用。

护栏要求：部署前必须确认 git status 干净，存在未提交更改或未跟踪文件时应中止部署。禁止提交敏感信息，API 密钥、令牌、密码不得写入源码，部署前检查 .gitignore，并通过 git log --diff-filter=A -- '*.env' 等方式阻止密钥文件混入。构建失败时需有回滚流程，工作流失败时可在 git revert 或 gh run rerun 之前确认回滚分支，并通过 force-push gh-pages 分支最后一个正常提交来恢复。修改 CNAME 或自定义域名前必须与相关人员确认，DNS 传播延迟最长可达 48 小时，可能导致服务中断。

具体脚本参数、模板内容与工作流细节以技能包内实际文件为准；资料未提供的功能、价格、平台支持等信息暂未提供。