Как сделать сайт с нуля на Claude Code — гайд из 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 строит сайт — механика

Claude Code строит сайт итерациями. Описываешь задачу словами — «сделай hero-блок с заголовком из brief.md» — Claude пишет код в файлы проекта, ты обновляешь браузер и смотришь результат. Программировать не нужно: достаточно уметь формулировать задачи и проверять результат глазами.

Цикл выглядит так:

1. Пишешь задачу в чат Claude Code в VS Code
2. Claude читает brief.md и DESIGN.md — контекст проекта уже там
3. Файлы обновились — обновляешь браузер, смотришь что вышло
4. Говоришь что поправить: «кнопку крупнее», «убери отступ сверху»
5. Следующая итерация

Типичная ошибка первого раза — давать задачу сразу на весь сайт. Получаешь большой кусок кода, который трудно проверить и непонятно где что правильно. Одна задача за раз — единственный режим, в котором работа остаётся управляемой. На chempionat.org в репозитории 20+ коммитов: каждый фиксирует один рабочий шаг.

Что нового в Claude Code — июль 2026

Claude Code обновляется непрерывно. Несколько последних фич меняют рабочий процесс при сборке сайта.

Фоновые уведомления агентов. Сессии, которые завершились или ждут твоего ввода, теперь присылают уведомление. Раньше приходилось следить за терминалом вручную.

Кликабельные файлы в чате. Cmd+клик (или Ctrl+клик) по имени файла в сообщении Claude — файл открывается прямо в Finder или Explorer. Меньше переключений между окнами при работе над несколькими компонентами.

Автодополнение путей в bash-режиме. При вводе !-команды теперь работает автодополнение файловых путей — меньше опечаток в путях к конфигам и скриптам деплоя.

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

Источники

• Живой проект из статьи: chempionat.org — энциклопедия ЧМ-2026, собранная на Claude Code с нуля без ручного кода
• Квест «Сайт за неделю» — практическая версия этого гайда с точными командами и промптами: nakodil.site/quest/sayt-za-nedelyu
• Дневник стройки chempionat.org в реальном времени: @nakodil_ai