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

Сайт на Astro можно собрать с помощью Claude Code, даже если вы раньше не писали код. Вы формулируете словами, что хотите получить, а Claude подготавливает и меняет необходимые файлы проекта.

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

Документация сервиса доступна на сайте Ailoot.

Что нужно для создания сайта на Astro с Claude Code?#

Предварительно загружать сам 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.

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

Создание проекта начинается с одной команды. Откройте терминал и выполните:

npm create astro@latest

Запустится мастер настройки. В официальной документации сказано:

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

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

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

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

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

Как собрать сайт с помощью Claude Code?#

Теперь можно наполнять заготовку сайтом. Откройте папку проекта в VS Code, запустите Claude Code и расскажите, что должно появиться на страницах. Он сам внесёт изменения в src/pages и другие нужные файлы; вам останется задавать направление работы и просматривать результат.

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

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

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

Структура Astro разделяет содержимое страниц и оформление, а страницы можно собирать по общим правилам. Благодаря такому устройству Claude проще менять отдельные части, не затрагивая без необходимости соседние. Если Claude Code не находит файлы проекта или отвечает не по задаче, используйте инструкцию о том, почему Claude Code не видит файлы проекта.

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

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

npm run dev

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

Просмотр обновляется вместе с файлами: после правки Claude страница в браузере меняется автоматически, без ручной перезагрузки. Можно поочерёдно просить внести изменения, смотреть результат и уточнять детали. Когда сайт будет готов, его можно разместить в интернете.

Как бесплатно опубликовать сайт на Astro?#

Чтобы сайт открывался у других людей по ссылке, его нужно разместить на хостинге. Один из доступных способов — сначала отправить проект в репозиторий GitHub, а затем подключить к нему сервис, который собирает и публикует сайты Astro. Основные этапы такие:

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

Официальная документация Astro описывает подключение репозитория к хостингу так:

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

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

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

Во сколько обойдётся сайт на Astro?#

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

Возможные расходы связаны с двумя дополнительными услугами. Первая — ИИ-инструмент, с помощью которого вы создаёте сайт. Вторая — собственный домен вместо бесплатного адреса наподобие имя.netlify.app; он нужен не всем. Таким образом, размещение сайта может быть бесплатным, а расходы зависят от выбранного ИИ-сервиса и домена.

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

Познакомьтесь с Ailoot.