Как сделать свой сайт с нуля — карта из 10 шагов

Я решил на своём примере пройти весь путь — от идеи до готового сайта в интернете. Без знаний программирования. Только Claude Code, пошаговый план и около $30 в месяц на инструменты.

Эта статья — карта этого пути, разложенная на 10 шагов. С местами где сам наступил на грабли.

За пример взял chempionat.org — сайт-энциклопедию про чемпионат мира 2026, который сейчас строю публично в @nakodil_ai. Но какой проект будешь делать ты — не важно. Карта одна и та же.

Без точных shell-команд, конфигов и промптов Claude Code — для них есть квест.

Что унесёшь из статьи:

• Карту 10 шагов «от идеи до публичного сайта в интернете»
• Конкретные суммы — сколько плачу за хостинг, домен, подписку Claude Pro
• 3 ловушки на которые наступил сам — чтобы ты не наступил
• Ответ на главный вопрос: нужны ли тебе знания программирования (короткий — нет)

Шаг 0: Зачем тебе сайт

Сайт сегодня нужен почти каждому — и под совершенно разные задачи:

• Личное портфолио или резюме, чтобы тебя нашли
• Лендинг продукта или услуги, чтобы продавать
• Блог или контентный проект, чтобы зарабатывать на трафике
• Внутренний инструмент или калькулятор для своей работы
• Энциклопедия, справочник, агрегатор — как мой проект про чемпионат мира

Ещё пару лет назад вариантов было два, и оба с компромиссами.

Нанять разработчика — лендинг $1000–3000, минимум неделя на согласования, каждая правка дорого.

Сделать на конструкторе вроде Tilda, Wix или Webflow — подписка $10–30/мес навсегда, ограничения по дизайну и функционалу, и сайт не совсем твой.

Сейчас появился третий вариант — сделать самому с Claude Code. Программирование знать не обязательно. Платишь $20/мес за подписку Claude Pro, плюс копейки за хостинг и домен — и пишешь код голосом, Claude делает остальное. Тебе остаётся одно: понятная идея и пошаговый план.

Этот план — ниже.

Шаг 1: Установка VS Code + Claude Code

Что это. VS Code — редактор кода, бесплатная программа от Microsoft. Claude Code — AI-агент, который живёт внутри редактора и пишет код по твоему словесному описанию. Аналог — Codex CLI от OpenAI (работает с моделями ChatGPT). Если уже платишь за ChatGPT Plus — можешь попробовать его, логика в этой статье будет та же, дальше для конкретики я буду писать про Claude.

Зачем нужен. Всё остальное в этом списке ты будешь делать через диалог с Claude в этом окне. Без редактора и без AI-агента инструкции бесполезны — этот шаг открывает доступ ко всем остальным.

Из моего опыта. Один раз настроил VS Code + Claude Code и забыл про сам факт настройки. Всю работу делаю в одном окне, скорость не падает. Это тот этап, где «настроил один раз — пользуешься годами».

Если у тебя ещё нет Claude Code — первый шаг моего квеста «Сайт за неделю» называется «Установка Claude Code» и открыт бесплатно. Там пошагово: подписка, установка редактора, расширение, первое сообщение AI. Пройди его, и дальше эта статья будет читаться без пробелов.

Шаг 2: Установка Ruby + Rails

Что это. Ruby — язык программирования. Rails — фреймворк для веб-сайтов, написанный на Ruby. Вместе они дают один из самых быстрых способов поднять полноценный сайт с базой данных и админкой.

Зачем нужен. Твой код должен на чём-то работать. Я выбрал Rails — он маленький, читаемый, и Claude знает его идеально. Альтернативы есть, но для первого проекта Rails — самый дружелюбный.

Claude сам поставил Ruby, Rails и создал новое приложение — я не открывал ни одной документации.

Шаг 3: Первая страница — твоя идея

Что это. Файл brief.md в корне проекта, в котором ты словами описываешь свой сайт: для кого, что болит у этой аудитории, какая главная фича, что специально НЕ делаем.

Зачем нужен. Claude читает этот файл в начале каждой сессии и сразу понимает контекст. Без него — общение с амнезией: каждый раз приходится повторять кто ты, что строишь и зачем.

Что я сделал. Написал brief.md на 5 KB — 7 секций: для кого, что болит, главная фича MVP, что НЕ делаем, монетизация, каналы, финальная фраза одним предложением.

Где сломалось. Первая версия была «электронный Panini-альбом про ЧМ-2026». В тот же день переписал во вторую — слово Panini уехало в IP-риск, и ICP оказался слишком узким. Финальная — третья: «визуальная энциклопедия для русско- и украиноязычных болельщиков». Слова в этом файле важнее кода, который пойдёт следом — они определят весь продукт. Этот же урок «зафиксируй критерий до того как стал кодом» я повторю на шаге 4.

Claude отвечает по brief.md — контекст из файла встроен в сессию автоматически, без напоминаний.

Кстати, весь этот процесс — каждый шаг, факап и решение — я выкладываю по дням в @nakodil_ai. Если хочешь смотреть как сайт строится в реальном времени — подпишись, это бесплатно.

Шаг 4: Дизайн и стиль

Что это. Файл DESIGN.md с палитрой цветов, шрифтами, отступами и токенами интерфейса. Визуальный язык сайта в одном месте.

Зачем нужен. Когда визуальные правила зафиксированы до кода — любая правка стиля потом меняет одну переменную в одном файле, а не двадцать мест по всему сайту.

Что я сделал. Зафиксировал 18 цветов, три шрифта, систему отступов и радиусов. Один файл — вся дизайн-система проекта.

Где сломалось. Выбрал шрифт Anton для заголовков и не проверил поддержку кириллицы. На украинской версии полезли пустые квадратики вместо букв. Перешёл на Oswald — он поддерживает кириллицу и визуально близко к Anton. Тот же урок что в шаге 3 — критерии (в данном случае «работает с кириллицей») должны быть зафиксированы до того как ты начал собирать остальное. Этот же принцип сработает на шаге 8 при выборе имени домена.

Шаг 5: Секции главной

Что это. Главная страница сайта — hero-блок, контентные секции, footer. Первый видимый результат твоей работы.

Зачем нужен. Главная — лицо проекта. На localhost ты впервые видишь свой реальный сайт, а не его описание словами. С этого момента работа из абстрактной становится осязаемой.

Из моего опыта. Главная chempionat.org — 7 секций плюс боковая колонка. Перед тем как писать Rails-код, я сделал статичный HTML-макет, открыл в браузере, обсудил с Claude. Дальше Claude по этому макету переписал всё в полноценную Rails-страницу за один проход.

До — статичный HTML-макет, который я открыл в браузере и обсудил с Claude:

После — полноценная Rails-страница с данными из базы, переключением языков, интерактивной картой стадионов:

Шаг 6: GitHub — сохраняем код

Что это. GitHub — бесплатный сервис, который хранит твой код в облаке. Регистрируешься, создаёшь репозиторий (= папка для проекта), пушишь свой код туда.

Зачем нужен. Без него весь проект живёт только на твоём ноутбуке. Если что-то случится с диском — разработка ушла. С GitHub есть удалённый бэкап и полная история коммитов: можно откатиться к любой версии.

Что я сделал. Сейчас в репозитории chempionat.org 20+ коммитов, каждый — маленький шаг с понятным сообщением. Пушу регулярно — это и бэкап, и история того что делал, к чему всегда можно вернуться.

Где сломалось. В первые дни я работал без коммитов вообще — фокус был на коде, не на сохранении. Если бы в этот момент что-то случилось с диском, всё ушло бы безвозвратно. Сейчас коммичу маленькими шагами. Если откладываешь GitHub «потом» — поставь его в начало, а не в середину, как сделал я.

Шаг 7: Деплой — сайт в интернете

Что это. Процесс, в котором твой код с ноутбука оказывается на удалённом сервере и становится доступен по интернет-адресу для всех.

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

Из моего опыта. Использую Kamal — инструмент деплоя от создателей Rails. Один файл с настройками, команда kamal deploy, и через несколько минут сайт работает в проде. Зелёный замок https в адресной строке появляется автоматически, ничего отдельно настраивать не надо. Сервер арендую у Hetzner — компактная машина обходится в €4–5 в месяц.

Где затыкается. Команда kamal deploy отрабатывает чисто — если до этого правильно заполнил конфиг и подключил SSH-ключи к серверу. Это пара десятков строк настроек, в которых без подсказки легко наошибаться: не тот ключ, не тот порт, не тот образ.

Шаг 8: Свой домен

Что это. Имя, по которому открывается сайт — типа chempionat.org вместо IP-адреса вроде 89.167.24.185. Покупается на год вперёд за $5–15 у регистраторов вроде Namecheap или Cloudflare.

Зачем нужен. Имя — лицо проекта. Запоминается, шерится в чатах, выглядит как настоящий сайт. IP-адрес никто шарить не будет.

Что я сделал. Купил chempionat.org на Namecheap и подключил к серверу. Имя выбрал намеренно транслитом — читается одинаково на русском и украинском, и обходит юридические риски (никаких FIFA, mundial и world-cup-словечек, на которые легко словить претензию).

Где затыкается. Подключение домена к серверу — это пара DNS-записей в админке Namecheap. Каких именно и с какими значениями — без опыта неочевидно: типы A, AAAA, CNAME, TTL, разная пропагация по странам. Наугад можно долго тыкать и ждать что обновится.

Что заранее зафиксировал. Перед покупкой проверил три критерия: читается на двух языках, свободен в .org, не содержит юридически рискованных слов. Это тот же принцип «критерии до решения» что в шагах 3 и 4 — на третьем повторении он становится привычкой.

Шаг 9: Форма подписки

Что это. Поле на сайте, где посетитель оставляет email или подписывается на твой Telegram-канал. Способ начать собирать аудиторию с первого дня.

Зачем нужен. Сайт — это первое касание. Без формы человек посмотрел и ушёл, и ты его больше никогда не увидишь. С формой — он попадает в твою базу, и ты можешь рассказать ему про новые посты, обновления, продукты. Аудитория, которая копится с первого месяца, через год превращается в актив, который дороже самого сайта.

Из моего опыта. Для nakodil.site я использую email-форму — собираю подписчиков, потом зову на новые статьи и продукты. Для моего DeFi-трекера ставлю обе формы сразу: email и Telegram-бот. Выбор зависит от того, где тусуется твоя аудитория: технологи и предприниматели сидят в TG, более широкая аудитория — в почте. Не уверен — ставь обе.

Шаг 10: Финальная полировка

Что это. SEO (чтобы сайт находили в Google), аналитика (чтобы видеть кто заходит и откуда), скорость загрузки (чтобы страница открывалась быстро на любом интернете).

Зачем нужен. Без этого сайт есть, но никто о нём не знает. И ты сам не знаешь, работает он или нет — заходят ли люди, читают ли страницы, или сайт пустой.

Из моего опыта. На chempionat.org каждая страница «знает», что она существует на трёх языках — Google это понимает и показывает в поиске нужную версию в зависимости от страны посетителя. Карта сайта рассказывает поисковикам что у меня есть. Всё это собирает Claude — если знаешь как правильно его попросить. Я говорю что-то вроде «настрой базовое SEO под три языка, добавь sitemap, проверь мета-теги» — и он делает. Дальше — аналитика: ставлю Plausible или Umami, чтобы видеть посещаемость без слежки за пользователями.

Это была карта. Дальше — выбор за тобой

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

Первый — идти по карте самостоятельно. Гуглить, читать документацию, переспрашивать Claude по каждому шагу. Это полностью рабочий путь — так делается большинство сайтов. На каждом шаге будут нюансы которые ты закроешь сам: DNS-записи у Namecheap, конфиг Kamal, переформулировка промпта когда Claude не понял с первого. Это не страшно, для этого есть Stack Overflow и сам Claude.

Второй — пройти мой квест «Сайт за неделю». Те же десять шагов, но в формате практического прохождения: ты идёшь по экранам, делаешь по шагам, видишь результат сразу. Что внутри:

• Скриншоты каждого экрана — какую кнопку нажать, куда смотреть
• Точные команды для копирования — без догадок
• Промпты Claude Code, проверенные на практике
• Подсказки в местах где обычно затыкаются: kamal deploy, DNS, «Claude пошёл не туда»

Первый шаг — «Установка Claude Code» — открыт бесплатно, без регистрации. Можно сразу пройти и посмотреть как устроено внутри:

Пройти первый шаг квеста →

Остальные шаги сейчас в работе. Чтобы попасть в первую волну когда они откроются — зарегистрируйся на лендинге, я напишу на почту как только всё будет готово.

Открыть лендинг квеста «Сайт за неделю» →

А если хочешь смотреть как этот сайт собирается в реальном времени — подпишись на @nakodil_ai. Там я выкладываю каждый шаг по дням: что делаю, что ломается, что в итоге работает.

Читать дальше

• Как установить Claude Code
• Красивый дизайн сайта за 2 минуты
• Телеграм-бот для дайджеста чатов
• Вайбкодинг: с чего начать
• Всё про Claude Code