Сделал свой первый сайт без дизайнера и программиста. Пошаговый разбор

Материал команды poehali.dev

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

Сделал свой первый сайт без дизайнера и программиста. Пошаговый разбор

Меня лично останавливали три мысли: «не умею», «дорого» и «страшно начинать». Оказалось, все три устарели. Рассказываю по шагам и без воды — на примере лендинга для кинолога: записи на занятия с собаками.

Что решить до старта

Сначала ответьте на один вопрос: что человек должен сделать на сайте — купить, оставить заявку, записаться, прочитать? Это цель, и всё на странице работает на неё.

Пример: у кинолога цель — запись на занятие, значит кнопка «Записаться» должна быть на виду; у магазина цель — покупка, и в центре каталог и корзина.

Новичку почти всегда хватает лендинга. Соберите контент: описание, фото, цены, контакты – это пригодится для наполнения.

Полезный лайфхак: откройте 2–3 сайта конкурентов и посмотрите не на «красоту», а на структуру — какие блоки и в каком порядке. Скриншоты понравившихся можно потом показать нейросети как референс.

Конструктор, CMS или ИИ

Сделать сайт самому можно тремя путями.

Конструкторы (Tilda, Wix) — наглядно, но вы ограничены готовыми блоками и помесячной оплатой.

CMS вроде WordPress — гибко, но это недели возни с хостингом, плагинами, обновлениями и безопасностью.

ИИ-генераторы — вы описываете сайт словами, а нейросеть собирает его целиком за минуту.

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

Пошагово через ИИ: описание → правки → публикация

Для наглядности возмем сервис «Поехали!», который собирает сайты по описанию и работает без VPN, с оплатой картами РФ.

Шаг 1. Опишите идею. Простым языком, как будто объясняете знакомому. Сравните два запроса:

Слабый запрос: «сделай сайт для кинолога».

Сильный запрос:

«Лендинг для кинолога. Занятия по дрессировке собак: первый экран с кнопкой „Записаться на занятие“, виды занятий с ценами, расписание групп, отзывы хозяев, форма записи с выбором даты и питомца, контакты и карта площадки. Стиль дружелюбный и энергичный, цвета зелёный и оранжевый».

Формула едина для всех проектов: кто вы + что за сайт + какие блоки + стиль и цвета + что должен сделать посетитель. Она работает и для магазина: «Магазин украшений ручной работы: каталог с карточками (фото, цена, кнопка „В корзину“), корзина, оформление заказа, доставка и оплата, отзывы. Стиль минималистичный, акцент — терракотовый».

Поле описания идеи в редакторе
Поле описания идеи в редакторе

Шаг 1. Описываете идею простым языком — нейросети, как знакомому.

Шаг 2. Получите первую версию. Через несколько секунд нейросеть отдаёт готовый сайт с дизайном и текстами-заготовками. Это не пустой шаблон, а рабочий сайт, который можно открыть и пролистать. Не придирайтесь к мелочам — оцените структуру и общее настроение. Если каркас верный, дальше его быстро довести до ума.

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

Шаг 2. Первая версия сайта появляется за секунды.

Шаг 3. Правьте словами.

- «Сделай первый экран темнее»;

- «убери блок с ценами»;

- «добавь функцию и кнопку “Записаться в WhatsApp“».

Точечные правки, например, текст — удобно вносить вручную в визуальном редакторе. Главное правило: одно-два изменения за раз, чтобы не сломать удачные блоки.

Правки словами
Правки словами

Шаг 3. Любая правка вносится словами или вручную в редакторе.

Шаг 4. Подключите данные. Если есть форма или каталог, у продвинутых сервисов под проект автоматически создаётся база данных и серверная часть — заявки сохраняются и могут падать вам в Telegram, без программиста. Для простой визитки шаг можно пропустить.

Шаг 5. Опубликуйте. Одна кнопка — и сайт доступен в интернете по временному адресу. Этого достаточно, чтобы показать его друзьям и собрать первые заявки. Первую версию и базовые правки реально сделать бесплатно. Итог: от пустого экрана до живого сайта — один вечер и ноль строк кода.

Публикация в один клик
Публикация в один клик

Шаг 4–5. Публикация в один клик — на временный адрес или свой домен.

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

Частые ошибки в запросах

Чтобы не терять время, избегайте типичных промахов новичков:

· Слишком общий запрос («сделай красиво») — опишите конкретику.

· Всё сразу в одном сообщении — лучше сначала каркас, потом детали.

· Нет приоритета действия — скажите, что посетитель должен сделать.

· Описание «как», а не «что» — говорите о результате, а не о тегах и вёрстке.

· Нет примеров — приложите 1–2 референса, и попадание в стиль вырастет в разы.

Как подключить свой домен

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

Как сделать, по шагам:

1. Придумайте короткое имя и проверьте его у регистратора (например, reg.ru). Домен в зоне .ru стоит примерно 200–400 ₽ в год. Для России берут .ru или .рф, для международного проекта — .com.

2. Зарегистрируйте домен — это пара минут.

3. В настройках публикации нажмите «Привязать свой домен» и добавьте имя, затем скопируйте показанные DNS-записи в кабинет регистратора. По сути — копированые пары строк по инструкции.

4. Подождите обновления DNS (от нескольких минут до пары часов) — и сайт открывается по вашему адресу.

В «Поехали!» это делается одной кнопкой. Нет домена — не беда: запускайтесь на бесплатном временном адресе, а свой подключите позже, когда убедитесь, что дело идёт.

Что делать после запуска

Опубликовать — половина дела. Минимум, который стоит сделать сразу:

- подключить Яндекс.Метрику (бесплатно), чтобы видеть посещаемость и источники;

- заполнить title и description страницы с нужным запросом;

- проверить мобильную версию (мобильного трафика — больше половины);

- добавить сайт в Яндекс.Вебмастер.

Первые посетители быстрее всего приходят из прямых каналов: ссылка в соцсетях, в шапке профиля, в подписи и на картах (Яндекс.Бизнес, 2ГИС). В первый месяц следите за тремя цифрами: посещаемость, источники и число заявок. Есть трафик, но нет заявок — проблема в самом сайте; нет трафика — занимайтесь каналами. И попросите первых клиентов оставить отзыв — это заметно повышает доверие к новому сайту.

Сколько времени и денег уйдёт

Если честно: простой лендинг — это один вечер, 2–4 часа с правками. Магазин или сайт с записью — чуть дольше, там больше блоков и логики. Деньги на старте — ноль; домен по желанию стоит 200–400 ₽ в год, а расширенные возможности и мощность оплачиваются только тогда, когда реально нужны. То есть проверить идею можно вообще без вложений.

Чек-лист: первый сайт за вечер

1. Сформулировали цель и набросали структуру.

2. Собрали тексты, фото и контакты.

3. Описали идею нейросети и получили первую версию.

4. Внесли правки словами, подключили данные для форм.

5. Опубликовали сайт и проверили его на телефоне.

6. Подключили свой домен и Яндекс.Метрику.

А вы бы доверили создание своего сайта нейросети — или спокойнее, когда делает живой подрядчик? Что останавливает сильнее: страх «получится криво» или цена? Делитесь в комментариях.

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