gh-pages деплой

GitHub Pages — бесплатный хостинг статики на любом публичном репозитории. Базовый способ деплоя для bootcamp.

Как работает

  1. В репозитории создаётся ветка gh-pages (или используется main + папка /docs).
  2. GitHub автоматически публикует содержимое этой ветки по адресу:
    https://<github-username>.github.io/<repo-name>/
  3. Для bootcamp обычно структура такая:
    https://<github-username>.github.io/<repo>/<task-folder>/index.html

Подключение в репо

  1. Settings → Pages → Source → выбрать ветку gh-pages и папку / (root).
  2. Дождаться первого деплоя (1–3 минуты, индикатор зелёный).
  3. Открыть URL — должна загрузиться страница.

Workflow для bootcamp

Для большинства задач:

main         ← дефолтная, сюда НЕ мержим
└── <task>   ← рабочая ветка (например, shelter)
    └── gh-pages — деплой

Файлы задачи кладутся в папку с именем задачи внутри gh-pages-ветки. Деплой будет:

https://<user>.github.io/<repo>/<task>/index.html

Альтернативы

  • Netlify Drop — https://app.netlify.com/drop — перетащил папку → URL. Используется когда gh-pages недоступен. См. Netlify Drop.
  • Netlify Preview Bot — автоматически создаёт preview URL для каждого PR. Используется в JS30.

Типичные грабли

  • ❌ Пути к ассетам по абсолюту (/styles/main.css) → ломаются на GitHub Pages потому что URL начинается с имени репозитория, а не с корня домена. Используй относительные пути (./styles/main.css).
  • ❌ Регистр в именах файлов — у Linux строгий, у Windows нет. Image.PNG ≠ image.png.
  • ❌ Большие assets в репо — лимит 1GB, лучше держать чисто.
  • ❌ Кэш браузера — после деплоя обнови с Ctrl+Shift+R, иначе видишь старую версию.

Проверка перед сабмитом

  • URL открывается в incognito
  • DevTools → Console: нет ошибок 404
  • DevTools → Network: все ассеты грузятся
  • Layout не сломан на 1280px и на 320px (для responsive задач)

Связанное