Вступление: Культура веб-разработки навсегда изменилась

Еще несколько лет назад для создания и ведения своего работающего веб-сайта требовалась команда специалистов: дизайнера, бэкенд-разработчика, 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). Шрифт — современный, легко читаемый.​

См. 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

Глава 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 www.twitterinsights.life;

root /var/www/twitter;
index index.html;

location / {
try_files $uri $uri/ /index.html;
}
}

Код

server {

    listen 80;

    server_name twitterinsights.life www.twitterinsights.life;



    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. Отправляете им коммерческое предложение уже с готовым прототипом и словами: «Вот как мог бы выглядеть ваш сайт. Хотите доработать и запустить?»

Это сразу выбивает вас из потока фрилансеров, которые просто "пишут в директ с вопросами"
Плюс: такие лендинги можно клонировать, быстро менять тексты и масштабировать модель как мини-агентство.

Спасибо за внимание!​

Если статья была для тебя полезной — поставь симпатию и оставь комментарий. Это самый простой способ сказать "спасибо" и мощный буст мотивации, чтобы продолжать делиться опытом и писать ещё больше годного контента Вопросы, мысли, фидбэк — всё приветствуется ниже. Я читаю и стараюсь ответить КАЖДОМУ.







​