Telegram-канал htmlshit - Будни разработчика: Unsorted

Будни разработчика

17 February 2025 10:40

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

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