Как опубликовать сайт на Vercel: репозиторий, сборка и свой домен

Инструкция рассчитана на статический сайт или проект на распространённом каркасе, который собирается одной командой. Всё делается в браузере, ставить что-то на компьютер не обязательно. На первую публикацию уходит минут десять, ещё столько же — на подключение домена.

Что понадобится: аккаунт GitHub с репозиторием сайта, доступ к настройкам домена у регистратора и почта для регистрации. Интерфейс Vercel на английском, поэтому названия кнопок ниже описаны по смыслу.

Подготовьте репозиторий

Положите сайт в репозиторий на GitHub, GitLab или Bitbucket. Для обычного статического сайта достаточно, чтобы в корне лежал файл index.html и папки со стилями и картинками. Для проекта на каркасе проверьте три вещи:

• установка зависимостей — в репозитории есть файл с описанием пакетов и файл с зафиксированными версиями;
• команда сборки — она собирает проект на вашем компьютере без ошибок;
• папка с результатом — именно её Vercel будет раздавать посетителям.

Файлы с паролями и ключами в репозиторий не кладите: для них на Vercel есть отдельное хранилище переменных, о нём шаг седьмой.

Заведите аккаунт

Откройте сайт Vercel и выберите регистрацию. Если войти через GitHub, платформа сразу получит список репозиториев и подключение займёт пару нажатий. При входе GitHub спросит, к каким репозиториям дать доступ: можно разрешить только нужные, а не все сразу.

Подключите репозиторий

В панели нажмите создание нового проекта и выберите репозиторий из списка. Vercel прочитает его содержимое и попробует определить, на чём сделан сайт: Next.js, Vite, Astro или просто набор готовых файлов.

Проверьте настройки сборки

Перед первой публикацией платформа показывает несколько важных полей. Если проект нестандартный, поправьте их вручную:

• каркас — выберите свой из списка или вариант без каркаса для простого статического сайта;
• команда сборки — та же, которой вы собираете проект у себя;
• папка с результатом — куда сборщик складывает готовые файлы;
• корневая папка — укажите её, если сайт лежит не в корне репозитория, а во вложенной папке.

Для сайта из одних только готовых файлов команду сборки оставляют пустой, а папкой результата указывают корень репозитория.

Запустите первую публикацию

Нажмите кнопку публикации и следите за журналом сборки. Если что-то не собралось, в журнале будет та же ошибка, что и на вашем компьютере: чаще всего не хватает зависимости или перепутан регистр букв в имени файла. На серверах Vercel заглавные и строчные буквы в именах файлов различаются, а в Windows — нет, поэтому такая ошибка всплывает именно при первой публикации.

После успешной сборки сайт открывается по адресу вида имя-проекта.vercel.app. Этот адрес остаётся рабочим и дальше, даже когда вы подключите свой домен.

Если репозитория нет и нужно просто выложить папку с готовым сайтом, поставьте утилиту командной строки и выполните из папки проекта две команды:

npm i -g vercel
vercel --prod

Подключите свой домен

Откройте настройки проекта, раздел доменов, и добавьте свой адрес. Vercel покажет, какие записи нужно прописать в панели регистратора домена: для адреса без www обычно это запись типа A на указанный сервер, а для www — запись CNAME на служебное имя.

Добавьте записи у регистратора и подождите. Обновление данных о домене в интернете занимает от нескольких минут до суток. Когда проверка пройдёт, Vercel сам выпустит сертификат, и сайт откроется по защищённому адресу — отдельно платить и что-то настраивать не нужно.

Спрячьте ключи в переменные окружения

Если сайт обращается к сторонним сервисам, их ключи задают в настройках проекта, в разделе переменных окружения. Для боевой версии и для черновых сборок можно указать разные значения — так проверочные правки не тронут настоящие данные. После изменения переменных запустите сборку заново, иначе сайт продолжит работать со старыми значениями.

Проверьте автоматическое обновление

Измените что-нибудь в репозитории и отправьте изменения в главную ветку. Vercel сам запустит сборку, и через минуту-две сайт обновится. Если создать отдельную ветку, у неё появится свой временный адрес — удобно показывать правки до того, как они попадут на основной сайт.

Готово: сайт в интернете, обновляется сам, работает по вашему домену с защищённым соединением, а любую прошлую версию можно вернуть из списка выкладок в панели.

Если что-то пошло не так