Как сделать сайт на Astro через Claude Code: от пустой папки до публикации

Собрать сайт на Astro через Claude Code может человек, который ни строчки кода не писал. Я сам руками давно не пишу, всё делаю словами через ИИ, и сайт на Astro собирается ровно так же: ты объясняешь, что нужно, а код за тебя пишет Claude.

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

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

Что понадобится до старта?

Astro сам по себе ничего скачивать заранее не просит - он подтянется командой на следующем шаге. А вот среда, в которой всё это крутится, нужна заранее. Astro про старт пишет так - нужны три вещи:

Разберу по пунктам, что это значит на практике:

1. Node.js - программа, без которой не запустятся ни Astro, ни большинство инструментов вайб-кодинга. Скачивается с сайта nodejs.org, ставится как обычное приложение. Номер версии в документации со временем растёт, так что перед стартом загляни на страницу установки Astro и сверь требование. Чётная версия (22, 24) - то, что нужно; нечётную (23, 25) лучше не брать.
2. VS Code - бесплатный редактор от Microsoft. В нём ты открываешь папку проекта и в нём же работает Claude Code, который и будет писать код.
3. Терминал - окно, куда вводят команды. Отдельно ставить не надо: в VS Code он открывается через меню, и все команды ниже вводятся именно там.

Если ты раньше уже ставил Claude Code и собирал хоть что-то, всё это у тебя уже есть, и шаг можно пропустить. Если нет - у меня есть отдельный разбор, как установить Claude Code, а про оплату из России - материал как оплатить Claude Code из России.

Как создать проект Astro одной командой?

Здесь начинается сам проект, и делается это одной командой. Открой терминал и введи:

npm create astro@latest

Запустится мастер установки. Вот что про него сказано в документации:

Мастер проведёт по шагам и задаст несколько вопросов: как назвать папку проекта, с какого шаблона начать и ставить ли сразу зависимости. На все вопросы можно отвечать вариантами по умолчанию - для первого сайта подойдёт пустой или минимальный шаблон. Если на вопросе про установку зависимостей ты ответил «нет», потом допиши их вручную командой npm install уже внутри папки проекта.

Когда мастер закончит, он покажет, что проект создан, и подскажет следующий шаг - перейти в папку проекта:

cd имя-твоего-проекта

Вот и всё создание. Внутри уже лежит рабочая заготовка сайта: несколько файлов и папок, из которых собирается страница. Лезть в них руками не придётся, но полезно знать, где что. Обязательной Astro считает только одну папку:

То есть src/pages - это папка, где лежат сами страницы сайта: главная, «о нас», контакты. Рядом обычно живут src/components (повторяющиеся куски вроде шапки и кнопок), src/layouts (общий каркас страниц) и папка public для картинок и файлов. Запоминать раскладку необязательно - достаточно держать в голове, что страницы живут в src/pages, и при просьбах к Claude ссылаться на неё словами: «добавь страницу контактов».

Как собирать сам сайт через Claude Code?

Заготовка есть, теперь из неё собирается твой сайт, и за него берётся Claude Code. Открываешь папку проекта в VS Code, запускаешь Claude Code и описываешь словами, что нужно. Файлы в src/pages и рядом он правит сам - тебе остаётся ставить задачу и смотреть на результат.

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

1. «Сделай главную страницу: крупный заголовок, пара предложений о том, чем я занимаюсь, и кнопка со ссылкой на контакты».
2. «Добавь страницу услуг со списком из трёх блоков».
3. «Добавь страницу контактов с телефоном и ссылкой на Telegram».
4. «Поменяй оформление: светлый фон, крупный читаемый шрифт».

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

Astro даёт ИИ удобную для этого структуру: содержимое страниц лежит отдельно, оформление отдельно, страницы собираются по единым правилам. При такой структуре Claude реже путается и реже ломает соседнее, когда правит одно место. Если Claude вдруг перестаёт видеть твои файлы или отвечает невпопад, загляни в разбор почему Claude Code не видит файлы проекта.

Astro - лишь один кирпичик в работе с ИИ. Чтобы Claude стабильно собирал то, что тебе нужно, и не скатывался в правдоподобные догадки, за три вечера на практикуме разбираем всю связку под твой бизнес: ИИ-клон + Второй мозг + Контекст-инжиниринг.

Как посмотреть сайт у себя до публикации?

Прежде чем показывать сайт миру, его смотрят у себя. Для этого у Astro есть сервер разработки - он показывает сайт вживую прямо на твоём компьютере. Запускается командой в терминале, внутри папки проекта:

npm run dev

Astro поднимет локальный просмотр и напишет в терминале адрес. По умолчанию это localhost:4321. Копируешь адрес, открываешь в браузере - и видишь свой сайт. Пока этот адрес открывается только у тебя - снаружи зайти нельзя, это твой черновик.

Удобство в том, что просмотр живой: Claude правит файл - страница в браузере обновляется сама, перезагружать вручную не нужно. Выходит быстро - попросил Claude, глянул в браузере, поправил, снова глянул, и именно на этом этапе сайт доводится до ума. Когда результат тебя устраивает, выкладываешь его в интернет.

Как выложить сайт на Astro в интернет бесплатно?

Готовый сайт надо где-то разместить, чтобы он открывался по ссылке у других людей. Бесплатный и самый понятный путь - через GitHub: сначала заливаешь код проекта в репозиторий, потом подключаешь к нему хостинг, который собирает и публикует сайт. Порядок такой:

1. Завести репозиторий на GitHub. Репозиторий - это хранилище кода в интернете, куда ты отправляешь файлы проекта. Claude Code умеет помочь с этим словами: попроси «залей проект в новый репозиторий на GitHub», и он подскажет команды. Если раньше с GitHub не работал, держи рядом инструкцию по регистрации и входу.
2. Подключить хостинг. Заходишь на один из сервисов (Netlify, Vercel), входишь через аккаунт GitHub и выбираешь свой репозиторий. Документация Astro описывает этот способ так: хостинг следит за твоим репозиторием, сам собирает сайт и публикует его.
3. Проверить настройки сборки. Обычно хостинг сам распознаёт Astro и подставляет нужное. Если спросит вручную, по документации команда сборки - astro build (или npm run build), а готовый сайт складывается в папку dist.
4. Нажать «Опубликовать». Сервис соберёт сайт и выдаст ссылку вида имя-сайта.netlify.app. По этому адресу сайт уже открывается у любого человека.

Дословно про подключение репозитория к хостингу:

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

Есть и второй бесплатный вариант - GitHub Pages, когда сайт публикуется прямо из репозитория средствами самого GitHub. Для него у Astro есть официальная заготовка:

В этом варианте сайт открывается по адресу вида твоё-имя.github.io/название-репозитория, а потом к нему можно подключить свой домен. Настройку и тут можно вести через Claude Code: описываешь задачу словами, он готовит нужный файл.

Сколько стоит собрать сайт на Astro?

Теперь про деньги. Сам Astro - бесплатный открытый инструмент, отдельного ценника у него нет. Базовые хостинги тоже дают бесплатные варианты: GitHub Pages, а также стартовые тарифы Netlify и Vercel, и лёгкому сайту на Astro их обычно достаточно (у бесплатных тарифов есть ограничения по нагрузке, но лёгкому сайту-визитке или посадочной странице их обычно хватает).

Значит, реально платить приходится за две вещи, и то не всегда. Первая - инструмент с ИИ, которым ты собираешь сайт. Вторая - свой домен, если не хочешь адрес вида имя.netlify.app, а хочешь моякомпания.ру; это по желанию и стоит недорого в год. Сам же маршрут «собрать сайт и выложить в интернет» реально пройти, заплатив только за Claude.

Что ещё спрашивают про сайт на Astro и Claude Code?

Полная схема вайб-кодинга за три вечера: ИИ-клон + Второй мозг + Контекст-инжиниринг. Записи эфиров в личном кабинете, доступ 30 дней.