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

По сути ты создаёшь репозиторий на GitHub, пушишь туда свой код, и если используешь фреймворк вроде React или Vue, настраиваешь скрипт билда в package.json, потом включаешь GitHub Pages в настройках репозитория, указав папку dist или gh-pages. Если это простой статический сайт HTML/CSS/JS, просто пушишь файлы прямо в ветку main или создаёшь ветку gh-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 и управление становится намного чище.