Вчерашний проект я изначально хотел просто оставить в песочнице, на Codesandbox, но решил, что это не имеет никакого смысла. Потому, GitHub Pages — наш путь.
Так вот, никто же не хочет ограничиваться одним репозиторием, как на главной странице документации, верно?
username.github.io, конечно, хорошо, но репозиториев-то хочется много!И для этого GitHub может просто деплоить в подкаталог из ветки, которая настраивается в разделе Pages конфигурации репозитория. Выходит, всё, что нужно сделать, это положить в эту ветку ваш собранный проект.
И тут, опять же, возникает нюанс. Как правило, дистрибутив (сборку) проекта не принято хранить в основной ветке.Каталог
dist или build почти всегда включён в любой рекомендованный файл .gitignore.Поэтому надо:
- переключиться в ветку
- удалить из-под гита файлы
- собрать проект
- добавить каталог со сборкий...
выходит, мягко говоря, муторно.
Но, как всегда, есть решение! Пакет gh-pages.
Он проделает все эти операции за вас, ему нужно лишь немного помочь. И тут есть два нюанса.
Во-первых, документация даёт неожиданно много информации и сначала можно даже смутиться. Но на самом деле, всё, что надо сделать — это прописать следующий скрипт в package.json (я исхожу из соображения, что в git вы пушить уже научились):
"scripts": {
"deploy": "gh-pages -d build"
}
И второй нюанс: сборку надо совсем чуть-чуть настроить.
Видите ли, все сборщики проектов (будь то vite, rsbuild, esbuild, rollup или даже Next.js) по-умолчанию полагают, что ваш проект лежит в корне сайта. И от этого и строят все пути, загружают картинки, стили и скрипты.
К счастью, в большинстве из них это очень легко решается: установкой параметра
basePath (или просто base).В vite для этого даже не нужно городить новую конфигурацию, просто передаёте в строке сборки:
"scripts": {
"build-ghp": "vite build --base=/GlitchBeat",
}
Обратили внимание, что я делаю кастомную команду, которая отличается от
build? В скрипте build я оставляю настройки сборщика по-умолчанию. Это простая гигиена.А теперь, объединяем всё вместе! У
gh-pages есть прекрасная и очень полезная нам особенность: он автоматически вызовет скрипт predeploy. Как можно догадаться, это что-то, что можно сделать перед выкладыванием проекта. И в нашем случае — это, собственно, сборка:
"scripts": {
"build-ghp": "vite build --base=/GlitchBeat",
"predeploy": "npm run build-ghp",
"deploy": "gh-pages -d dist"
}
И всё, вы великолепны! Хотите собрать и задеплоить проект куда-то в иное место — никто обычный
build у вас не отбирал, собирайте и запускайте как угодно. А в predeploy и build-ghp можно понапихать ещё чего-то нужного, от подключения ключей до кастомной аналитики.