web-deploy-github

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Web Deploy GitHub Pages

部署静态网站至GitHub Pages

Overview

概述

This skill enables autonomous creation and deployment of static websites to GitHub Pages. It follows a complete workflow from project structure initialization through automatic deployment via GitHub Actions, optimized for single-page applications, portfolios, and landing pages.

该Skill可实现静态网站到GitHub Pages的自动化创建与部署。它遵循从项目结构初始化到通过GitHub Actions自动部署的完整工作流，专为单页应用、作品集和落地页优化。

Core Workflow

核心工作流

1. Project Initialization

1. 项目初始化

Create the project structure:

bash

bash scripts/init_project.sh <project-name>

This creates:

project-name/
├── index.html
├── styles.css
├── script.js
├── README.md
└── .github/
    └── workflows/
        └── deploy.yml

创建项目结构：

bash

bash scripts/init_project.sh <project-name>

该脚本会创建如下结构：

project-name/
├── index.html
├── styles.css
├── script.js
├── README.md
└── .github/
    └── workflows/
        └── deploy.yml

2. Development

2. 开发阶段

Build the website following these principles:

Single-page first: Optimize for one-page layouts unless multiple pages explicitly required
Autonomous generation: Generate complete, production-ready code without placeholders
Modern design: Use modern CSS (flexbox, grid), responsive design, clean aesthetics
No dependencies: Pure HTML/CSS/JS when possible, CDN links if frameworks needed

Use templates from

assets/templates/

as starting points:

```
base-html/
```
- Minimal HTML5 boilerplate
```
portfolio/
```
- Portfolio/CV template with sections
```
landing/
```
- Landing page with hero and CTA

遵循以下原则构建网站：

优先单页设计：除非明确需要多页面，否则优先优化单页布局
自动化代码生成：生成完整的、可直接用于生产环境的代码，无占位符
现代设计风格：使用现代CSS（flexbox、grid）、响应式设计，保持简洁美观
无依赖优先：尽可能使用纯HTML/CSS/JS，若需框架则使用CDN链接

可从

assets/templates/

目录选择模板作为开发起点：

```
base-html/
```
- 极简HTML5模板
```
portfolio/
```
- 带多板块的作品集/简历模板
```
landing/
```
- 包含Hero区域和CTA的落地页模板

3. GitHub Repository Setup

3. GitHub仓库配置

bash

bash scripts/deploy_github_pages.sh <project-name> <github-username>

This script:

Initializes git repository
Creates GitHub repository via GitHub CLI
Configures GitHub Pages settings
Pushes initial commit
Triggers first deployment

bash

bash scripts/deploy_github_pages.sh <project-name> <github-username>

该脚本会执行以下操作：

初始化Git仓库
通过GitHub CLI创建GitHub仓库
配置GitHub Pages设置
推送初始提交
触发首次部署

4. Deployment

4. 部署阶段

GitHub Actions automatically deploys on push to main branch. The workflow:

Checks out code
Deploys to
```
gh-pages
```
branch

Makes site live at

https://<username>.github.io/<project-name>/

当代码推送到main分支时，GitHub Actions会自动执行部署。工作流步骤如下：

拉取代码
部署到
```
gh-pages
```
分支

网站将在

https://<username>.github.io/<project-name>/

地址上线

Architecture Guidelines

架构设计规范

HTML Structure

HTML结构规范

Semantic HTML5 elements
Meta tags for SEO and social sharing
Responsive viewport configuration
Favicon and icons

使用语义化HTML5元素
添加用于SEO和社交分享的Meta标签
配置响应式视口
设置网站图标（Favicon）

CSS Design

CSS设计规范

Mobile-first responsive design
CSS variables for theming
Flexbox/Grid for layouts
Smooth transitions and animations
Dark mode support when appropriate

�采用移动端优先的响应式设计
使用CSS变量实现主题定制
使用Flexbox/Grid实现布局
添加平滑的过渡与动画效果
酌情支持深色模式

JavaScript

JavaScript规范

Vanilla JS preferred
Progressive enhancement
Event delegation
No console errors

优先使用原生JavaScript
采用渐进式增强方案
使用事件委托
确保无控制台错误

Performance

性能优化规范

Optimized images
Minified assets for production
Lazy loading where appropriate
Fast initial load time

图片优化
生产环境下压缩资源文件
酌情使用懒加载
确保首屏加载速度快

Quick Examples

快速示例

Example 1: Portfolio CV Site

示例1：作品集/简历网站

User request: "Crée-moi un site portfolio CV"

Action:

Run
```
init_project.sh portfolio-cv
```
Use
```
assets/templates/portfolio/
```
as base
Generate complete HTML with sections: Hero, About, Skills, Projects, Contact

Deploy with

deploy_github_pages.sh portfolio-cv username

用户需求： "帮我创建一个作品集/简历网站"

操作步骤：

执行
```
init_project.sh portfolio-cv
```
以
```
assets/templates/portfolio/
```
为基础模板
生成包含Hero、关于我、技能、项目、联系方式板块的完整HTML代码

执行

deploy_github_pages.sh portfolio-cv username

完成部署

Example 2: Landing Page

示例2：落地页

User request: "Fais-moi une landing page pour mon app"

Action:

Run
```
init_project.sh app-landing
```
Use
```
assets/templates/landing/
```
as base
Generate with Hero, Features, Pricing, CTA

Deploy with

deploy_github_pages.sh app-landing username

用户需求： "帮我为我的应用创建一个落地页"

操作步骤：

执行
```
init_project.sh app-landing
```
以
```
assets/templates/landing/
```
为基础模板
生成包含Hero、功能介绍、定价、CTA的页面

执行

deploy_github_pages.sh app-landing username

完成部署

Troubleshooting

故障排查

GitHub Pages Not Deploying

GitHub Pages未部署成功

Check repository Settings → Pages → Source is set to
```
gh-pages
```
branch
Verify GitHub Actions workflow ran successfully
Check DNS propagation (can take 5-10 minutes)

检查仓库设置→Pages→Source是否设置为
```
gh-pages
```
分支
确认GitHub Actions工作流执行成功
检查DNS传播状态（可能需要5-10分钟）

Permission Errors

权限错误

Ensure
```
gh
```
CLI is authenticated:
```
gh auth status
```
Check repository permissions on GitHub

确保
```
gh
```
CLI已完成认证：执行
```
gh auth status
```
检查
在GitHub上检查仓库权限

Build Failures

构建失败

Review Actions logs in repository
Verify
```
.github/workflows/deploy.yml
```
syntax
Check file paths and references

查看仓库中的Actions日志
验证
```
.github/workflows/deploy.yml
```
的语法正确性
检查文件路径和引用是否正确

Resources

资源说明

scripts/

```
init_project.sh
```
- Initialize project structure
```
deploy_github_pages.sh
```
- Deploy to GitHub Pages

```
init_project.sh
```
- 初始化项目结构
```
deploy_github_pages.sh
```
- 部署至GitHub Pages

references/

```
workflow.md
```
- Detailed workflow documentation
```
design-patterns.md
```
- Design best practices

```
workflow.md
```
- 详细工作流文档
```
design-patterns.md
```
- 设计最佳实践

assets/

```
templates/base-html/
```
- Minimal HTML5 boilerplate
```
templates/portfolio/
```
- Portfolio/CV template
```
templates/landing/
```
- Landing page template
```
.github/workflows/deploy.yml
```
- GitHub Actions workflow template

```
templates/base-html/
```
- 极简HTML5模板
```
templates/portfolio/
```
- 作品集/简历模板
```
templates/landing/
```
- 落地页模板
```
.github/workflows/deploy.yml
```
- GitHub Actions工作流模板