Представь это как три коробки. Cursor — место, где ты редактируешь сайт. GitHub — безопасная копия с историей изменений. Vercel — публичная версия, которую люди открывают в браузере. Если эти три места настроены нормально, сайт можно менять без страха всё потерять.
Что получится
- Репозиторий GitHub, где сайт безопасно хранится
- Проект Vercel с рабочей публичной ссылкой
- Понятный список приватных настроек: ключи формы, email-токены и похожие вещи
- Простой порядок обновлений: правка, сохранение, публикация, проверка
- Путь отката, если новая версия сломает сайт
● Шаги
От Cursor до живого сайта: GitHub и Vercel без паники
Подготовь проект перед публикацией
Открой сайт в Cursor и проверь, что он запускается на твоём компьютере. Команду обычно видно в package.json, чаще всего это npm run dev. Открой локальную ссылку в браузере и пройди основные страницы. Результат: ты знаешь, что проект не был сломан ещё до GitHub и Vercel.
Создай репозиторий GitHub
Зайди на GitHub, создай новый репозиторий и дай ему простое имя, например bakery-website или clinic-site. Если проект ещё сырой, сделай репозиторий приватным. Результат: у тебя есть пустая онлайн-папка, где сайт будет храниться с историей изменений.
Сохрани первую версию кода
В Cursor открой панель Source Control или терминал. Добавь файлы, напиши короткое сообщение вроде first working version и отправь код в GitHub. Не смешивай первый сохранённый вариант с десятью экспериментами. Результат: в GitHub лежит тот же проект, который есть у тебя на компьютере.
Импортируй репозиторий в Vercel
Открой Vercel, выбери Add New Project, укажи репозиторий из GitHub и дай Vercel определить тип проекта. Перед кнопкой Deploy проверь команду сборки и настройки, которые показывает Vercel. Результат: Vercel собирает сайт из GitHub, а не из случайной папки на ноутбуке.
Добавь приватные настройки в Vercel
Если на сайте есть форма, отправка писем, аналитика или платный API, добавь ключи в Vercel Project Settings -> Environment Variables. Никогда не вставляй приватные ключи в обычные файлы с кодом. Результат: публичный сайт может пользоваться приватными сервисами, но посетители не видят секреты.
Проверь живую ссылку как клиент
Открой ссылку Vercel на телефоне и компьютере. Проверь меню, кнопки, форму, сообщение после отправки, общее ощущение скорости и явные опечатки. Отправь тестовую заявку самому себе. Результат: ты подтверждаешь, что сайт работает для реального посетителя, а не только внутри Cursor.
Используй безопасный порядок обновлений
Для каждой будущей правки: измени в Cursor, проверь локально, сохрани маленький commit, отправь в GitHub, дождись preview в Vercel и только потом проверяй production. Если новая версия что-то сломала, открой Vercel Deployments и верни предыдущий рабочий deployment. Результат: ты можешь улучшать сайт без паники и без гадания, как всё восстановить.
Где чаще ломается
- Держать единственную копию проекта только в Cursor или папке Downloads
- Публиковать до проверки, что сайт запускается локально
- Вставлять приватные ключи прямо в файлы с кодом
- Менять настройки в Vercel и не записывать, что именно изменилось
- Не тестировать живую форму после деплоя
- Делать огромные смешанные commits, которые сложно откатить
Деплой застрял или страшно трогать?
Пришли ссылку GitHub, скрин проекта Vercel и живой URL. Я найду, где рвётся цепочка, и оставлю понятный порядок публикации, который можно повторять.
- Build падает, а ошибка непонятна
- Environment variables отсутствуют или задублированы
- Живой сайт работает иначе, чем в Cursor
- Нужен безопасный откат перед изменениями на production
● Связанные гайды
Связанные гайды
Не хочешь платить за сайт? Сделай сам.
Практический путь от идеи до живого сайта: AI-assisted coding, GitHub, Vercel, домен, форма и базовое SEO.
TAPE-03Промпты для Cursor, чтобы он не делал мусор
Структура промпта для сайтов малого бизнеса: контекст, секции, ограничения, проверки и цикл правок.
TAPE-04Почему AI-сайты выглядят как дешёвые демки
Типовой паттерн провала: фейковый copy, слабый оффер, сломанный mobile, нет форм и индексации.