Как развернуть приложение на GitHub Pages?

В принципе всё верно, но я хочу добавить деталь, которая мне помогла, когда я начала делать deployment. Как уже сказали выше, основа правильная, но многое зависит от того, что ты деплоишь. Если это простой статичный сайт, типа HTML, CSS и vanilla JavaScript, буквально нужно просто запушить код и активировать Pages в settings - выбираешь, хочешь ли ты, чтобы он читал из ветки main и из корневой папки, или из папки /docs. Всё.

Но если используешь React или Vue, то немного иначе. Нужно установить пакет `gh-pages` через npm, потом настроить `package.json`, добавив `"homepage": "https://tuousername.github.io/название-repo"` (важно указать название репо, если это не твой основной сайт). После этого добавляешь скрипты build и deploy, типа `"deploy": "npm run build && gh-pages -d build"` для React. Когда ты запускаешь `npm run deploy`, инструмент компилирует всё и автоматически запушивает папку build в ветку `gh-pages`. В settings активируешь Pages на этой ветке и готово.

Ещё один момент, который я выучила, делая разные попытки: если у тебя не загружаются ассеты или картинки, часто это проблема с относительными путями. Хорошо проверь, что картинки линкуются правильно в твоём коде. И если используешь роутер (типа React Router), нужно его настроить с `basename` для названия репо, иначе ссылки не работают. Это один из тех деталей, которые открываешь, когда видишь всё сломанным в продакшене, хаха.

Верно, то что они сказали - это правильно.

Я бы только добавил, что если у тебя простой статический сайт (html, css, js), то ты вообще ничего особенного делать не должен, просто сделай репозиторий публичным и активируй Pages в настройках, указав ветку, которая нужна, обычно это main.

Для React и подобного нужно установить `gh-pages` и добавить нужные скрипты в package.json, типа `"deploy": "gh-pages -d build"`, потом когда ты выполнишь `npm run deploy` всё загружается автоматически.

Одна штука, о которой никто не говорит, но она действительно полезна: если твой проект не в корне репо, нужно указать правильную папку в настройках GitHub Pages (выбираешь "Deploy from a branch" и выбираешь папку `/docs` или `/dist` в зависимости от того, куда падает сборка).

Я это открыл для себя на собственной шкуре, когда задеплоил сайт рядом с другими проектами в одном репо и оказался с пустой страницей.

Ах, и трюк, который я часто использую: создай простой workflow GitHub Actions, который автоматически делает сборку, когда ты пушишь. Так ты не должен вручную делать `npm run build` и потом коммитить скомпилированную папку - оставляешь это GitHub и управление становится намного чище.

Самое важное - понять, что GitHub Pages требует, чтобы ты выбрал, какую папку использовать как корень сайта, и 90% проблем именно оттого. Это совсем не интуитивно: большинство загружают весь репо, а потом удивляются, почему ничего не видит. Когда я выложил первый проект на Vite, потратил часы на поиск проблемы, потому что файл index.html был в папке dist, а GitHub Pages искал в корне.

Вот как я бы это сделал: создай репо, залей свой код, потом перейди в Settings > Pages. Там выбери ветку (обычно main) и укажи точную папку, где лежат файлы, которые ты хочешь выложить (в большинстве случаев это / для корня, или /docs, или /dist, если используешь bundler). Если используешь React, Vue или что-то подобное, сначала надо запустить сборку локально, чтобы сгенерировать финальные статические файлы, закоммитить эти файлы и только потом активировать их на Pages.

Одна деталь, которая меня спасла потом: если хочешь, чтобы deploy был автоматическим каждый раз, когда ты делаешь push, можешь использовать GitHub Action. Это посложнее, но избавляет от необходимости каждый раз вручную запускать сборку. Раньше я всё делал вручную и периодически забывал закоммитить сборку. Теперь использую простой скрипт, который это делает за меня, и я об этом не думаю.