web-deploy-github

# 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