Вчерашний проект я изначально хотел просто оставить в песочнице, на Codesandbox, но

#инструмент дня

Вчерашний проект я изначально хотел просто оставить в песочнице, на 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 можно понапихать ещё чего-то нужного, от подключения ключей до кастомной аналитики.