Как сделать сайт с помощью нейросети, если вы не разработчик

Раньше у меня сайты были на Тильде и WordPress. Править их самому нормально не получалось, на WordPress без разработчика ничего толком не сделаешь. А Тильда, хоть это и конструктор, тоже в какой-то момент становится довольно недружелюбной. На стандартных шаблонах ничего красивого не сделаешь, а с нулевыми блоками без дизайнера и верстальщика не разберёшься. Получается, что вроде у тебя сайт и на конструкторе, а сделать с ним сам ты ничего не можешь.

Год назад мне это надоело, и я начал делать сайты своих проектов с нейронками — оказалось гораздо проще и удобнее. Вместо админки у меня теперь нейросеть-агент. Я говорю что поправить или добавить, она делает: меняет дизайн, исправляет ошибки, настраивает SEO, добавляет новые отзывы или статьи в блог.

Сейчас у меня два таких сайта: molyanov.ru (тот, который вы сейчас читаете) и broken-links-checker.com — лендинг моего Chrome-расширения с SEO-блогом. Гайд про то, как нейронкой накодить сайт и разместить его на сервере без разработчика. У вас тоже получится.

Что такое вайбкодинг

Это когда вы не пишете код руками, а формулируете задачу нейронке, и она пишет код за вас. Вы общаетесь с агентом текстом или голосом — он бегает по файлам, читает их, редактирует, запускает команды и сам проверяет результат.

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

Что нужно сделать — последовательность

1. Поставьте на компьютер приложение с агентом (Claude или Codex).
2. Заведите GitHub-аккаунт.
3. Скиньте агенту стартовый промпт — он начнёт пилить сайт.
4. Проверьте первую версию сайта на своём компе, допилите по мелочи.
5. Сохраните прогресс на GitHub.
6. Купите VPS и домен.
7. Дайте агенту доступ к VPS — он выложит сайт в интернет по IP-адресу.
8. Подключите домен — сайт начинает открываться по нормальному адресу.
9. Настройте автоматическое обновление сайта при изменениях.
10. Добавьте SEO и аналитику, пишите контент.

Главный приём для нетехнаря

Если в процессе работы агент пишет что-то непонятное — деплой, коммит, контейнер, любое незнакомое слово — просто спросите его: «объясни, что это такое, простым языком для нетехнаря». Claude и Codex отлично объясняют без снобизма. У меня большая часть знаний про фронтенд именно так и набралась — не из курсов, а из таких объяснений по ходу работы.

Что вам понадобится

Что вы делаете руками: ставите на компьютер одно приложение, заводите бесплатный аккаунт на GitHub. Дальше общаетесь с агентом в чате — задачу описали, агент сделал.

Что делает агент: пишет весь код сайта, объясняет вам непонятное, чинит баги, ставит нужные библиотеки. Если что-то нужно сделать вам руками — например, открыть личный кабинет регистратора домена или получить ID счётчика Метрики — пришлёт пошаговую инструкцию.

Списком, что вам понадобится:

• Подписка на нейронку — Claude или ChatGPT.
• Бесплатный аккаунт на github.com — здесь будет храниться код вашего сайта.
• VPS — виртуальный сервер, на нём будет жить сайт в интернете.
• Домен — адрес вида вашсайт.ру.

VPS и домен понадобятся ближе к концу, когда первая версия сайта уже сделана и пора выкладывать в интернет — про то, где их взять и сколько они стоят, расскажу в нужный момент гайда. До этого сайт живёт прямо у вас на компьютере.

Какого агента выбрать — Claude Code или Codex

Это два самых сильных агента для вайбкодинга на рынке: Claude Code от Anthropic и Codex от OpenAI. Логика работы одинаковая — пишете запрос текстом или голосом, агент сам бегает по файлам, читает код, редактирует, запускает команды, проверяет результат.

Оба работают хорошо. У каждого своя уникальная штука.

Codex умеет генерить картинки прямо в чате — встроенной моделью OpenAI. Например, можно попросить «нарисуй обложку к статье в таком-то стиле» или «сделай иконки для секции с фичами» — он сразу рисует и сам добавляет картинки в нужные места на сайте. Для сайта, где постоянно нужна графика, это очень удобно.

У Claude Code есть Claude Design. Это отдельный инструмент Anthropic для дизайна, работает в веб-версии Claude. Описываете промптом, что хотите — он рисует красивый макет страницы. Когда дизайн готов, передаёте его в Claude Code, и тот уже превращает макет в реальный код вашего сайта.

Лимиты у Codex более щадящие. По моему опыту заканчиваются медленнее, чем у Claude Code. У Anthropic в 2026 году появились жёсткие недельные лимиты в дополнение к 5-часовым окнам — на активной работе с Claude быстрее упрёшься в потолок и будешь сидеть до конца недели.

Какой выбрать конкретно вам:

• Уже есть подписка на ChatGPT — используйте Codex.
• Уже есть подписка на Claude — используйте Claude Code.
• Нет ни одной — берите ChatGPT и Codex. Подписку проще купить и оплатить, а лимиты на Codex дольше держатся. Сам я работаю с обоими параллельно, переключаюсь, но если бы выбирал один — выбрал бы Codex.

Какую подписку брать

Сначала возьмите самый дешёвый тариф за $20 — Claude Pro или ChatGPT Plus. Этого хватит, чтобы попробовать вайбкодинг, понять как агент работает, и часто этого достаточно, чтобы собрать первую версию небольшого сайта. Особенно на ChatGPT, где лимиты пощедрее.

Если на $20 будет постоянно кончаться лимит и вы будете часами сидеть и ждать обновления — переходите на тариф за $100 (Claude Max 5x или ChatGPT Pro). Лимиты там в несколько раз шире. Это уже комфортный режим для активной разработки, когда вы работаете каждый день.

Есть ещё максимальные тарифы за $200 у обоих — Claude Max 20x и ChatGPT Pro 20x. Они для тех, кто параллельно ведёт несколько проектов или живёт в агенте по 8 часов в день. Для одного сайта точно не нужно.

Принцип простой: попробовали за $20 — упёрлись в лимиты — апгрейдитесь. Сразу платить $100 без понимания, нужно ли это вам, нет смысла.

Что поставить на компьютер

Только одну программу — приложение нейронки, в которой будете работать. Всё происходит в нормальном графическом интерфейсе с чатом, как в обычном мессенджере.

Если выбрали Claude Code. Скачайте десктоп-приложение Claude с claude.com/download (Mac или Windows). Внутри есть вкладка «Code» — это и есть Claude Code. Открываете приложение, логинитесь, переходите на вкладку Code, создаёте новую сессию, подключаете папку с проектом.

Если выбрали Codex. Скачайте Codex App на developers.openai.com/codex (Mac или Windows). Открываете, логинитесь через ChatGPT-аккаунт, нажимаете «New project», выбираете папку.

Больше ничего ставить не надо. Если в процессе работы понадобятся какие-то другие инструменты — агент поставит их на компьютер сам.

Если вы из России — есть нюанс. Без VPN ни Claude, ни Codex работать не будут. Если не хочется с этим заморачиваться — есть способ запускать агента вообще без VPN: для этого нужен отдельный недорогой сервер за границей, на котором будет жить агент. У меня про это есть отдельная статья — там пошагово, как это настроить.

Сколько это стоит

На содержание сайта уходит совсем немного:

• VPS — около 810 ₽/мес за сам сервер плюс ~150 ₽/мес за публичный IP-адрес. Итого ~960 ₽/мес.
• Домен — 100–200 ₽ за первый год, дальше около 400 ₽ за каждый следующий.

То есть постоянные расходы — порядка 1000 ₽/мес.

Отдельно — на время активной разработки — нужна подписка на нейронку. От $20/мес на базовом тарифе до $100/мес на продвинутом, в пересчёте на рубли — от ~2000 до ~10 000 ₽. Когда сайт уже сделан и вы только пишете контент, для самого сайта подписка не нужна — он работает сам. Но если хотите дальше публиковать статьи и править через агента в чате (а это сильно удобнее, чем руками) — подписку лучше держать.

Даже на максимуме всё вместе — порядка 10 000–11 000 ₽ на старте. Для сравнения, час работы фрилансера-разработчика среднего уровня в России сейчас стоит 1500–3000 ₽, а целый сайт у него — это десятки часов и десятки, а то и сотни тысяч рублей сразу плюс деньги за каждую следующую правку. С агентом вы платите сильно меньше — и получаете возможность мгновенно вносить любые исправления, а не ждать, пока подрядчик освободится. Сайт, на котором вы сейчас находитесь, я сделал сам за 3 дня. Прошлую версию этого же сайта на Тильде подрядчик делал месяц.

Что мы будем делать — какой подход

Сайт можно сделать разными способами. Если упростить — все они укладываются в три большие категории.

Готовые движки для сайта — например, WordPress. Вы устанавливаете движок у себя на сервере и пользуетесь готовой админкой. Расширять можно темами и плагинами. Таких движков много — WordPress, Joomla, Drupal, Битрикс.

Готовые сервисы-конструкторы — например, Тильда. Всё уже сделали разработчики сервиса. Вы только собираете сайт из готовых блоков в их интерфейсе и платите за подписку. Тоже большой выбор — Тильда, Wix, Squarespace, Webflow, Craftum.

Сделать с нуля как разработчики — это наш вариант. Никаких готовых движков и сервисов, никаких ограничений по дизайну и функциям. Только за разработчика у нас агент. Это даёт полный контроль над сайтом и не требует ни своего программиста, ни абонентки готовой платформы. Как именно у нас устроено хранение контента и обновление сайта — расскажу дальше по гайду, когда дойдём до этих этапов.

Готовый стартовый промпт

Когда поставили приложение — пора заводить новый проект. VPS на этом этапе ещё не нужен, создавать сайт будем локально на компьютере, а на сервер выложим, когда всё будет готово.

Создайте на компьютере пустую папку (можно назвать «мойсайт»), в приложении Claude Code или Codex выберите её как папку проекта, и в чате пришлите промпт:

Можете поменять промпт под себя: вместо «сайт-визитка с блогом» напишите «лендинг моего онлайн-курса с формой заявки», «портфолио фотографа с галереями», «сайт коуча с отзывами и блогом» — что угодно. Всё остальное оставляйте как есть, если никогда раньше ничего не вайбкодили.

Что мы попросили в промпте — на простом языке

Если вам интересно, что значат все эти страшные слова в промпте — короткое объяснение ниже. Если не интересно — можно пропустить. Кодить будете не вы, в этом разбираться не обязательно.

Next.js + React + TypeScript — основной движок сайта. Самый популярный стек в мире, на нём работают миллионы сайтов. Сайт получается быстрый, для SEO идеальный. Нейронки знают этот стек лучше всех других — реже ошибаются и реже выдумывают несуществующие штуки.

Tailwind CSS — способ описывать внешний вид. Вместо отдельных файлов со стилями всё лежит прямо в разметке сайта. Агенту так удобнее, он в Tailwind не путается.

shadcn/ui — набор готовых красивых компонентов: кнопок, форм, попапов, карточек. Бесплатно, в открытом доступе. Агент копирует нужные компоненты в ваш проект, и сайт сразу выглядит как у людей. Без shadcn нейронки часто рисуют интерфейсы, как очень плохой дизайнер.

MDX — формат для статей блога. Каждая статья — отдельный текстовый файл, без базы данных и админки. Можно открыть в любом редакторе и поправить руками, как обычный документ. В самом верху файла идёт небольшой блок с настройками статьи — название, описание, дата, обложка. Это называется фронт-маттер, обычно заполняет агент.

Docker + Nginx + Let's Encrypt + GitHub Actions — связка, которая запускает сайт на сервере и держит его там с защищённым https://. Docker упаковывает сайт в «коробку», Nginx работает как швейцар — принимает входящие запросы из интернета и направляет их в ваш сайт, Let's Encrypt бесплатно выпускает HTTPS-сертификат, GitHub Actions автоматически обновляет сайт при изменении кода. Сложно звучит, но всем этим занимается агент — вам в это не лезть.

Почему именно такой стек:

• Очень популярный — миллионы сайтов в мире на нём работают.
• Проверенный, не новая модная штука, которая через год исчезнет.
• Хорошо оптимизирован под SEO. Сайт быстро открывается, поисковики его любят.
• Если потом захотите позвать живого разработчика — найдёте легко, это мейнстрим.
• Нейронки в нём хорошо разбираются, реже ошибаются.

Ничего из этого вам учить не надо. Ваша задача — один раз скопировать промпт. Дальше общаетесь с агентом обычным человеческим языком: «добавь сюда блок с отзывами», «поменяй цвет кнопки», «напиши текст для главной».

Уточняющие вопросы и план

В конце промпта мы попросили агента задать уточняющие вопросы — это нужно, чтобы он не угадывал важные вещи и не пилил то, что вам не нужно. Первым делом он расспросит вас про название сайта, нишу/специализацию, цветовую палитру, какие именно секции вы хотите на главной, нужны ли отзывы, форма заявки, какой у вас тон коммуникации в текстах и так далее. Отвечайте коротко, как умеете — если не знаете правильного ответа, так и говорите «не знаю, предложи варианты».

После ответов агент покажет план работы: «создам такие-то страницы, поставлю такие-то компоненты, складываю файлы в такие-то папки, делаю по такому-то порядку». Прочитайте план — если разумно, говорите «делай». Если в плане есть глупости (например, агент хочет сделать всё сразу одним заходом, а не поэтапно) — корректируйте.

Первая версия сайта

Дальше агент пилит каркас сайта по плану. Запускает команды, создаёт файлы, ставит компоненты shadcn, собирает страницы из готовых блоков. Это занимает разное время — от десяти минут до пары часов, в зависимости от размера сайта и быстроты вашей нейронки.

Когда первая часть готова, агент даст ссылку вида http://localhost:3000 и скажет «открой в браузере». Это адрес сайта, который агент только что запустил у вас на компьютере. Никто кроме вас его не видит — в интернете его пока нет, ничего никуда не опубликовано. Сайт открывается только у вас, вы спокойно можете его править, ломать и переделывать — никто не увидит.

Открываете эту ссылку в обычном браузере (Chrome, Safari, Firefox) и смотрите, что получилось. Так и будем разрабатывать: сайт лежит у вас, вы его допиливаете до состояния «нравится», и только потом выкладываем в интернет, чтобы его смогли увидеть другие. До этого ещё дойдём.

Скорее всего, первая версия не идеальна. Что-то не там стоит, где-то отступы кривые, где-то текст-заглушка, который надо переписать. Это нормально — сейчас допиливаем итерациями.

Возвращаетесь в чат к агенту и говорите конкретно, что не так:

• «На главной хочу не три карточки фич, а четыре. Четвёртая — про такое-то».
• «Шрифт заголовка слишком большой, уменьши примерно на четверть».
• «Цвет акцентной кнопки замени с синего на зелёный, оттенок поприглушеннее».
• «На странице "обо мне" перепиши вступительный абзац вот так: [текст]».
• «Добавь в футер ссылки на мои соцсети: Telegram, ВКонтакте, YouTube».

Агент вносит изменения, говорите «обнови localhost», проверяете в браузере. Так несколько раз, пока сайт у вас на компьютере не будет таким, как хочется.

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

Как добиться красивого дизайна

В стартовом промпте мы уже встроили правильный подход к дизайну, но стоит объяснить, почему именно так. Если просто попросить агента «сделай мне сайт» без подробных инструкций — результат скорее всего разочарует. Нейронки сами по себе плохо чувствуют дизайн: цвета подбирают странные, отступы кривые, шрифты не сочетаются — получается сайт, склеенный наугад, без чувства композиции и иерархии.

Есть два способа этого избежать.

Способ 1: shadcn-блоки

Самый простой и надёжный путь — тот, который мы заложили в стартовый промпт. shadcn/ui — это набор готовых красивых кнопок, форм, карточек, попапов, которые дизайнеры собрали и выложили в открытый доступ бесплатно. Плюс есть готовые блоки целыми секциями: hero-баннеры (то есть большие первые экраны), секции с фичами, отзывами, ценами, FAQ, формами обратной связи.

Например, вот готовый shadcn-блок с табличкой.

Когда мы попросили в промпте «собирай страницы только из готовых компонентов shadcn/ui и блоков из открытых коллекций — Tailark, Magic UI, shadcn.io» — это как раз эти готовые куски. Агент сам ходит в эти коллекции, выбирает подходящее, приносит к вам в проект и собирает из них страницы как из конструктора.

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

Это мой основной способ. Оба моих сайта сделаны именно так.

Способ 2: Claude Design или Google Stitch

Если хочется чего-то менее шаблонного — попробуйте один из двух инструментов, специально заточенных под дизайн.

Claude Design — отдельный инструмент Anthropic, появился в апреле 2026. Подключаете свой проект, описываете промптом, что хотите — он генерит красивый дизайн страницы с учётом ваших цветов, шрифтов и общего стиля. Готовый дизайн передаёте в Claude Code как референс, и он уже превращает его в код. Доступен на тарифах Claude Pro, Max, Team и Enterprise. Ссылка: claude.com/design.

Google Stitch — продукт Google Labs, бесплатный. Превращает текст или эскиз в готовый макет интерфейса. Удобен тем, что можно описать сразу несколько связанных экранов одним промптом — получите целостный дизайн страницы услуг, контактов, формы заявки. На бесплатном тарифе — 350 обычных и 200 продвинутых генераций в месяц, для одного сайта хватит с запасом. Ссылка: stitch.withgoogle.com.

Свои сайты я делал по способу 1, без специальных дизайн-инструментов. Но если бы делал заново — наверняка попробовал бы. Особенно для лендинга, где важно, чтобы выглядело именно «как у людей».

Сохраняем прогресс на GitHub

Бывает так, что после очередной правки агент случайно ломает то, что раньше работало. Или вы говорите ему «верни как было», а он не помнит, как было. Или просто что-то идёт не так на компьютере, и вы теряете кусок сайта. Чтобы такого не было — нужен GitHub.

GitHub — это бесплатный онлайн-сервис, где хранится код вашего сайта. Можно думать о нём как об «облаке для кода». Это как сохранение в компьютерной игре: вы сделали что-то, что вам нравится → попросили агента отправить на GitHub → сохранилось. Дальше даже если на компьютере всё снесётся или агент накосячит — у вас есть точка, куда можно откатиться.

Идите на github.com, создайте бесплатный аккаунт. Там ничего сложного, без проблем разберётесь. Дальше отдаёте задачу агенту:

Агент сам создаст репозиторий, инициализирует Git, зальёт код. Если для авторизации ему понадобится личный ключ доступа от GitHub — он скажет, где его взять в настройках вашего аккаунта (Settings → Developer settings → Personal access tokens). Вам нужно будет просто скопировать эту строку на GitHub и отдать своему агенту.

Вот, например, репозиторий моего сайта.

Дальше принцип такой: как только у вас получилось что-то, что нравится — говорите агенту «сохрани». Он отправит на GitHub. Если потом что-то сломается — говорите «откати к последнему сохранению». Безвозвратно сломать ничего нельзя, всегда есть точка возврата.

Если хотите общаться с агентом на терминологии разработчиков, можете использовать слова «коммит» и «пуш»:

• Коммит — это сохранение, но только у вас на компьютере. Это как нажать кнопку «Сохранить» в Word.
• Пуш — отправка всех накопившихся сохранений в облако на GitHub. Это как отправить свой Word-файл на Google Диск.

Где живёт контент вашего сайта

Пока агент делает первую версию, полезно понимать, как устроено хранение контента у нас на сайте.

В обычных движках типа WordPress контент лежит в базе данных — добраться до него можно только через админку. У нас по-другому: статьи блога, отзывы, любые списки — лежат прямо в проекте как обычные текстовые файлы.

Каждая статья блога — отдельный файл с расширением .mdx в папке content/blog/. Это почти как обычный текстовый документ: пишете заголовки, абзацы, вставляете картинки, можете добавлять ссылки и форматирование. В самом верху файла идёт небольшой блок с настройками статьи (заголовок, описание, дата публикации, обложка) — его обычно заполняет агент.

Открыть такой файл можно в любом текстовом редакторе (даже в Блокноте Windows или TextEdit на Mac). Для мелкой правки опечатки или замены одного слова это удобно — поправили, сохранили, всё. Для структурных правок лучше через агента, потому что внутри могут быть специальные блоки и заголовок с настройками, которые лучше не трогать руками.

Но в большинстве случаев работать с контентом проще через агента в чате. «Опубликуй вот эту статью» → передаёте текст или ссылку → агент создаёт .mdx-файл, заполняет настройки, кладёт картинки куда надо. «Добавь отзыв клиента» → передаёте текст + фото → агент добавляет запись в нужный файл. Это и есть наша замена админке.

Как разговаривать с агентом, чтобы он делал всё правильно

Это самый важный навык в вайбкодинге. Чем точнее формулируете — тем меньше итераций. Что я понял за два сайта.

Говорите конкретно, а не абстрактно. «Сделай красиво» — не задача. «Уменьши шрифт заголовка с 48 до 36 пикселей, сделай его жирным, поставь между ним и подзаголовком отступ 20 пикселей» — задача. Если конкретики у вас нет — попросите агента: «предложи три варианта оформления заголовка, опиши каждый».

Скриншот лучше тысячи слов. Если хотите, чтобы какой-то блок выглядел как на чужом сайте — киньте скриншот в чат. Скажите: «сделай похоже, но в наших цветах». Агент видит картинку и понимает, что вы имели в виду. Или скиньте в чат ссылку на чужой сайт и попросите сделать похоже.

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

Просите план до того, как агент начнёт работать. «Опиши, что собираешься сделать, я подтвержу». Это бесплатная страховка — если агент собрался делать чушь, вы поймёте до того, как он перепишет десять файлов.

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

Когда не понимаете, что агент сделал — спросите. «Объясни простым языком, что ты только что сделал и почему». Полезно и для понимания, и чтобы поймать, где он понял задачу не так.

Под новую задачу — новый чат. У агентов есть контекстное окно — это его «оперативная память» на текущий разговор. Чем больше задач обсуждается в одном чате, тем больше там накапливается лишнего: старые обсуждения, обрывки кода, неудачные попытки. С каждым следующим обращением агент работает на этом всё более мутном контексте, начинает тупить, галлюцинировать, путать одну задачу с другой. Поэтому хорошее правило: закончили одну задачу (добавили статью в блог, поменяли дизайн секции, починили баг) — закройте чат и заведите новый. В новом чате первой фразой скажите «прочитай документацию проекта» — он откроет CLAUDE.md, сразу будет в курсе всего важного, и начнёте следующую задачу с чистой головой. Старайтесь не делать в одном чате больше одной осмысленной задачи.

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

Просите фиксировать решения. Когда что-то получилось хорошо — скажите: «запиши это в CLAUDE.md, чтобы в следующий раз делать так же». Через месяц у вас накопится база, и агент перестанет переоткрывать колесо.

База знаний для агента

В стартовом промпте мы попросили агента создать файл CLAUDE.md (или AGENTS.md, если работаете в Codex) — это его внутренний блокнот. Каждая новая сессия агента начинается с того, что он читает этот файл и сразу понимает, где он находится.

В этот файл стоит складывать всё, что нужно помнить между сессиями:

• Какой у нас стек и почему именно такой
• Как устроены папки проекта
• Цвета, шрифты, общие правила дизайна
• Доступы — IP сервера, имя пользователя, путь к SSH-ключу
• Правила деплоя
• Любые договорённости со мной по ходу работы

Скажите агенту прямо: «храни в CLAUDE.md всё, что касается движка, бэкенда, дизайна, доступов и правил деплоя. По ходу работы дописывай новый контекст сам — не жди, пока я попрошу».

Когда вы вместе принимаете какое-то решение по проекту — выбрали палитру, придумали структуру разделов, решили хранить отзывы в JSON — попросите агента: «запиши это в CLAUDE.md, чтобы не забыть».

Без такой базы знаний нейронка через две недели плодит хаос: забывает, как у вас устроены папки, начинает писать в другом стиле, заводит дубли компонентов. С базой — нет.

Публикуем сайт: покупаем VPS

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

VPS (виртуальный сервер) — это компьютер в дата-центре, который вы берёте в аренду. На нём будет жить ваш сайт круглосуточно, и через него люди смогут на него заходить.

Я беру VPS на Бегете. Пользуюсь этим хостингом с 2016 года: там у меня все сайты, домены и почта. Платить можно рублями, поддержка отвечает быстро.

Если хотите альтернативу — есть Timeweb, Selectel, FirstVDS, RUVDS. Все живые, дают Linux-серверы. Но я ничего из них не пробовал, советую только то, на чём сидел сам.

Если выбрали Бегет, откройте раздел «Облако → Создать сервер → Виртуальный сервер».

Конкретно для сайта-визитки с блогом берите тариф на 2 ядра / 2 ГБ оперативной памяти / 30 ГБ диска. На Бегете это около 810 ₽/мес (точную цену смотрите на их странице тарифов, она меняется). Меньше брать не советую — сайт при сборке может упереться в память. Если планируете большой блог на сотни статей — берите сразу 4 ГБ.

Обратите внимание: для сайта обязательно нужен публичный IP-адрес — без него сервер не будет доступен из интернета, и домен не на что будет указывать. На Бегете публичный IPv4 идёт отдельной строкой в счёте — около 5 ₽ в день (порядка 150 ₽/мес). На других хостингах принцип похожий: либо включено в тариф, либо тоже идёт отдельной строкой. Просто проверьте, чтобы при заказе IPv4 был выбран.

При заказе выбираете операционную систему — берите последнюю LTS-версию Ubuntu (сейчас это 26.04, она вышла в апреле 2026). Это самый стандартный выбор, агент будет работать с ней привычно.

Заодно купите домен, если ещё нет. Это можно сделать на том же Бегете или у любого другого регистратора (REG.RU, RU-CENTER). Стоит 100–200 ₽ за первый год.

Безопасный доступ к серверу — через SSH-ключ

На странице создания VPS обратите внимание на блок «Аутентификация» — это про то, как мы будем подключаться к серверу. Не только мы — наш агент тоже должен будет к нему подключиться, чтобы там всё настроить (Docker, Nginx, всё это). Потому что мы не разработчики и сами руками в сервер лазить не собираемся.

Два варианта подключения: по паролю или по SSH-ключу.

Пароль удобен, но небезопасен — особенно потому, что вам надо как-то передать его агенту. Просто написать пароль от root в чат — никогда так не делайте. Пароль может всплыть в логах, истории чата, обучающей выборке нейронки. Это серьёзный риск.

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

Поэтому при создании VPS выбирайте «Аутентификация по SSH-ключу». Если ключа у вас ещё нет — сейчас сделаем.

Откройте чат с агентом и напишите:

Агент сам выполнит нужную команду на вашем компе, создаст пару файлов (приватный — секретный, остаётся у вас; публичный — открытый, можно показывать). Дальше покажет вам публичную часть — длинную строку, начинающуюся с ssh-ed25519 или ssh-rsa.

Копируете эту строку, идёте обратно в Бегет, нажимаете «Добавить новый SSH-ключ», вставляете строку, нажимаете «Добавить». Возвращаетесь к форме создания VPS, выбираете этот ключ в списке. Бегет создаёт сервер уже с ним.

После создания VPS вы увидите его IP-адрес. Сразу попросите агента сохранить доступы у себя в документации, чтобы потом не искать:

Дальше, когда понадобится развернуть на VPS сайт или что-то поправить, вам не придётся каждый раз повторять доступы — агент достанет их из своей документации.

Пароль от root на email тоже придёт, но он вам не понадобится — всё будет через ключ.

Если вы уже купили VPS с паролем, без SSH-ключа — тоже не пишите пароль в чат. Скажите агенту:

Агент даст инструкцию: сгенерить SSH-ключ, выполнить в терминале команду ssh-copy-id, ввести пароль один раз самому. После этого работаем только через ключ, пароль больше не понадобится.

Публикуем сайт: разворачиваем на VPS

Когда VPS куплен и его данные сохранены в документации — пора переносить туда сайт. Отдаёте агенту:

Агент сам зайдёт на сервер по SSH, поставит всё нужное окружение, развернёт сайт. Это самый длинный этап — может занять от получаса до пары часов, в зависимости от того, сколько раз что-то пойдёт не так и потребует фикса. Агент будет вам периодически писать: «нужно подождать пока установится X», «выполнил Y», «вот результат Z».

Когда сайт развернулся на VPS, проверьте: открываете в браузере http://IP-вашего-сервера — должна открыться ваша первая версия сайта. Поздравляю, сайт в интернете (пока по IP-адресу, без домена и без https:// — это сейчас исправим).

Подключаем домен

Сейчас сайт открывается только по IP-адресу и без https://. Подключаем домен, заодно настраиваем сертификат.

В личном кабинете того сервиса, где купили домен, добавьте A-запись. Это настройка, которая говорит «такой-то адрес ведёт на такой-то сервер». Тип записи — A, имя — @, значение — IP вашего сервера. Это единственный шаг, куда агент не залезет — настройки домена живут у регистратора.

На Бегете эти настройки можно найти в «Домены и поддомены → ваш домен → Редактировать DNS».

Если не знаете, где это в личном кабинете — попросите агента: «у меня домен куплен на Бегете (или таком-то сервисе), не могу найти где добавить A-запись, объясни пошагово». Он расскажет, куда нажимать.

Через 5–30 минут DNS обновится. Параллельно отдаёте агенту задачу:

Агент перенастроит Nginx, certbot выпустит сертификат. Открываете в браузере https://вашсайт.ру — сайт открывается. Поздравляю, сайт в интернете под нормальным адресом, с защищённым https://.

Публикуем сайт: настраиваем автодеплой

Сейчас сайт работает, но при каждом изменении кода вам пришлось бы вручную обновлять его на сервере. Ну или просить агента подключаться и всё перезапускать. Это неудобно. Поэтому настраиваем автоматику — при изменении кода на GitHub сайт сам обновляется на VPS. Эта функция называется GitHub Actions.

Отдаёте агенту:

Агент сделает workflow для GitHub Actions, расскажет, как и куда положить секреты в GitHub (Settings → Secrets and variables → Actions → New repository secret). Дальше делаете тестовый коммит, пушите в main — GitHub Actions сам подхватывает изменения и развёртывает сайт. Через пару минут изменения видны на сайте.

Дальнейшая работа: как добавлять контент и менять сайт

Когда сайт уже опубликован — дальнейшая работа выглядит просто. Открываю приложение Claude Code или Codex с моим проектом. В чат пишу задачу. Например:

Длинные задачи проще диктовать голосом, чем печатать. Я использую Handy — бесплатное приложение для голосового набора, работает оффлайн, на Mac/Windows/Linux. Зажал клавишу, наговорил, отпустил — текст вставился. Ссылка: handy.computer.

Агент читает базу знаний проекта, смотрит существующий код, пишет план: какие файлы создаст, какие изменит. Если план разумный — говорите «делай». Если есть глупости — корректируете.

Когда агент закончит — проверяете результат на своём компе по адресу http://localhost:3000. Если что-то криво — корректируете конкретно: «уменьши отступы между карточками в полтора раза», «сделай высоту карточки фиксированной», «добавь плавную анимацию при наведении». Несколько итераций — и всё как надо.

Когда устраивает — говорите «коммить и пуш». Агент сохраняет изменения в Git, отправляет на GitHub, оттуда GitHub Actions автоматически разворачивает новую версию на VPS. Через пару минут изменения видны посетителям.

Альтернатива VPS — Vercel для зарубежной аудитории

Если ваша аудитория зарубежная (англоязычный сайт, иностранные клиенты), вместо VPS можно использовать Vercel — хостинг от создателей Next.js, заточенный именно под него. Шаги «подключи GitHub», «разверни на VPS», «настрой автодеплой» сворачиваются в один — Vercel сам всё делает при подключении репозитория.

Главные плюсы Vercel:

• На бесплатном тарифе Hobby хватает для личных проектов. Но формально Hobby только для некоммерческого использования — для бизнес-лендинга, продающего ваши услуги, нужен Pro за $20/мес. Иначе ваш сайт могут отключить без предупреждения.
• Публикация сайта одной кнопкой при подключении GitHub-репозитория. Никаких серверов и настроек.
• Превью-ссылки на каждое изменение, чтобы показывать клиенту до публикации.
• Бесплатный HTTPS-сертификат, ускорение загрузки, оптимизация картинок — всё из коробки.

Минус один, но критичный: в России кастомные домены на Vercel часто не работают. Vercel в раздачу попадает рикошетом — Роскомнадзор блокирует отдельные IP-адреса, на которых, кроме вашего, сидят и другие сайты. Сайт на дефолтном *.vercel.app обычно открывается, а ваш кастомный домен может оказаться на «плохом» IP, и читатели из России не зайдут без VPN.

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

Если у вас уже есть сайт на Тильде или WordPress

Когда переезжаете со старого сайта на новый, главное — сохранить SEO-трафик. Если поисковики не найдут страницу по старому URL и не получат корректный редирект на новый — позиции упадут, трафик уйдёт.

Что переносить:

• Тексты статей и страниц
• Картинки
• URL-адреса (через 301-редиректы)

Технология такая:

1. Откройте старый sitemap. Обычно он лежит по адресу вашсайт.ру/sitemap.xml. Внутри — список всех URL.
2. Сохраните его ссылкой или скачайте сам файл.
3. Скажите агенту: «вот sitemap старого сайта, прочитай его и сделай 301-редиректы со всех старых URL на новые. Структуру новых URL мы обсудим». Дальше с агентом проговариваете, как именно строятся новые адреса (например, /blog/old-slug остаётся как /blog/old-slug).
4. У меня так делалось при переезде с Тильды — Claude распарсил sitemap, сделал 80 редиректов одним заходом.

Если sitemap у вас по какой-то причине не работает — просто дайте ссылку на ваш сайт агенту и попросите собрать его полную структуру.

После деплоя обязательно проверьте: откройте любой старый URL в браузере — должно автоматически перебросить на новый адрес, без ошибки 404.

SEO с самого начала

Если делаете сайт под поисковый трафик, SEO закладывайте с первого дня. Допиливать SEO на готовом сайте — это переделка половины кода или костыли. На Next.js всё делается без боли — просто скажите агенту настроить с самого начала.

Что попросить агента настроить ещё на этапе первой версии — просто скиньте ему этот список:

• Sitemap.xml — карта сайта со списком всех страниц, чтобы поисковики знали, что у вас есть.
• Robots.txt — инструкции поисковым ботам, что можно индексировать, что нельзя.
• Метаданные на каждой странице — заголовок, описание, картинка для красивого превью при шере в соцсетях.
• Schema.org разметка — техническая разметка, которая помогает поисковикам понять, что у вас на странице (статья, человек, отзыв). Поднимает кликабельность в выдаче — у статей появляются даты и имена авторов, у отзывов — звёзды.
• Canonical URL — главный адрес каждой страницы, чтобы поисковики не считали дубликатами одну страницу с разными параметрами в URL.
• Оптимизация картинок — современные форматы и подгрузка по мере скролла. Скорость загрузки сайта улучшается в разы, поисковики это учитывают.
• IndexNow — протокол для мгновенной переиндексации сайта в Яндексе и Бинге. После публикации сайт сам сообщает поисковикам о новых страницах, и они появляются в выдаче за часы, а не за недели. Google его не поддерживает (на 2026 год), но для него и так всё нормально работает — sitemap отрабатывает.

Аналитика — что ставить

Какая у вас аудитория — ту аналитику и ставите.

Русская аудитория

Яндекс.Метрика. Бесплатная, мощная, с вебвизором (видеозаписями сессий пользователей), картами кликов и тепловыми картами. Большой плюс — интеграция с Яндекс.Вебмастером и Яндекс.Директом, удобно смотреть полную картину.

Яндекс.Вебмастер. Отдельный инструмент, в котором вы видите, как Яндекс видит ваш сайт. Какие страницы проиндексированы, какие нет, по каким запросам приходят люди, есть ли технические ошибки. Без этого вы как слепой котёнок.

Подключение элементарное: на сайте Метрики (metrika.yandex.ru) нажимаете «Добавить счётчик», вводите домен — получаете 8-значный ID. Дальше говорите агенту: «добавь Яндекс.Метрику с ID таким-то». Подключение к Вебмастеру — заходите на webmaster.yandex.ru, добавляете сайт, выбираете способ подтверждения (мета-тег или DNS-запись) — копируете строку, отдаёте агенту, говорите «добавь этот мета-тег в head главной страницы».

Зарубежная аудитория

Google Analytics 4 (GA4). Стандарт индустрии. Подключается через ID.

Google Search Console. То же самое, что Вебмастер у Яндекса. Показывает, как Гугл видит ваш сайт, какие страницы проиндексированы, по каким запросам люди приходят. Без неё никак.

Подводные камни

Не пушьте в прод без проверки на своём компе. Соблазн «давай сразу деплоить, заодно проверим» большой, но кривой прод стоит дороже, чем минута на проверку дев-версии сайта в браузере.

Английский в коде и в файлах базы знаний агента. На русском — только тексты самого сайта и контент блога. Всё, что внутри проекта (имена файлов, заметки в CLAUDE.md, комментарии в коде) — на английском. Так нейронка работает быстрее, точнее и не путается с кодировками.

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

Не пытайтесь сразу сделать всё. Первая версия сайта должна быть минимальной — главная, блог, одна-две страницы. Дальше итерациями. Если сразу попробовать запихнуть в первую версию travel-карту, спикерское портфолио, форму обратной связи и интеграцию с CRM — получится монстр Франкенштейна. Я через это проходил, потом всё переделывал.

Что делать, если застряли

Главный страх вайбкодера-непрограммиста: «а вдруг сломается так, что я не пойму, как чинить». Вот что делаю я.

Скриншот ошибки → агенту: «вот что не так, поправь». Большинство проблем решается одним промптом со скриншотом.

Не понимаете ответ агента? Скажите: «объясни простым языком для нетехнаря». Он перепишет понятнее.

Сломалось после последнего изменения? Скажите агенту: «откати к последнему сохранению на GitHub». Он вернёт код к предыдущему рабочему состоянию. Если изменение уже опубликовано на сайте — после отката автодеплой выкатит рабочую версию обратно. Безвозвратно сломать ничего нельзя.

Агент крутится по кругу и ломает одно и то же место? Заведите новый чат, пересажите туда контекст («вот код, вот что я пытаюсь сделать, у меня вот такая ошибка»). Свежий чат часто видит проблему, на которой первый зациклился. Если работаете в Claude — переключитесь в Codex или ChatGPT, второе мнение тоже помогает.

Главное — сохраняйте код в GitHub. Все ваши коммиты сохранены, любую правку можно откатить. Делайте коммиты часто, после каждой удавшейся итерации, и спать будете спокойно.

Что получаете в итоге

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

Полный контроль над кодом. Захотели переехать на другой сервер, продать сайт, отдать в чужие руки — забрали репозиторий и всё.

Расходы — 1000 ₽ в месяц на сам сайт плюс оплата подписки на ИИ-агента.

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

Все мои кастомные скиллы для Claude Code, которыми я пользуюсь сам — лежат на гитхабе: github.com/pavel-molyanov/molyanov-ai-dev. Можно склонировать, скопировать в свой ~/.claude/ и пользоваться.

Что делать дальше — выберите название будущего сайта, купите домен на Бегете или любом другом регистраторе, оформите подписку на ChatGPT или Claude и поставьте приложение. Дальше всё уже по этому гайду.

Собственно, вот и всё.