Скорость запуска влияет на то, сколько гипотез команда успевает проверить. Но быстрый запуск не должен превращаться в публикацию непроверенного шаблона: ошибки в форме, аналитике, DNS или конфигурации сервера могут привести к потере заявок и рекламного бюджета.
В этом гайде разберем, как подготовить статический лендинг, разместить его на VPS с Ubuntu и Nginx, подключить домен и HTTPS, а затем проверить страницу перед запуском платного трафика.
Статья рассчитана на медиабайера или небольшую команду, у которой уже есть HTML-шаблон, домен и доступ к обработчику заявок, CRM или трекеру. Если лендинг использует PHP или другой серверный код, одной установки Nginx недостаточно: потребуется отдельно настроить среду выполнения, например PHP-FPM. В этом материале рассматривается более простой и быстрый сценарий со статической страницей.
В статье разберем:
- как проверить и адаптировать шаблон;
- что удалить из кода перед запуском;
- как настроить формы и аналитику;
- как выбрать сервер под лендинг;
- как развернуть статическую страницу на Ubuntu и Nginx;
- как подключить домен и HTTPS;
- что проверить до покупки трафика;
- как организовать оплату хостинга, доменов и рабочих сервисов.
Шаг 1. Подготовьте посадочную страницу
Начните с анализа страниц в своей нише. Задача – не копировать чужой сайт, а понять, какие блоки, предложения, визуальные решения и призывы к действию используются для похожей аудитории.
При анализе обращайте внимание на:
- порядок блоков и логику страницы;
- заголовок, подзаголовок и описание оффера;
- форму заявки или регистрации;
- кнопки и путь пользователя до целевого действия;
- изображения и визуальные акценты;
- отображение на смартфонах;
- скорость загрузки и количество внешних скриптов.
Используйте собственные шаблоны, лицензионные материалы или файлы, на применение которых у вас есть разрешение. Не переносите чужие тексты, изображения, логотипы, отзывы и коммерческие элементы без согласования с владельцем: это создает юридические и репутационные риски.
Если у вас уже есть готовый HTML-шаблон, переходите к технической проверке.
Шаг 2. Проверьте код, формы и аналитику
Полученный архив – только заготовка. Перед запуском его нужно распаковать, проверить и адаптировать под свою кампанию.
Для статического лендинга главным файлом обычно будет index.html. Его можно открыть в Visual Studio Code, Notepad++ или другом редакторе кода.
Если в архиве основным файлом указан index.php, а форма отправляет данные в локальный lead.php, такой проект нельзя развернуть как обычный статический сайт. Сначала уточните требования шаблона и настройте PHP-FPM либо замените локальный обработчик готовой интеграцией с CRM, трекером или партнерской сетью.
Удалите чужие счетчики и внешние подключения
Найдите подключения Meta Pixel, Google Analytics, TikTok Pixel, Яндекс Метрики и других систем аналитики. Чужие счетчики могут передавать данные о посещениях и действиях пользователей предыдущему владельцу шаблона.
Проверьте:
- код в
и перед закрывающим тегом; - подключаемые JavaScript-файлы;
- внешние скрипты и iframe;
- редиректы в JavaScript;
- ссылки и запросы к сторонним доменам;
- формы, которые могут отправлять данные на чужой адрес.
Не ограничивайтесь поиском названий известных счетчиков. Откройте страницу локально и посмотрите во вкладке Network, к каким доменам она обращается. После очистки подключите только собственные системы аналитики и нужные интеграции.
Проверьте события аналитики
Подключите собственные пиксели и настройте ключевые события: просмотр страницы, начало заполнения формы и успешную отправку заявки.
Не фиксируйте конверсию только по клику на кнопку. Событие лида должно срабатывать после успешного ответа обработчика или на странице благодарности. Иначе в рекламный кабинет могут попадать незавершенные и ошибочные отправки.
Для проверки Meta можно использовать Meta Ads Data Advisor – официальное расширение, которое раньше называлось Meta Pixel Helper. Дополнительно проверьте события в разделе Test Events в Events Manager.
В DevTools используйте:
- вкладку Network – для запросов к аналитике и обработчику;
- вкладку Console – для ошибок JavaScript;
- вкладку Application – для проверки файлов cookie и локального хранилища, если они используются.
Шаг 3. Адаптируйте контент и мобильную версию
Даже качественный шаблон нужно адаптировать под конкретный оффер и аудиторию. Универсальная страница не всегда соответствует ожиданиям пользователя, поэтому предложение должно быть понятным уже на первом экране.
Проверьте и обновите:
- заголовок и подзаголовок;
- описание преимуществ;
- цены, условия и ограничения;
- изображения и баннеры;
- отзывы, рейтинги и другие социальные доказательства;
- кнопки и призывы к действию;
- тексты ошибок и подтверждение отправки формы.
Используйте изображения подходящего размера и формата. Для фотографий часто подходят WebP или AVIF с резервным вариантом, а для простых иллюстраций – SVG. Не загружайте изображение шириной в несколько тысяч пикселей, если на странице оно показывается в небольшом блоке.
Минимальный чек-лист мобильной версии
- текст читается без масштабирования;
- основной CTA виден на первом экране или быстро доступен;
- форма не перекрывается экранной клавиатурой;
- изображения не ломают верстку;
- поля используют подходящий тип ввода, например
telдля телефона; - нет горизонтального скролла;
- интерактивные элементы не расположены слишком близко друг к другу;
- страница загружается без заметных задержек на мобильном интернете.
Для дополнительной проверки используйте Google PageSpeed Insights. Он показывает лабораторные данные, а для страниц с достаточной статистикой – также полевые данные Chrome UX Report. Оценивайте не только итоговый балл, но и конкретные причины замедления: тяжелые изображения, блокирующие ресурсы, сторонние скрипты и задержку ответа сервера.
Шаг 4. Выберите хостинг под задачу
Для одного простого статического лендинга может быть достаточно shared-хостинга. VPS полезен, когда нужен доступ к настройкам веб-сервера, несколько сайтов, собственные правила маршрутизации или дополнительные сервисы.
При этом VPS не означает неограниченную нагрузку. Перед заказом проверьте правила допустимого использования, ограничения тарифа и условия резервного копирования. Если ожидается высокий постоянный трафик или резкие пики, заранее обсудите нагрузку с поддержкой провайдера. Для крупных проектов может потребоваться более мощный VPS, CDN, балансировка или выделенный сервер.
VPS или выделенный сервер
| Критерий | VPS | Выделенный сервер |
|---|---|---|
| Ресурсы | Виртуальная конфигурация в пределах выбранного тарифа | Ресурсы отдельной физической машины |
| Стоимость | Обычно ниже | Обычно выше |
| Управление | Доступ к ОС и настройкам сервисов | Максимальный контроль над конфигурацией |
| Масштабирование | Часто можно изменить тариф или отдельные ресурсы | Обычно требует согласования или переноса |
| Типовые задачи | Лендинги, небольшие сайты, отдельные сервисы | Высокая постоянная нагрузка и ресурсоемкие проекты |
Не выбирайте конфигурацию только по количеству лендингов. Статические страницы обычно потребляют мало CPU и RAM, но нагрузка заметно меняется, если на том же сервере работают PHP, база данных, трекер или фоновые процессы. Начните с подходящего тарифа, включите мониторинг и увеличивайте ресурсы по фактической загрузке.
При выборе сервера учитывайте:
- локацию – сервер ближе к аудитории обычно уменьшает сетевую задержку; для нескольких регионов можно использовать CDN;
- диск – NVMe полезен для проектов с активной работой с файлами и базой данных, но не заменяет оптимизацию самой страницы;
- сеть и лимиты трафика – проверьте скорость порта, месячный лимит и ограничения постоянной нагрузки;
- IP-адрес – уточните, входит ли отдельный IPv4 в тариф и можно ли заменить адрес при технической необходимости;
- резервное копирование – узнайте частоту создания копий, срок хранения и стоимость восстановления;
- поддержку и SLA – проверьте часы работы, доступные виды помощи и порядок действий при сбое;
- возможность апгрейда – заранее выясните, можно ли увеличить CPU, RAM и диск без длительного переноса.
Для размещения лендингов можно рассмотреть VPS от Hoster.Solutions, выбрав локацию и конфигурацию под задачу. Перед заказом проверьте правила пользования и ограничения конкретного тарифа.
Если проекту нужны ресурсы отдельной физической машины, можно рассмотреть выделенные серверы Hoster.Solutions.
Шаг 5. Разверните статический лендинг на Ubuntu и Nginx
Для начала подготовьте:
- VPS с поддерживаемой версией Ubuntu LTS;
- административный доступ по SSH;
- домен;
- готовую папку с
index.html, стилями, скриптами и изображениями; - адрес обработчика заявок, если форма отправляет данные во внешний сервис.
Hoster.Solutions устанавливает выбранную операционную систему, но не предоставляет собственные DNS-серверы. DNS-записи можно настроить у регистратора домена или во внешнем DNS-сервисе.
1. Подключитесь к серверу
Используйте пользователя, указанного провайдером:
ssh USER@SERVER_IPЕсли провайдер выдал только доступ root, используйте его для первичной настройки, затем создайте отдельного пользователя с sudo и настройте вход по SSH-ключу. Постоянная работа под root увеличивает последствия случайной ошибки.
2. Установите Nginx
sudo apt update
sudo apt install nginx -y
sudo systemctl status nginxПосле установки откройте в браузере IP-адрес сервера. Если Nginx доступен, появится стандартная страница приветствия.
3. Настройте firewall
Сначала разрешите SSH, чтобы не потерять доступ к серверу, затем откройте HTTP и HTTPS:
sudo ufw allow OpenSSH
sudo ufw allow 'Nginx Full'
sudo ufw enable
sudo ufw statusЕсли SSH работает на нестандартном порту, добавьте соответствующее правило до включения firewall.
4. Создайте каталог сайта
sudo mkdir -p /var/www/landing
sudo chown -R "$USER":"$USER" /var/www/landingНа локальном компьютере загрузите содержимое папки с лендингом:
scp -r ./landing/. USER@SERVER_IP:/var/www/landing/Конструкция ./landing/. копирует все содержимое каталога, включая скрытые файлы.
5. Создайте конфигурацию Nginx
Создайте файл /etc/nginx/sites-available/landing:
server {
listen 80;
listen [::]:80;
server_name example.com www.example.com;
root /var/www/landing;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}Замените example.com на свой домен. Если поддомен www не используется, удалите его из server_name.
Включите конфигурацию и проверьте синтаксис:
sudo ln -s /etc/nginx/sites-available/landing /etc/nginx/sites-enabled/landing
sudo nginx -t
sudo systemctl reload nginxЕсли nginx -t показывает ошибку, не перезагружайте конфигурацию, пока не исправите ее.
6. Настройте DNS
В панели регистратора или DNS-сервиса создайте:
- A-запись для основного домена, направленную на IPv4 сервера;
- A-запись или CNAME для
www, если этот поддомен используется; - AAAA-запись только в том случае, если на сервере действительно настроен IPv6.
Активация стандартного VPS у Hoster.Solutions обычно занимает несколько минут. Обновление DNS чаще происходит примерно за час, но в зависимости от регистратора и кеширования может занять до 24–48 часов.
7. Подключите HTTPS
Certbot рекомендует большинству пользователей установку через snap:
sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/local/bin/certbotПеред выпуском сертификата убедитесь, что домен направлен на сервер, Nginx отвечает по HTTP, а порты 80 и 443 открыты.
Получите сертификат:
sudo certbot --nginx -d example.com -d www.example.comУказывайте www.example.com только при наличии соответствующей DNS-записи.
После установки проверьте автоматическое продление:
sudo certbot renew --dry-runОткройте сайт по https:// и убедитесь, что HTTP-версия перенаправляет пользователя на защищенное соединение.
Шаг 6. Организуйте оплату рабочих сервисов
При запуске и поддержке проектов приходится регулярно оплачивать хостинг, домены, трекеры, аналитику, рекламные кабинеты и рабочие подписки. Если все расходы проходят по одной карте, команде сложнее контролировать бюджеты и находить причину неуспешного продления.
В Pay2.House доступны виртуальные карты с BIN разных стран и регионов для оплаты рекламы и онлайн-сервисов. Возможность оплаты конкретного сервиса зависит от его правил, параметров карты и самой транзакции, поэтому перед выпуском нужно проверить актуальные карты и условия.
Для организации расходов можно использовать:
- отдельные карты для хостинга, доменов, рекламы и подписок;
- лимиты и контроль операций;
- карты и роли для участников команды;
- историю транзакций в едином интерфейсе;
- массовый выпуск и API для автоматизации операций, если они доступны на выбранном тарифе.
Например, отдельная карта для хостинга и доменов помогает не смешивать инфраструктурные платежи с рекламными расходами. Перед запуском проверьте баланс, дату следующего продления и настройки автоматического списания у каждого сервиса.
Сколько времени занимает подготовка
Если шаблон, домен, сервер и обработчик заявок уже подготовлены, техническую часть можно выполнить за несколько часов. Ниже приведен ориентир для простого статического лендинга:
| Этап | Ориентировочное время |
|---|---|
| Адаптация шаблона | 30–90 минут |
| Проверка кода, формы и аналитики | 30–60 минут |
| Установка и настройка Nginx | 30–60 минут |
| Загрузка файлов и проверка конфигурации | 15–30 минут |
| Подключение HTTPS | 15–30 минут после обновления DNS |
| Финальное тестирование | 20–40 минут |
Эти значения не включают ожидание активации нестандартной конфигурации сервера, обновление DNS, исправление ошибок шаблона и настройку PHP или другого серверного приложения.
Что проверить перед запуском трафика
| Что проверить | На что обратить внимание |
|---|---|
| Домен и HTTPS | Домен ведет на нужный сервер, сертификат действителен, HTTP перенаправляется на HTTPS |
| Nginx | Конфигурация проходит nginx -t, сайт использует правильный каталог и домен |
| Файлы | Нет ошибок 404, битых изображений и запросов к ненужным сторонним доменам |
| JavaScript | В Console нет ошибок, которые ломают форму или интерфейс |
| Аналитика | Подключены только ваши счетчики, тестовые события видны в системах аналитики |
| Конверсия | Событие лида срабатывает после успешной отправки, а не по клику на кнопку |
| Формы | Заявка появляется в CRM, трекере или партнерской сети один раз и со всеми нужными полями |
| UTM и click ID | Параметры сохраняются при переходах и передаются вместе с заявкой |
| Мобильная версия | Страница корректно работает на нескольких размерах экрана и в разных браузерах |
| Скорость | Оптимизированы изображения, нет лишних тяжелых скриптов и долгих запросов |
| Нагрузка | Тариф и правила провайдера соответствуют ожидаемому трафику |
| Резервные копии | Понятно, что копируется, как часто и как восстановить сайт |
| Доступ к серверу | Используются SSH-ключи, открыт только необходимый набор портов |
| Обновления | Установлены актуальные обновления безопасности Ubuntu и Nginx |
| Оплата | Хостинг, домен и рабочие сервисы оплачены, продления не зависят от одной общей карты |
Перед основной кампанией отправьте небольшой объем тестового трафика. Проверьте путь целиком: переход по объявлению → загрузка страницы → отправка формы → появление лида → событие в аналитике. Такой тест выявляет ошибки, которые невозможно заметить при обычном просмотре лендинга.
Заключение
Подготовка лендинга к запуску – это не только перенос файлов на сервер. Нужно очистить шаблон от чужих счетчиков, настроить собственную аналитику, проверить форму и передачу параметров, подготовить Nginx, DNS и HTTPS, а затем пройти весь пользовательский путь до появления заявки в рабочей системе.
VPS дает контроль над конфигурацией, но требует самостоятельной настройки и соблюдения ограничений провайдера. Для статического лендинга лучше начинать с простой конфигурации, следить за фактической нагрузкой и увеличивать ресурсы по мере необходимости.
Чем тщательнее проверены страница, сервер, аналитика и платежи до старта, тем меньше времени команда потратит на технические проблемы после запуска трафика.
Будьте первым, кто поделится мнением!
Мы ценим вашу обратную связь — поделитесь своим мнением.