Что такое Astro: собрал сайт и замерил 4 файла на выходе

Что такое Astro и почему это слово вообще попадается

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

«Astro is the web framework for building content-driven websites like blogs, marketing, and e-commerce»

Документация Astro, раздел «Why Astro?»

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

Если слово «нейросеть» рядом с этим тоже пока звучит туманно, начать стоит с азов: что такое нейросеть без формул. Дальше читать будет проще

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

Слово «фреймворк» простыми словами: чем он не равен конструктору

Об это слово спотыкаются чаще, чем о сам Astro, поэтому разберу его отдельно

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

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

Мой прогон: завёл проект и посмотрел, что уехало на сайт

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

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

Порядок был такой. Команда npm create astro@latest завела новый проект из минимального шаблона, npm install поставил 193 пакета за 33 секунды, npm run build собрал сайт. В новом проекте встала версия Astro 7.3.2

Результат сборки уместился в папку dist, и внутри неё оказалось три файла: сама страница, иконка сайта в двух форматах. Страница заняла 312 байт. Файлов с кодом для браузера там не появилось ни одного

Что остаётся на компьютере против того, что уезжает на сайт

Этот контраст объясняет больше, чем любое описание, и его стоит увидеть числами

Замер того же прогона 09.09.2026: node_modules занял 160484 КБ в 9186 файлах, а папка dist - 4 файла и суммарно 2213 байт

Разница в объёме здесь примерно семидесятитысячекратная, и она не фокус. Инструмент со всеми своими деталями нужен только на время сборки и остаётся у тебя. На сайт уезжает то, что реально откроет посетитель

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

Ноль JavaScript по умолчанию: проверил, скриптов в странице правда ноль

Обещание из списка возможностей стоило проверить, а не принять на слово

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

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

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

Острова: замерил две страницы и увидел разницу в 185 байт

Слово «острова» звучит как жаргон, но за ним стоит вещь, которую можно взвесить

Я добавил в проект вторую страницу с кнопкой-счётчиком: нажимаешь, число растёт. Собрал заново и сравнил. Страница со счётчиком стала весить 497 байт и получила один тег скрипта. Первая страница осталась ровно такой же: 312 байт и ноль скриптов

Вот это и есть остров. Живой кусок получает свой код, и код этот лежит только на той странице, где он нужен. Остальной сайт про кнопку ничего не знает и лишнего не тащит

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

Разница в 185 байт на игрушечном примере выглядит смешно, а на настоящем сайте это уже галерея, форма, слайдер и меню. У тяжёлых инструментов они грузятся на весь сайт разом, у Astro - точечно

Чем Astro отличается от Тильды и от тяжёлых инструментов

Проще всего понять место Astro через то, что ты уже видел своими глазами

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

Если сравниваешь пути по деньгам, а не по устройству, смета всех вариантов собрана здесь: сколько стоит сделать сайт. Из соседнего ряда стоит посмотреть и Bolt.new - он собирает страницу словами и сразу выдаёт живой адрес

Для каких сайтов Astro подходит, а для каких не стоит

Граница проходит по одному вопросу: человек на сайте читает или работает

Если сомневаешься, спроси себя, что человек будет делать на странице. Прочитал, посмотрел, оставил заявку - территория Astro. Ведёт таблицу, управляет заказами, редактирует документ - смотри в другую сторону, там нужны инструменты под приложения

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

Что нужно, чтобы начать: три вещи из документации

Список короткий, и он записан на странице установки, а не выдуман мной

Первое - Node.js, среда, в которой запускается сам инструмент: ставится с официального сайта один раз. Второе - текстовый редактор, документация рекомендует VS Code. Третье - окно с командами, оно же терминал: через него Astro и работает

Новый проект заводится одной строкой: npm create astro@latest. Мастер задаёт несколько вопросов про имя папки и шаблон, дальше делает всё сам. У меня на это ушло меньше минуты

Выбор помощника, который будет собирать сайт словами, отдельный вопрос, и он разобран числами: лучший ИИ для вайб-кодинга

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

Грабля с версией Node, о которой мастер не предупреждает

Здесь я попал в ловушку сам, и она стоит отдельного абзаца

«Node.js - v22.12.0 or higher. Odd-numbered versions like v23 are not supported»

Документация Astro, раздел установки

Документация требует версию 22.12.0 или новее и отдельно предупреждает: нечётные номера вроде 23-го не поддерживаются. На моей машине стоит 25.9.0, то есть ровно нечётный

Мастер создания проекта об этом не сказал ни слова. Проект завёлся, всё нужное поставилось, сборка прошла. Требование при этом честно записано внутрь самого проекта: в файле package.json стоит строка "engines": {"node": ">=22.12.0"}

Вывод отсюда практический. Отсутствие ошибки при старте не значит, что версия подходящая: неприятности с нечётным номером всплывают позже и не там, где их ждёшь. Перед началом стоит посмотреть свою версию командой node -v и поставить чётную, если стоит нечётная. Это общее правило работы с нейросетью: она уверенно говорит «готово» там, где стоит проверить самому - как проверить код от ИИ, если не умеешь читать код

Astro сам кладёт файл инструкций для нейросети

Эту деталь я не искал, она нашлась в свежесозданном проекте

Вместе с проектом мастер положил файл AGENTS.md, а рядом с ним - ссылку CLAUDE.md, которая ведёт на тот же файл. Внутри инструкции для ИИ-помощника: как запускать проект в фоне, куда смотреть за документацией, какие страницы читать перед задачей про маршруты, компоненты, стили или контент

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

Для человека без опыта разработки это меняет расклад. Не ты подстраиваешься под инструмент, а инструмент приходит с готовым описанием себя для твоего помощника

Зачем выбирать фреймворк, если сайт собирает нейросеть

Это главный вопрос, и ответ на него дала сама документация Astro

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

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

Проверка 09.09.2026: адрес mcp.docs.astro.build отозвался и назвал себя «Astro Docs server» версии 1.0.0 - справочник живой, а не обещание в документации

Отсюда ответ на исходный вопрос. Нейросеть не собирает сайт из воздуха, она собирает его на каком-то инструменте. Промолчишь - она возьмёт что-то на своё усмотрение, и это вполне может оказаться тяжёлый инструмент под приложения там, где нужен был лёгкий лендинг. Назовёшь Astro - получишь то, что нужно. Что разные помощники по-разному справляются с вёрсткой, видно на замерах: Kimi K3 против Claude Code на вёрстке сайтов

Где живёт готовый сайт и что с ним можно делать дальше

Раз на выходе обычные файлы, дальнейшая судьба сайта проще, чем у страницы в конструкторе

Папка dist целиком кладётся на выбранную площадку, и на этом публикация заканчивается. Переехать в другое место - скопировать те же файлы. Отдать проект другому человеку - передать папку. Вернуться к нему через полгода - открыть в редакторе, ничего не восстанавливая

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

Если сайт уже собран на Тильде: что с ним делать

Самый частый практический вопрос после всего описанного, и ответ на него не «переезжать»

Работающий сайт, который приносит заявки, трогать незачем. Смена инструмента сама по себе не добавляет ни трафика, ни продаж, а времени съедает много. Осмысленные поводы задуматься ровно три: платформа перестала вмещать задачу, стоимость тарифа растёт быстрее пользы, либо тебе нужен контроль над файлами и переносимость

Разумный порядок в этом случае - не переносить старое, а собрать на Astro следующий проект: блог, вторую посадочную страницу, документацию продукта. Так ты увидишь разницу на живой задаче, ничем не рискуя работающим сайтом. Хороший первый заход - что-то небольшое и заметное, вроде страницы с движением: анимированный сайт в Claude Code

Как понять, что Astro тебе не нужен

Честная граница экономит больше, чем список достоинств

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

А вот когда сайтов становится несколько, когда важна скорость открытия и когда файлы должны остаться твоими, инструмент начинает окупаться. Тем более что писать код руками сегодня не обязательно: нейросеть делает это лучше, чем новичок, и структура проекта ей помогает не путаться. А если хочется всё-таки разобраться самому, начинать стоит не с фреймворков: как научиться программировать с нуля. За внешний вид страницы при этом сегодня отвечает отдельный слой инструментов - Figma Make собирает прототип из промпта

Источники

• docs.astro.build, раздел «Why Astro?» - официальное определение фреймворка, список возможностей и строка «Zero JS, by default»
• docs.astro.build, раздел «Islands architecture» - как устроены острова и что даёт точечная загрузка интерактива
• docs.astro.build, установка и требования - требование Node.js от 22.12.0 и прямая оговорка про нечётные версии
• docs.astro.build, «Getting Started» - вход новичка и команда создания проекта
• docs.astro.build, раздел «Build with AI» - официальные рекомендации по работе с ИИ-инструментами и сервер документации для помощника
• astro.build, анонс версии 1.0 - блог проекта с историей выхода первой стабильной версии

Что проверить до первой команды

Четыре строки, которые снимают самые частые заминки на старте

Частые вопросы