Как разместить лендинг на статическом хостинге. От HTML-шаблона до работающей страницы за час. Подключение домена, настройка аналитики и пикселей отслеживания.
Введение
Маркетолог запускает рекламную кампанию. Объявления готовы, бюджет выделен, аудитория определена. Осталось сделать посадочную страницу. Но разработчик занят на две недели вперёд, бюджет на фрилансера не заложен, а конструкторы сайтов требуют ежемесячной подписки. Статический хостинг решает эту проблему: готовый HTML-шаблон лендинга можно скачать бесплатно, адаптировать под себя за пару часов и загрузить на сервер. Никаких баз данных, никаких серверных скриптов, никакой ежемесячной платы. В этой статье — пошаговая инструкция, как маркетологу без навыков программирования разместить лендинг на статическом хостинге.
Шаг 1: найти и адаптировать HTML-шаблон
Писать лендинг с нуля на HTML и CSS не нужно. Существуют сотни бесплатных HTML-шаблонов лендингов. Ищите по запросам «free landing page HTML template», «free product launch template», «free lead capture page». На сайтах вроде HTML5 UP, Free-CSS выбор огромен. Что должно быть в хорошем шаблоне: адаптивность — страница должна корректно выглядеть на мобильных, форма захвата — уже встроена в код, минималистичный дизайн — без лишних элементов, которые отвлекают от целевого действия, скорость загрузки — шаблон не должен грузить десятки внешних библиотек.
После скачивания откройте index.html в любом текстовом редакторе. Visual Studio Code бесплатен и удобен, но подойдёт даже Блокнот. Найдите в коде текст-заполнитель и замените на свой: заголовок, подзаголовок, описание преимуществ, текст на кнопке. Найдите пути к изображениям и замените на свои. Если вы не верстальщик, не трогайте CSS и JavaScript — только текстовое содержимое и ссылки на картинки. Сохраните изменения. На этом этапе у вас уже есть рабочий лендинг, который можно открыть в браузере и посмотреть, как он выглядит.
Шаг 2: загрузить лендинг на статический хостинг
Теперь лендинг нужно разместить в интернете. Статический хостинг принимает HTML, CSS, JS-файлы и изображения и отдаёт их посетителям. Никаких серверных скриптов, никаких баз данных — только файлы. Хостинг статических сайтов на платформе Vibes предоставляет файловый менеджер, через который можно загрузить все файлы лендинга. Загрузите index.html, папки css, js, images и все остальные файлы, сохраняя структуру папок, которая была в шаблоне. После загрузки лендинг сразу доступен по прямой ссылке. Проверьте, что всё работает: откройте ссылку на десктопе и на смартфоне, пройдите по всем кнопкам, убедитесь, что изображения загружаются.
Шаг 3: настроить форму захвата
Статический лендинг не может обрабатывать форму сам — для этого нужен серверный скрипт. Но форму можно направить на внешний сервис. Самый простой способ — Telegram-бот. Создаёте бота через BotFather, получаете токен, находите в коде лендинга форму и меняете атрибут action на URL вебхука, который отправляет данные в бота. Есть готовые сервисы-прослойки, которые принимают данные формы и пересылают их в Telegram, email или CRM. Другой вариант — использовать Google Формы: создаёте форму, копируете код встраивания и вставляете в лендинг. Посетитель заполняет форму, данные уходят в Google Таблицу, а вам приходит уведомление на почту. Это бесплатно и работает без программирования.
Шаг 4: подключить домен
Техническая ссылка вида vibes.su/user123/landing работает, но для рекламной кампании лучше использовать свой домен или поддомен: promo.vash-sait.ru или landing.vash-brend.ru. Это вызывает больше доверия у пользователя и улучшает кликабельность в рекламных объявлениях. На тарифах Pro и Business платформы Vibes можно подключить свой домен. Процесс прост: в панели управления добавляете домен, прописываете CNAME-запись в DNS у регистратора, через несколько минут домен начинает работать. Если своего домена нет, можно использовать технический адрес — для тестовых кампаний и внутренних проектов этого достаточно.
Шаг 5: настроить аналитику и пиксели
Лендинг размещён, но нужно знать, сколько человек на него заходит и откуда. На статическом хостинге Vibes встроенная аналитика показывает посещения, географию, устройства и источники. Этого достаточно для базового отслеживания. Если нужна более детальная статистика, добавьте на лендинг код Яндекс.Метрики: скопируйте код из настроек счётчика и вставьте в секцию head файла index.html. Для ретаргетинга добавьте пиксели отслеживания: в панели управления хостингом Vibes укажите ID пикселя, и платформа автоматически встроит его во все страницы сайта. Количество доступных пикселей зависит от тарифа: 1 на Free, 20 на Pro.
Шаг 6: создать короткую ссылку с UTM-метками
Прямая ссылка на лендинг неудобна для рекламы: она длинная и не содержит параметров отслеживания. Создайте короткую ссылку с UTM-метками. Генератор UTM-меток поможет правильно разметить URL: utm_source=vk&utm_medium=cpc&utm_campaign=launch. Затем сократите размеченный URL через сервис коротких ссылок. Короткую ссылку размещайте в рекламных объявлениях, постах и рассылках. Аналитика покажет, какой канал принёс больше переходов и конверсий.
Часто задаваемые вопросы
Сколько времени занимает запуск лендинга этим способом? С готовым шаблоном — 2-3 часа на адаптацию и загрузку. Если вы уже делали подобное — час. Основное время уходит на подбор шаблона и замену текстов. Сама загрузка на хостинг и настройка аналитики — 15 минут.
Нужно ли знать HTML для работы с шаблоном? Базово — да, но достаточно уметь находить текст в коде и заменять его. Теги трогать не нужно. Если вы видите h1 и Заголовок внутри, меняете «Заголовок» на свой текст, не трогая угловые скобки.
Можно ли на одном хостинге разместить несколько лендингов? Да, создайте отдельную папку для каждого лендинга и загрузите в неё файлы. Каждый лендинг будет доступен по своему URL. На тарифе Free — один сайт, на Pro — до 10.
Что делать, если после загрузки лендинг отображается криво? Проверьте пути к CSS-файлам и изображениям. В шаблоне могли быть жёстко прописаны пути вроде /css/style.css, а на хостинге структура папок другая. Исправьте пути на относительные: css/style.css.
Можно ли использовать PHP или другие серверные языки на статическом хостинге? Нет, статический хостинг отдаёт только готовые файлы. Если лендингу нужна серверная логика, используйте внешние сервисы для обработки форм и интеграций.
Как часто нужно обновлять лендинг после запуска? По результатам аналитики. Если конверсия низкая, меняйте заголовок, изображения, текст кнопки. Каждое изменение загружайте поверх старого файла. A/B-тестирование ссылок поможет найти лучший вариант без правки самого лендинга.
