Деплой на GitHub Pages
hoyoboy0726123/claude-skill-github-pages-deployerClaude Code скилл для полной автоматизации деплоя фронтенд-проектов на GitHub Pages: от `git init` до живого URL. Настраивает GitHub Actions, создаёт репозиторий и отслеживает выполнение без ручных шагов.
Установка
npx claude-skill-github-pages-deployerREADME
claude-skill-github-pages-deployer
Claude Code скилл, который автоматизирует полный цикл деплоя фронтенд-проектов на GitHub Pages — от
git initдо живого URL — без единой ручной команды.
Что делает скилл
Когда вы говорите Claude «задеплой на GitHub Pages», скилл берёт управление и обрабатывает весь пайплайн:
| Шаг | Что происходит автоматически |
|---|---|
| 1. Конфиг | Добавляет base: '/<repo>/' в vite.config.js, чтобы ассеты загружались корректно |
| 2. Git | Выполняет git init, создаёт коммиты и создаёт репозиторий на GitHub через gh CLI |
| 3. Воркфлоу | Записывает проверенный .github/workflows/deploy.yml (один джоб, без проблем с кешем) |
| 4. Pages | Включает GitHub Pages через API в режиме Actions |
| 5. Мониторинг | Следит за выполнением Actions в реальном времени и автоматически исправляет ошибки |
Никаких ручных шагов. Никаких «проверьте вкладку Actions». Скилл ждёт, пока сайт не станет доступен.
Фразы-триггеры
Claude активирует скилл, когда вы говорите что-то вроде:
- «Задеплой этот проект на GitHub Pages»
- «Запушь на GitHub и настрой Pages»
- «Захости это Vite-приложение на GitHub Pages»
- «Создай репозиторий на GitHub и задеплой»
Установка
Вариант 1 — npx (рекомендуется, установка не нужна)
npx claude-skill-github-pages-deployer
Вариант 2 — глобальная установка через npm (скилл копируется автоматически при npm install -g)
npm install -g claude-skill-github-pages-deployer
Скилл копируется в
~/.claude/skills/github-pages-deployer/SKILL.mdавтоматически. После установки перезапустите Claude Code.
Вариант 3 — curl (однострочник)
mkdir -p ~/.claude/skills/github-pages-deployer && \
curl -o ~/.claude/skills/github-pages-deployer/SKILL.md \
https://raw.githubusercontent.com/hoyoboy0726123/claude-skill-github-pages-deployer/main/SKILL.mdВариант 4 — клонирование репозитория
git clone https://github.com/hoyoboy0726123/claude-skill-github-pages-deployer.git \
~/.claude/skills/github-pages-deployerПосле любого способа установки перезапустите Claude Code, чтобы скилл загрузился.
Требования
| Инструмент | Назначение | Установка |
|---|---|---|
git | Контроль версий | git-scm.com |
gh (GitHub CLI) | Создание репозитория и API-вызовы | cli.github.com |
node ≥ 18 | Среда сборки (CI) | Обрабатывается воркфлоу |
CLI gh должен быть аутентифицирован:
gh auth status # должно показать: ✓ Logged in to github.com
Совместимость
| Фреймворк | Поддержка | Примечания |
|---|---|---|
| Vite (React, Vue, Svelte…) | ✅ | Автоматически добавляет base path |
| Create React App | ✅ | Добавьте "homepage" в package.json вручную |
| Next.js (статический экспорт) | ✅ | Требует output: 'export' в next.config.js |
| Чистый HTML/CSS/JS | ✅ | Шаг сборки не нужен |
| Angular | ✅ | Обновите outputPath в angular.json |
Проверенный воркфлоу
Скилл использует воркфлоу с одним джобом (не распространённый паттерн с разделёнными джобами build/deploy), который протестирован и подтверждён рабочим:
name: Deploy static content to Pages
on:
push:
branches: ["master", "main"]
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
- run: npm install --legacy-peer-deps
- run: npm run build
- uses: actions/configure-pages@v4
- uses: actions/upload-pages-artifact@v3
with:
path: './dist'
- id: deployment
uses: actions/deploy-pages@v4Почему --legacy-peer-deps?
Конфликты peer-зависимостей крайне распространены во фронтенд-проектах. npm ci завершится с ошибкой, если отсутствует package-lock.json или есть конфликты peer-зависимостей. npm install --legacy-peer-deps более гибок и надёжно работает в разных проектах.
Почему один джоб deploy?
Паттерн с разделёнными джобами build/deploy требует аккуратной передачи артефактов между джобами и сложнее в отладке. Один джоб проще, быстрее и не менее корректен.
Известные проблемы и решения
| Симптом | Причина | Решение |
|---|---|---|
| Белый экран / 404 на ассетах | Vite по умолчанию использует абсолютные пути | Скилл автоматически добавляет base: '/<repo>/' в конфиг Vite |
PermissionError на пути в Windows | Git Bash переписывает /repos/... как путь файловой системы | Скилл использует repos/... (без ведущего слеша) в вызовах gh api |
npm ci падает в CI | Отсутствует package-lock.json | Скилл использует npm install --legacy-peer-deps |
| Pages показывает старую сборку | Кеш браузера | Жёсткое обновление через Ctrl+Shift+R |
Пример сессии
Вы: Задеплой моё Vite-приложение V3 на GitHub Pages под аккаунтом hoyoboy0726123
Claude: ✓ Добавлен base: '/my-app/' в vite.config.js
✓ Инициализирован git-репозиторий, закоммичено 23 файла
✓ Создан репозиторий на GitHub: hoyoboy0726123/my-app
✓ Создан .github/workflows/deploy.yml
✓ Включён GitHub Pages (режим Actions)
✓ Запушено в main — деплой запущен (run #12345678)
Мониторинг...
✓ Checkout (2s)
✓ Set up Node (8s)
✓ npm install (34s)
✓ npm run build (12s)
✓ Deploy to Pages (18s)
🎉 Сайт доступен по адресу: https://hoyoboy0726123.github.io/my-app/