Agent-Skills.md

Agent Skills: GitHub Pages Deployment

Deploy static or interactive frontend content to GitHub Pages using gh CLI. Use when the user wants to publish, share, or make accessible any HTML/CSS/JS content - including demos, prototypes, visualizations, landing pages, portfolios, documentation, interactive tools, games, or any browser-based project. Activate whenever content needs to be publicly viewable via URL, not just when "website" is explicitly mentioned.

UncategorizedID: aviz85/claude-skills-library/gh-pages-deploy
114

Install this agent skill to your local

pnpm dlx add-skill https://github.com/aviz85/claude-skills-library/tree/HEAD/skills/gh-pages-deploy

Skill Files

Browse the full folder contents for gh-pages-deploy.

Download Skill

Loading file tree…

skills/gh-pages-deploy/SKILL.md

Skill Metadata

Name
gh-pages-deploy
Description
Deploy static or interactive frontend content to GitHub Pages using gh CLI. Use when the user wants to publish, share, or make accessible any HTML/CSS/JS content - including demos, prototypes, visualizations, landing pages, portfolios, documentation, interactive tools, games, or any browser-based project. Activate whenever content needs to be publicly viewable via URL, not just when "website" is explicitly mentioned.

GitHub Pages Deployment

Deploy static frontend websites to GitHub Pages using the GitHub CLI.

Prerequisites

  • GitHub CLI (gh) installed and authenticated
  • Git installed
  • A frontend project (HTML, CSS, JS) ready to deploy

Deployment Workflow

1. Initialize Git Repository (if needed)

git init
git add .
git commit -m "Initial commit"

2. Create GitHub Repository

# Create public repo (required for free GitHub Pages)
gh repo create <repo-name> --public --source=. --push

3. Enable GitHub Pages

# Enable GitHub Pages from main branch root
gh api repos/{owner}/{repo}/pages -X POST -f build_type=legacy -f source='{"branch":"main","path":"/"}'

Or for docs folder:

gh api repos/{owner}/{repo}/pages -X POST -f build_type=legacy -f source='{"branch":"main","path":"/docs"}'

4. Check Deployment Status

# Get pages info
gh api repos/{owner}/{repo}/pages

# View deployment status
gh api repos/{owner}/{repo}/pages/builds/latest

5. Set Homepage URL in Repo Settings

Always do this — sets the live URL in the GitHub repo's About panel (top-right on the repo page):

OWNER=$(gh api user --jq '.login')
PAGES_URL=$(gh api repos/$OWNER/$REPO_NAME/pages --jq '.html_url')
gh api --method PATCH repos/$OWNER/$REPO_NAME --field homepage="$PAGES_URL" --jq '.homepage'

6. Get Site URL

The site will be available at: https://<username>.github.io/<repo-name>/

Auto-deploy is active: every push to main triggers a rebuild. No GitHub Actions needed for legacy build.

Quick Deploy Script

For a complete deployment in one flow:

# Variables
REPO_NAME="my-site"

# Initialize and commit
git init
git add .
git commit -m "Initial commit"

# Create repo and push
gh repo create $REPO_NAME --public --source=. --push

# Enable pages
sleep 2
OWNER=$(gh api user --jq '.login')
gh api repos/$OWNER/$REPO_NAME/pages -X POST -f build_type=legacy -f source='{"branch":"main","path":"/"}'

# Set homepage URL in repo About panel
PAGES_URL="https://$OWNER.github.io/$REPO_NAME/"
gh api --method PATCH repos/$OWNER/$REPO_NAME --field homepage="$PAGES_URL" --jq '.homepage'

echo "✓ Site live at: $PAGES_URL"

Troubleshooting

  • Pages not enabled: Ensure repo is public or you have GitHub Pro
  • 404 error: Wait 1-2 minutes for deployment, check if index.html exists at root
  • Build failed: Check GitHub Actions tab for errors

Updating the Site

After making changes:

git add .
git commit -m "Update site"
git push

GitHub Pages will automatically rebuild.