Как сделать сайт самому: от пустой папки до адреса в интернете

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

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

Три способа, и они не равны

Запрос «конструктор сайтов» это 37 972 показа в месяц, «как создать сайт самому» 1 711. Разница в тридцать раз, и она объясняет всю индустрию: людям продают кнопку, а не понимание

Источник: Yandex Wordstat, регион Россия, замер 21 августа 2026

Способов на самом деле три

Конструктор. Тильда, Битрикс, любой другой. Мышкой двигаете блоки, публикуете в один клик. Быстро и предсказуемо, пока вы делаете то, что конструктор умеет. Как только нужно поведение, которого в блоках нет, вы упираетесь в потолок и начинаете платить за плагины или искать разработчика

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

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

Ниже про третий способ. Первые два хороши ровно в одном случае, и об этом честно в конце

Что нужно до начала

Компьютер, любой. Мак, винда и линукс подходят одинаково

Агент в терминале. Claude Code, Codex, Cursor: разница между ними меньше, чем пишут. Установка занимает минуты три и разобрана отдельно, в статье про установку Claude Code

Аккаунт на хостинге. Vercel и Netlify отдают бесплатный тариф, которого хватает на первый сайт с запасом

Домен, если хотите красивый адрес. Тысяча рублей в год, но на первое время можно жить на бесплатном адресе хостинга и купить домен позже

Час времени без отвлечений. Не потому что сложно, а потому что придется принимать решения, а решения в фоне не принимаются

Шаг 1. Решить, что за сайт

Самая частая ошибка вечера начинается тут: человек открывает агента и пишет «сделай сайт». Модель делает сайт. Красивый, пустой и ни о чем

Сайт бывает трех видов, и они отличаются не дизайном, а тем, что происходит дальше

Одна страница про одну вещь. Продукт, услуга, вы сами. Заканчивается одним действием: написать, оставить заявку, купить

Каталог. Много однотипных страниц: статьи, товары, проекты. Тут сразу появляется вопрос, откуда берутся эти страницы и кто их будет добавлять

Сайт с оплатой. Все то же плюс касса, доступ и письма. Отдельная история, там важна не верстка, а то, что происходит после платежа

Напишите одно предложение до того, как открывать терминал: кто заходит, что он должен понять за десять секунд и что нажать. Это предложение станет основой запроса к модели, и от его точности зависит все остальное

Шаг 2. Пустая папка и первая команда

Создаете папку, открываете в ней терминал и делаете единственную вещь, которую нельзя откладывать

git init

Дальше сохраняйтесь после каждого шага, который заработал:

git add -A && git commit -m "первый экран готов"

Правило простое: заработало значит сохранили. Не «в конце дня», а сразу

Шаг 3. Первый запрос к модели

Плохой запрос: «сделай красивый лендинг для моей студии»

Хороший запрос описывает четыре вещи: что за проект, для кого, что должно произойти и чем собираем. Примерно так

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

Разница не в вежливости, а в том, что во втором случае модель знает, что важно, а что нет. Мобильные важнее, действие одно, лишнего не нужно

Дальше она напишет файлы, а вы посмотрите глазами

Как описать вид, чтобы не получить шаблон

Модель по умолчанию делает средний сайт: синяя кнопка, три колонки с иконками, отзывы карточками. Не потому что не умеет иначе, а потому что вы не сказали иначе, а среднее это самый безопасный ответ

Три вещи, которые убирают шаблонность за один запрос

Референс словами. Не «сделай красиво», а «плотно, много воздуха между блоками, крупный заголовок и почти нет цвета, кроме одной кнопки». Модель понимает такие описания буквально и заметно лучше, чем прилагательные

Ограничение. «Один цвет кроме черного и белого. Два размера текста, не больше». Ограничение работает сильнее, чем просьба: оно отсекает средний вариант, а не добавляет к нему

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

Дизайн, который вы не можете описать словами, вы и не проверите глазами. Поэтому описание полезно вдвойне: оно же становится вашим критерием приемки

Тексты, из-за которых сайт работает или не работает

Сборка занимает вечер, тексты занимают два. Это нормальная пропорция, и она вас удивит

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

Дальше по странице идут не «преимущества», а ответы на возражения в том порядке, в котором они появляются в голове. Дорого. Долго. А вы вообще кто. А если не подойдет

Числа работают лучше прилагательных. «Приезжаю в день обращения» сильнее, чем «быстрый выезд». «Чиню Bosch, Samsung и LG, остальные не берусь» сильнее, чем «большой опыт», потому что отказ вызывает доверие, а обещание всего сразу нет

Шаг 4. Смотреть и править по одному

Откройте то, что получилось, в браузере. Не читайте код, смотрите на страницу

Правьте по одной вещи за раз. «Поменяй заголовок и цвет кнопки, добавь блок с ценами и сделай меню» это четыре правки в одном запросе, и когда что-то поедет, вы не поймете, какая именно виновата

Формулируйте правку через результат, а не через способ. Не «сделай отступ 40 пикселей», а «между блоками сейчас тесно, разведи их». Модель лучше решает задачу, чем исполняет команду

После каждой удачной правки сохраняйтесь. Это та самая привычка из второго шага, и она окупается в первый же вечер, когда вы попросите поменять одну кнопку, а перестанет открываться страница

Шаг 5. Выложить на живой адрес

Пока сайт лежит у вас на компьютере, его не существует. Выкладка занимает пять минут

Заведите репозиторий на GitHub и отправьте туда проект. Дальше на Vercel нажимаете «Импортировать репозиторий», выбираете его и получаете адрес вида имя-проекта.vercel.app. Дальше каждая отправка изменений выкатывается сама

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

Проверьте, что сайт открывается и без www, и с ним. Один адрес должен отдавать перенаправление на второй, а не показывать две одинаковые копии: поисковики считают их разными сайтами и делят между ними все, что вы заработали

Шаг 6. Проверки до того, как показывать людям

Список короткий, но пропущенный пункт стоит дороже, чем кажется

Телефон. Откройте на своем и пролистайте целиком. Не в режиме телефона в браузере, а руками. Половина проблем видна только там: не влезающий заголовок, кнопка под пальцем большого размера, форма, в которую невозможно попасть

Скорость. Первый экран должен появляться за пару секунд на мобильном интернете. Чаще всего виновата одна картинка на восемь мегабайт, которую никто не сжал

Действие. Нажмите свою же кнопку и дойдите до конца. Письмо приходит? Ссылка ведет туда? Сообщение доходит? Форма, которая молча ничего не делает, это стандартная ситуация, а не редкость

Тексты. Прочитайте вслух. То, что невозможно произнести, невозможно и прочитать

Аналитика. Поставьте счетчик до запуска, а не после. Иначе первую неделю, самую интересную, вы проживете вслепую

Где это ломается

Пять вещей, которые случаются почти у всех

Сайт красивый, но непонятно, что это. Человек за десять секунд должен понять, что вы делаете и для кого. Если для этого нужно листать, вы уже потеряли половину

Одна правка сломала другое. Лечится не промтами, а сохранениями. Откатились, попросили заново другими словами

Модель придумала библиотеку. Она может уверенно подключить то, чего не существует. Признак: незнакомое название, которое вы видите впервые. Проверяется за минуту поиском

Все работает у вас и не работает у людей. Обычно дело в том, что часть файлов осталась на вашем компьютере и не уехала в репозиторий. Проверяется просто: откройте живой адрес с телефона по мобильному интернету

Форма отправляет данные в никуда. Отправка письма из браузера не работает без сервиса на той стороне. Это отдельный шаг, и его надо делать сознательно

Чат в браузере и агент: почему это разный опыт

Сайт можно собрать и в обычном чате. Он напишет код, вы скопируете его в файл, откроете в браузере, увидите, что поехало, скопируете обратно кусок и спросите почему

На третьем файле это перестает быть работой и становится перекладыванием текста. Вы работаете курьером между моделью и папкой, и на это уходит больше сил, чем на решения

Агент в терминале отличается не моделью, а тем, что происходит после вопроса: он сам открывает файлы, сам их правит, сам запускает и сам читает текст ошибки. Вам остаются решения, а не перенос текста

Разница чувствуется примерно на сороковой минуте первого вечера. До этого момента кажется, что чата достаточно

Сколько это стоит

Хостинг на старте бесплатный, домен около тысячи рублей в год. Подписка на модель двадцать долларов в месяц, и это единственная заметная строчка

Итого около двух тысяч рублей в месяц, из которых сайт занимает сто

Для сравнения: конструктор с приличным тарифом и парой плагинов стоит примерно столько же, а результат остается у него внутри

Когда конструктор все-таки лучше

Честно: в двух случаях

Если сайт нужен завтра, вы делаете его один раз и больше к нему не вернетесь. Тогда час в конструкторе выигрывает у вечера сборки

Если сайту нужна витрина с оплатой и складом, а вам нельзя ошибиться в деньгах. Готовая платформа магазина уже прошла через чужие ошибки, ваша сборка еще нет

Во всех остальных случаях своя сборка выигрывает уже на втором сайте. Первый вы делаете вечер, второй два часа, третий по дороге, потому что понимание переносится, а кнопки в конструкторе нет

Короткие ответы на частые вопросы

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

Сколько времени это займет на самом деле. Первый сайт вечер, если тексты готовы, и два вечера, если нет. Второй два часа

Можно ли перенести сайт с конструктора. Тексты и картинки да, все остальное нет: код внутри конструктора вам не отдадут. Практически это значит собрать заново, и это быстрее, чем кажется, потому что решения уже приняты

Что с поисковиками. Сайт из одной страницы на своем коде индексируется так же, как любой другой. Нужны заголовок, описание, карта сайта и подключенные панели вебмастера. Это отдельные полчаса, и делать их надо в первую неделю, а не через полгода

Кто будет это поддерживать. Вы. В этом и смысл: правка текста стоит вам пять минут, а не письма подрядчику и ожидания до вторника

Что делать прямо сейчас

Не читать дальше, а сделать три вещи подряд, они займут двадцать минут

Создать папку и написать в ней git init. Написать одно предложение про то, кто заходит и что нажимает. Отдать это предложение модели и посмотреть, что получится

Все остальное это правки, а правки делаются по одной