Web Deploy Github

---
name: web-deploy-github
description: "Create and deploy single-page static websites to GitHub Pages with an autonomous workflow. Use for portfolios, CV pages, landing pages, or static web projects that need GitHub Pages hosting."
description_zh: "创建并部署单页静态网站到 GitHub Pages"
description_en: "Create and deploy single-page static websites to GitHub Pages"
version: 1.0.0
homepage: https://api.skillhub.cn/thomeksolutions/web-deploy-github
allowed-tools: Bash,Read,Write
---
# Web Deploy 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.

## Core Workflow

### 1. Project Initialization

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
```

### 2. Development

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

### 3. GitHub Repository Setup

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

This script:
1. Initializes git repository
2. Creates GitHub repository via GitHub CLI
3. Configures GitHub Pages settings
4. Pushes initial commit
5. Triggers first deployment

### 4. Deployment

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>/`

## Architecture Guidelines

### HTML Structure
- Semantic HTML5 elements
- Meta tags for SEO and social sharing
- Responsive viewport configuration
- Favicon and icons

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

### JavaScript
- Vanilla JS preferred
- Progressive enhancement
- Event delegation
- No console errors

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

## Quick Examples

### Example 1: Portfolio CV Site
**User request:** "Crée-moi un site portfolio CV"

**Action:**
1. Run `init_project.sh portfolio-cv`
2. Use `assets/templates/portfolio/` as base
3. Generate complete HTML with sections: Hero, About, Skills, Projects, Contact
4. Deploy with `deploy_github_pages.sh portfolio-cv username`

### Example 2: Landing Page
**User request:** "Fais-moi une landing page pour mon app"

**Action:**
1. Run `init_project.sh app-landing`
2. Use `assets/templates/landing/` as base
3. Generate with Hero, Features, Pricing, CTA
4. Deploy with `deploy_github_pages.sh app-landing username`

## Troubleshooting

### GitHub Pages Not Deploying
- 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)

### Permission Errors
- Ensure `gh` CLI is authenticated: `gh auth status`
- Check repository permissions on GitHub

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

## Resources

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

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

### 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