Вступление: Культура веб-разработки навсегда изменилась Еще несколько лет назад для создания и ведения своего работающего веб-сайта требовалась команда специалистов: дизайнера, бэкенд-разработчика, DevOps-инженера и других. Это всегда был трудоемкий процесс, дорогой, и частно неповоротный. Сегодня все иначе. Сегодня искуственный интеллект это не просто помощник. Он стал полноценным соавтором, ускорителем, а иногда инициатором многих решений в веб-разработке. Мы с вами, друзья, живем в уникальное время, когда один человек с доступом к нужным ИИ-инструментам может создавать сайты уровня digital-агенств. Не только для себя, а например под заказ, для монетизации, или для увеличения продаж своего бизнеса. Цель этой статьи – показать путь от А до Я, где Я – готовый, загруженный на сервер (ngnix), работающий сайт, с подключенной базой данных (Supabase). Делать мы будем ленд для сбора заявок на приобретение программы по скрапингу в Twitter. Так же бонусом я расскажу, как подключить N8N в роли бэкенда, чтобы получать заявки в Telegram-бот, и считайте вы будете вооружены по всем фронтам. Разработать можно буквально ВСЕ! Я делюсь личным опытом. Все, что описано ниже, я прошел сам: запускал проекты, которые приносят заявки и доход, без команды и без “Глубокого погружения” в код. Это реально – и теперь каждый читатель lolz сможет получить такой результат, просто по шагам повторяя мои действия из статьи. Глава 1: Мышление нового времени — ИИ как партнёр в разработке Классическая веб-разработка умирает. Базара нет, она все еще актуальна в крупных корпорациях и долгих проектах. Но для малого бизнеса, стартапов или фриланса – заниматься разработкой не углубляясь в ИИ – это путь в никуда. ИИ не обладает сознанием и на данный момент не сделает “конфету” самостоятельно. ИИ кратно усиливает способности и видения, которым человек обладает на момент написания промтов. Промтп – инструкции которые мы даем ИИ для получения результата, и каждая буква и смысл в промпте – имеют значения. Стоит попробовать почувствовать себя в роли режиссера – где мы задаем направление, а нейросеть выполняет работу словно у нас в подчинении есть несколько разработчиков middle уровня, работающие 24/7. Инструменты, которые мы будем использовать: · ChatGPT — наш главный помощник в генерации смыслов, текстов и кода. Он поможет придумать структуру лендинга, написать заголовки. А если возникнет техническая проблема — просто описываем её в ChatGPT и получаем решения за секунды. Это как консультант, копирайтер и программист в одном лице. · Lovable — SaaS-платформа, заточенная под быструю full-stack разработку. Мы используем её как «движок» сайта: Lovable сгенерирует front-end, обеспечит базовую безопасность и подключит сбор данных в базу. · Supabase — облачная база данных, которая нативно интегрируется с Lovable. С её помощью мы будем сохранять все заявки с лендинга в таблицу, управлять доступом и создавать серверную логику. · FastDomain — сервис, где мы купим домен для сайта. Всё быстро, просто, доступно. Позже подключим его к нашему серверу. · HOSTVPS — здесь мы арендуем VPS (виртуальный сервер), на котором разместим наш сайт. Это даёт нам полный контроль над серверной частью и максимальную гибкость. · N8N — визуальный инструмент автоматизации, который мы используем в роли backend-сервиса. Здесь будут реализованы все интеграции: отправка уведомлений в Telegram, писем клиенту на email, логика обработки заявок и любые дополнительные сценарии, которые нам придут в голову. Всё — без единой строчки кода. Важно: все перечисленные выше сервисы — кроме хостинга и домена — имеют бесплатные версии. Это значит, что начать разработку и протестировать рабочую связку можно без каких-либо вложений. Если вы только пробуете себя в этой теме — хватит бесплатных тарифов Supabase, ChatGPT (в ограниченном режиме), n8n и Lovable. Да, есть и способы вообще не платить за хостинг и домен — можно использовать бесплатные решения вроде Vercel или GitHub Pages для фронтенда и временные субдомены. Но в этой статье мы пойдём по платному пути: это даёт нам больше стабильности, гибкости и экономит время на обходные решения. Стоимость домена и VPS-оплаты — символическая, особенно если сравнивать с тем, какой результат вы получите на выходе. Глава 2: Создаём front-end лендинга: быстро, красиво, эффективно Пора переходить от слов к делу. Начнем с самого важного — лендинга, ведь именно он будет лицом нашего проекта и главной точкой входа для заявок. Что за проект? Мы создадим одностраничный сайт для продажи софта, который помогает анализировать данные из X (Twitter). Сайт будет с продуманной структурой, привлекательным дизайном и подключённой формой заявок — всё, чтобы лиды сразу летели вам в Telegram-бот. Главная цель сайта — собирать заявки от заинтересованных пользователей. В центре — форма захвата с полями: 1. Имя 2. Е-Маил 3. Комментарий Плюс добавим : Pop-up баннер, который будет появляться автоматически через 30 секунд после захода на сайт. Такой функционал хорошо повышает конверсию. Работаем в Lovable Переходим на https://lovable.dev/ , создаём аккаунт и получаем 5 бесплатных кредитов в день. Этого достаточно для базового проекта. Но если планируете много вносить правки — скорее всего, понадобится платный тариф. Важно понимать, как работает Lovable: Каждый промт, который вы отправляете, тратит 1 кредит — независимо от того, насколько он сложный. Поэтому не тратьте кредиты на мелкие правки вроде “сделай логотип на 5 пикселей больше”. Лучше сразу собирать всё в один, проработанный промт. Ниже как раз будет пример такого промта, который я сгенерировал с помощью ChatGPT специально под этот лендинг. Генерируем лендинг: мощный промт для Lovable Вот промт, который мы отправим в Lovable для генерации лендинга: Промпт Lovable Создай одностраничный лендинг для SaaS-сервиса, который помогает собирать и анализировать данные из Twitter. Целевая аудитория — маркетологи, ресерчеры, криптоэнтузиасты и стартаперы, которым нужно отслеживать тренды, собирать информацию о пользователях, автоматизировать рутинные действия в Twitter. Основная цель сайта — получение заявок от заинтересованных пользователей. Блоки, которые нужно включить: • Заголовок и подзаголовок с сильным оффером (пример: «Автоматизируй работу с Twitter — получай данные, анализируй тренды, экономь часы времени») • Секция с преимуществами (быстро, без кода, точные данные) • Секция "Как это работает" (3 шага) • Призыв к действию • Форма захвата (имя, email, цель обращения) • Отзывы клиентов (можно фейковые, для примера) • Блок с FAQ • Подвал с контактами и ссылками на политику конфиденциальности Стиль: чистый, современный, tech-ориентированный. Цвета — тёмные или нейтральные с акцентом на синий (в духе Twitter). Шрифт — современный, легко читаемый. Кстати, этот промт я не писал вручную — сгенерировал с помощью ChatGPT. Просто описал идею и целевую аудиторию, остальное он добавил за меня. См. Screenshot_1: как выглядит отправка промта После отправки Lovable начнёт работу: он сам создаст структуру лендинга, сгенерирует дизайн и подготовит все технические файлы. На выходе у нас будет полноценный черновик сайта. Мы посмотрим, что получилось, и при необходимости допилим его — тоже через промпт. Черновик готов — допиливаем детали. Через пару минут после отправки промпта мы получаем готовый лендинг, который уже выглядит достойно. Редактируем текст на сайте Теперь можно перейти к доработке контента. И вот крутая фишка — многие блоки на лендинге редактируются прямо внутри Lovable — без дополнительной траты кредитов. Жмём Edit, выбираем нужный блок → появляется поле для правок. Но не все элементы редактируются вручную. Некоторые (например, pop-up или анимация) можно изменить только через новый промт в чат Lovable. Улучшаем лендинг одним промтом. Сейчас мы сделаем сразу несколько улучшений: 1.добавим анимацию загрузки 2. улучшим дизайн формы заявки 3. убедимся что все кнопки ведут к заявке 4. добавим pop-up И всё это — одним промтом. Совет: при составлении такого запроса обязательно нумеруйте задачи — так нейросеть лучше понимает структуру и делает всё разом. Наш промпт: 1. Добавить анимацию загрузки сайта — покажи простой и современный preloader (например, вращающийся логотип или прогресс-бар), который исчезает при полной загрузке страницы. 2. Обновить дизайн формы заявки — сделай её более заметной и современной: закруглённые поля, placeholder’ы с подсказками, лёгкая тень, анимация при фокусе. 3. Сделать так, чтобы все кнопки на сайте вели к форме заявки — добавь плавный scroll при клике на любую CTA-кнопку (например, «Оставить заявку», «Узнать больше» и т.д.). 4. Добавить pop-up с кнопкой через 30 секунд после входа — окно должно появляться автоматически через 30 секунд пребывания пользователя на сайте. Внутри — текст-призыв + кнопка, ведущая к форме заявки (или открывающая её). Промт составлен в ChatGPT и перед отправкой — обязательно перечитываем, чтобы избежать логических косяков. Результаты: Форма заявки — готова и выглядит достойно Анимация загрузки — получилась неудачно, но это легко правится отдельным промтом Pop-up срабатывает через 30 секунд, как и планировалось И всё это — за пару промтов и минимум времени. Lovable по сути — это умный интерфейс над цепочкой промтов, которые улетают в Claude Sonnet. Поэтому результат часто реально удивляет — при правильно составленных запросах можно получить сайт, который выглядит и работает как вручную сверстанный. Дальше мы подключим базу данных Supabase и начнем собирать заявки. Погнали. Глава 3: Back-end за 30 минут — простая логика на Supabase Front-end готов — пора заняться серверной частью. Настроим сохранение заявок в базу данных через Supabase, и сделаем это буквально за полчаса. Шаг 1: Создаём аккаунт Supabase Переходим на https://supabase.com/ и регистрируемся. Процесс простой, подробно расписывать не буду. После входа открываем страницу создания нового проекта https://supabase.com/dashboard/new Создаём новую организацию и проект — именно его мы потом подключим к Lovable. Придумываем и записываем пароль для проекта — он пригодится. Шаг 2: Подключаем Supabase к Lovable В интерфейсе Lovable жмём на логотип Supabase (в правом верхнем углу) и подключаем нашу организацию. Затем выбираем конкретный проект. Через пару секунд соединение установится — и вы должны увидеть это: Supabase аккаунт успешно подключен к нашему проекту в Lovable. Шаг 3: Настраиваем сохранение заявок Теперь подключим форму с лендинга к базе данных. В Lovable отправляем следующий промт: Нужно подключить форму заявки к таблице Supabase, также напиши SQL-запрос для её создания. Полученный SQL-запрос копируем и вставляем в Supabase: Открываем вкладку SQL Editor -> Жмём Run В ответ должно быть: Success. No rows returned — это значит, таблица contact_requests успешно создана. Проверим это через Table Editor: Шаг 4: Применяем изменения в Lovable Возвращаемся в Lovable и жмём Apply Changes Да, Lovable может сам выполнить SQL-запрос, но по опыту — лучше делать это вручную. Так стабильнее и быстрее можно отследить, что происходит. После подтверждения, что таблица создана и форма подключена, проверяем соединение Теперь пробуем отправить тестовую заявку с сайта — и проверяем, появилась ли новая строка в Supabase: Всё работает отлично! На этом этапе у нас уже есть: лендинг с красивым дизайном, подключённая база данных Supabase, форма, которая сохраняет заявки. Следующим шагом мы сделаем автоматическую отправку этих заявок в Telegram через n8n — используя триггер на новую запись в таблице. Глава 4: N8N + Telegram — автоматизация, которая работает сама Признаюсь честно: использовать n8n только ради отправки заявки в Telegram — это немного избыточно. Supabase уже умеет делать HTTP-запросы и может отправлять уведомления напрямую. Но! Я всё равно использую n8n везде — потому что это универсальный инструмент автоматизации, который легко расширяется под любые задачи: рассылки, фильтрацию данных, CRM-интеграции, Webhook'и, AI-флоу и прочее. Он настолько мощный, что, возможно, заслуживает отдельной статьи на форуме. План действий: 1. Получаем Webhook из n8n 2. Настраиваем функцию в Supabase 3. Подключаем триггер 4. Проверяем цепочку на практике Шаг 1: Получаем Webhook Создаём новый воркфлоу в n8n и копируем Webhook URL. Шаг 2: Включаем поддержку HTTP в Supabase Чтобы Supabase умел делать HTTP-запросы, включаем нужное расширение. Вставляем в SQL Editor: create extension if not exists http; Далее создаём функцию вызова Webhook с помощью нового SQL: (не забудь вставить свой URL из n8n) create or replace function call_webhook() returns void language plpgsql as $$ declare response json; begin select content::json into response from http_get('ВАШ_URL'); raise notice 'Response: %', response; end; $$; SQL create or replace function call_webhook() returns void language plpgsql as $$ declare response json; begin select content::json into response from http_get('ВАШ_URL'); raise notice 'Response: %', response; end; $$; Проверяем, что функция call_webhook() появилась: Database → Functions Создаём функцию-обёртку для триггера: (Это можно делать иначе, но мы сделаем именно так) CREATE OR REPLACE FUNCTION trigger_call_webhook() RETURNS trigger LANGUAGE plpgsql AS $$ BEGIN PERFORM call_webhook(); RETURN NEW; END; $$; SQL CREATE OR REPLACE FUNCTION trigger_call_webhook() RETURNS trigger LANGUAGE plpgsql AS $$ BEGIN PERFORM call_webhook(); RETURN NEW; END; $$; Подключаем триггер к таблице contact_requests Идём в Database → Triggers и создаём триггер, который будет срабатывать после добавления новой строки в таблицу. Важно: у n8n есть Test URL и Production URL. Сначала вставляем Test-ссылку в call_webhook, нажимаем Listen for test event, отправляем тестовую заявку с сайта и смотрим, пришёл ли запрос. Потом меняем на продовый. !Был баг — не срабатывал запрос. Оказалось, что у Webhook неправильный путь. Поменял Path на кастомный → всё заработало. Шаг 3: Настраиваем получение данных в n8n Добавляем GET-запрос к Supabase (если встроенные ноды не сработают — у меня не сработали). - ниже пример встроенной ноды С помощью HTTP запроса настраивается вот так, и все работает: так выглядит корректно настроенный запрос Пример запроса: https://ВАША_ССЫЛКА.supabase.co/rest/v1/contact_requests?order=created_at.desc&limit=1 Общий вид воркфлоу в n8n Шаг 4: Подключаем Telegram Добавляем ноду Telegram → Send Message Создаём нового бота через BotFather → сохраняем токен → добавляем Credential Создаём чат, добавляем туда бота, выдаём ему права администратора Добавляем в чат бота @LeadConverterToolkitBot и получаем ID чата с помощью команды: /get_chat_id@LeadConverterToolkitBot Вставляем ID и токен в ноду — и всё готово. Настраиваем сообщение (Просто подставляя переменные) Проверяем, что сообщение с заявкой приходит: Финальный тест: Делаем заявку прямо с сайта и убеждаемся, что: заявка появляется в Supabase, триггер срабатывает, n8n запускается, заявка приходит в Telegram: Что у нас теперь есть: ИИ-сгенерированный лендинг, Подключённая база Supabase, Webhook → n8n → Telegram-уведомления Всё работает в автомате, без ручного контроля. Далее: деплой на VPS, подключение кастомного домена и настройка HTTPS с помощью Let’s Encrypt. Глава 5: Покупка и настройка домена — прямо в Telegram Теперь, когда у нас есть сайт и автоматизация, пришло время подключить домен. Обычно покупка домена — это гемор с регистрацией, верификацией и кучей лишних шагов. Но есть решение попроще — FastDomain, популярный сервис с форума, где всё можно сделать , буквально в пару кликов. Шаг 1: Пополняем баланс Пишем в бота FastDomain и пополняем баланс. Способов оплаты — куча: можно использовать то, что удобно. Шаг 2: Покупаем домен После зачисления средств: Жмём «Купить домен» → Вводим нужный адрес → Подтверждаем и оплачиваем Шаг 3: Подключаем Cloudflare (по желанию) FastDomain сразу предлагает автоматически привязать домен к Cloudflare — сервису, который защищает от DDoS и даёт гибкий контроль над DNS. Рекомендуется согласиться — это экономит кучу времени. На этом этапе у нас ещё нет IP-адреса (VPS мы купим позже), поэтому настройку завершаем вручную чуть позже. Через пару минут домен будет зарегистрирован и готов к подключению. Fast, как и обещали. Воспользоваться сервисом FastDomain можно по ссылке --> https://t.me/FastDomainBot (реф) https://t.me/FastDomainBot (не реф) Следующим шагом будет деплой сайта на VPS, настройка Nginx и привязка этого домена с SSL-сертификатом через Let's Encrypt. Глава 6: Деплой сайта через Nginx на VPS Frontend готов, база работает, заявки летят — осталось залить сайт на сервер и подключить к домену. Всё сделаем своими руками: от сборки проекта до HTTPS-сертификата. Получаем файлы через GitHub Подключаем GitHub к Lovable — проект автоматически синхронизируется, мы перейдем на него и мы скачаем все исходники. Предподготовка (локальная сборка) Скачиваем и устанавливаем Node.js → https://nodejs.org/en Открываем папку с проектом через CMD и прописываем npm install для установки зависимостей, затем npm run dev Это поднимет локальный сервер. Заходим на http://localhost:8080/ и проверяем сайт, особенно отправку заявки. Если всё ок — двигаемся дальше. Настройка VPS + установка Nginx Подключаемся к серверу через SSH (например, через Termius) и по шагам: sudo apt update && sudo apt upgrade sudo apt install nginx -y systemctl status nginx BASH sudo apt update && sudo apt upgrade sudo apt install nginx -y systemctl status nginx Сборка проекта Генерируем production-версию сайта: npm run build Внутри проекта появится папка dist — именно её мы будем загружать на сервер. Копируем сайт на сервер Через SFTP (например, в Termius) идём в папку: /var/www/ Создаём там каталог для сайта (например, twitter ) и загружаем туда содержимое папки dist Настраиваем Nginx Устанавливаем редактор nano , если его нет: sudo apt install nano -y Создаём конфиг-файл: nano /etc/nginx/sites-available/my-site Вставляем конфигурацию: server { listen 80; server_name twitterinsights.life [URL='https://www.twitterinsights.life;</p><p><br></p><p> ']www.twitterinsights.life; [/URL] root /var/www/twitter; index index.html; location / { try_files $uri $uri/ /index.html; } } Код server { listen 80; server_name twitterinsights.life [URL='https://www.twitterinsights.life;</p><p><br></p><p> ']www.twitterinsights.life; [/URL] root /var/www/twitter; index index.html; location / { try_files $uri $uri/ /index.html; } } Сохраняем: Ctrl + O → Enter → Ctrl + X Активируем сайт и перезапускаем Nginx: ln -s /etc/nginx/sites-available/my-site /etc/nginx/sites-enabled/ nginx -t systemctl reload nginx Привязываем домен через Cloudflare Заходим в свой аккаунт Cloudflare (данные мы получили в FastDomain), открываем DNS. Создаём две A-записи: одну для основного домена, вторую — для www . В поле Content указываем IP вашего VPS. Всего должно быть 2-е A-записи. Убедитесь, что там именно так. Настраиваем HTTPS через Let’s Encrypt (на VPS) sudo apt install certbot python3-certbot-nginx -y sudo certbot --nginx Если всё прошло успешно, появится сообщение: Successfully deployed certificate for twitterinsights.life ... Готово! Теперь (или чуть чуть позже) наш сайт доступен по адресу: https://twitterinsights.life/ - и будет доступен какое-то время после Глава 7: Готовый результат — что получилось Созданный нами веб-сайт — универсальный инструмент, который можно встроить в любую точку маркетинговой воронки. Его можно разместить где угодно: лить траф фб, гугл, твиттер, bing, социальные сети, email-рассылках или в качестве самостоятельного ресурса, привлекающего целевой трафик под конкретную нишу Интересно, что на проработку самого сайта — его дизайна, структуры и функциональности — ушло лишь 20% всех усилий. Основное время (около 80%) было потрачено на отладку и автоматизацию технического процесса. Тем не менее, даже так результат оказался достойным: сайт уже сейчас готов выполнять свою главную задачу — конвертировать трафик в заявки и клиентов. Огромную роль в гибкости и масштабируемости проекта сыграл инструмент n8n. Благодаря нему мы можем бесконечно усложнять backend-логику: интегрировать любые CRM-системы, обрабатывать данные пользователя в реальном времени, настраивать персонализированные сценарии обработки заявок и автоматизировать весь клиентский путь — от первого клика до финальной продажи. Такой подход позволяет запускать MVP-продукты в кратчайшие сроки, но при этом не жертвовать ни качеством, ни возможностями для масштабирования. Заключение: Как превратить этот навык в источник дохода В этой статье я пошагово показал, как с помощью искусственного интеллекта и платформы Lovable можно собрать полностью рабочий проект — от генерации лендинга до полноценного backend'а и автоматизации заявок. Многие уже слышали, что «ИИ помогает делать сайты», но здесь вы получили реальный, повторяемый алгоритм, который работает. Минимум ручного кода, максимум контроля — и результат, который можно монетизировать. Что особенно важно: всё это можно повторить с любым другим проектом — для себя, для заказчиков или в формате MVP для нового стартапа. Мне кажется каждый в жизни сталкивается с тем, что нужен сайт, может кому-то за заказ. Может знакомая открыла салон красоты, может кент из чата купил дрейнер и нужен лендинг, может кто-то продает софты. EXTRA IDEA: как зарабатывать даже без входящих заказов Теперь, когда сайты можно собирать за 30–60 минут с помощью ИИ, открывается новая модель заработка: Не ждать клиента — а идти к нему первым. Как? Очень просто: 1. Парсите проекты из разных ниш (например, через Телегу, Яндекс карты, Инсту). 2. Отбираете тех, у кого нет сайта или он выглядит как из 2008 года. 3. Делаете им черновой лендинг через Lovable по шаблону (дизайн + оффер). 4. Отправляете им коммерческое предложение уже с готовым прототипом и словами: «Вот как мог бы выглядеть ваш сайт. Хотите доработать и запустить?» Это сразу выбивает вас из потока фрилансеров, которые просто "пишут в директ с вопросами" Плюс: такие лендинги можно клонировать, быстро менять тексты и масштабировать модель как мини-агентство. Спасибо за внимание! Если статья была для тебя полезной — поставь симпатию и оставь комментарий. Это самый простой способ сказать "спасибо" и мощный буст мотивации, чтобы продолжать делиться опытом и писать ещё больше годного контента Вопросы, мысли, фидбэк — всё приветствуется ниже. Я читаю и стараюсь ответить КАЖДОМУ.