Сайт вайб-кодингом: от описания до публикации

Сделать сайт с помощью ИИ сегодня может человек, который ни разу не писал код. Такой способ называют вайб-кодингом: вы описываете словами, что нужно, а нейросеть пишет код и помогает выложить сайт в интернет.

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

Что нужно, чтобы сделать сайт вайб-кодингом

• Помощник, который сам правит файлы. Например, Claude Code в бесплатной программе VS Code для работы с файлами сайта: с чего начать, показано в статье как пользоваться Claude Code. Если он вам недоступен, другие помощники сравниваются в обзоре лучших моделей для вайб-кодинга.
• Папка на компьютере, где будут лежать файлы сайта.
• Хостинг, то есть место для файлов сайта на чужом компьютере, где всё уже настроено за вас. Для сайта из нескольких страниц, как у кофейни, его хватит, и форму заявок помощник настроит прямо там.
• Свой сервер, если кроме сайта нужны другие программы, например программа, которая разбирает заявки и рассылает их сотрудникам. Это целый арендованный компьютер. Самый простой подходящий у Beget стоит 32 ₽ в сутки вместе с адресом в интернете, около 960 ₽ в месяц.
• Домен, адрес сайта вроде kofeynya.ru. Его покупают у регистратора, компании, которая продаёт адреса сайтов; часто домен продаёт и сам хостинг.

Шаг 1. Опишите сайт словами

Чем подробнее описание, тем меньше переделок. Напишите помощнику одним сообщением:

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

Пример начала задачи: «Сделай сайт для кофейни у метро. Посетитель должен оставить заявку на торт к празднику. Нужны главная, меню с ценами и контакты с картой. Стиль тёплый, светлый, крупные фото напитков».

Попросите сначала план: «Ничего не делай, перечисли страницы и блоки на каждой». Прочитайте план и допишите, чего не хватает, например блок с часами работы или доставкой тортов.

Шаг 2. Получите первую версию и откройте её в браузере

Когда план устроит, напишите: «Делай». Помощник создаст файлы в папке и скажет, какой из них открыть. Попросите: «Открой главную страницу в браузере», и она откроется прямо на вашем компьютере: пока её видите только вы.

Смотрите страницу как посетитель: понятно ли, что вы предлагаете, видна ли кнопка заявки, читается ли текст с телефона. Чтобы проверить телефонную версию, сузьте окно браузера.

Шаг 3. Доведите страницы до нужного вида

Просите правки по одной и смотрите страницу после каждой: «Сделай кнопку заявки заметнее», «Перенеси меню напитков выше фотографий».

Как при этом не сломать то, что уже работало, разобрано в статье вайб-кодинг простыми словами.

Шаг 4. Выложите сайт на хостинг или сервер

Готовые файлы нужно перенести в интернет. На обычном хостинге откройте в панели «Файловый менеджер» и загрузите файлы в папку сайта: какие файлы в какую папку, подскажет помощник. Сертификат безопасности, чтобы адрес открывался по https, на хостинге обычно включают в той же панели.

Если вы арендуете сервер, хостинг покажет его адрес и пароль для входа. Сохраните их в отдельный файл в папке проекта, а не в тексте задачи, и предупредите помощника, что этот файл нельзя копировать на сервер вместе с сайтом.

Затем напишите: «Доступ к серверу в этом файле. Поставь программу, которая показывает сайт посетителям и сама получает сертификат безопасности, и перенеси туда сайт». Сертификат нужен, чтобы адрес открывался по https и браузер не писал «Не защищено».

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

Шаг 5. Подключите домен

Домен нужно связать с хостингом или сервером. Это называется настройкой DNS: вы говорите интернету, на каком компьютере живёт ваш сайт.

Способов два. Можно в панели регистратора открыть настройки DNS и в записи типа A вписать адрес сервера, четыре числа через точки из панели хостинга. А можно заменить у регистратора DNS-серверы на серверы хостинга: тогда все записи настраиваются уже у хостинга.

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

Изменения DNS расходятся по интернету не сразу, иногда до суток. Поэтому связать домен с сервером можно сразу после аренды, не дожидаясь готового сайта. Пока домен не указывает на ваш сервер, сертификат безопасности не выдаётся, и браузер пишет, что соединение не защищено: это нормально, дождитесь обновления.

Шаг 6. Сделайте, чтобы заявки приходили вам

Форма на странице сама по себе ничего не отправляет. Ей нужен адрес, куда передать заявку, и программа, которая доставит её вам на почту или в Telegram.

Один из вариантов: форма отправляет заявку в n8n, программу, которая сама выполняет цепочку действий без человека, а n8n присылает письмо или сообщение. Попросите помощника: «Сделай, чтобы заказ торта с формы приходил мне в Telegram». Он предложит способ, который подходит вашему хостингу.

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

Если форма собирает имя и телефон, нужны страница с политикой обработки персональных данных и отдельный текст согласия с галочкой рядом с кнопкой. Кроме того, до начала сбора данных подают уведомление в Роскомнадзор. Страницы помощник сделает, данные о компании впишите сами, а уведомление подаётся на сайте Роскомнадзора.

Шаг 7. Подключите Метрику и Вебмастер

Яндекс Метрика считает посетителей и показывает, откуда они пришли. На сайте Метрики нажмите «Добавить счётчик» и впишите адрес сайта. Метрика покажет код счётчика, кусочек кода, который считает посещения. Отдайте его помощнику и попросите вставить на все страницы.

Отдельно настройте цели, чтобы видеть не только визиты, но и заявки. В разделе целей выберите тип «JavaScript-событие», впишите идентификатор, например zayavka, и попросите помощника отправлять событие с этим идентификатором, когда заявка ушла.

Яндекс Вебмастер нужен, чтобы Яндекс узнал о сайте. Добавьте сайт и подтвердите, что он ваш: Вебмастер выдаст маленький файл или строчку кода. Попросите помощника положить их на сайт, затем вернитесь в Вебмастер и нажмите «Проверить».

Затем попросите помощника сделать карту сайта, то есть файл со списком всех страниц, и добавьте её в Вебмастере: раздел «Индексирование», пункт «Файлы Sitemap». Там же, в «Переобходе страниц», отправьте главные страницы на переобход: это просьба к Яндексу проверить их в первую очередь.

Если не работает