НачальныйФреймворки45 мин10 июн. 2026 г.

Создайте свой первый сайт на Astro

С нуля до рабочего статического сайта за 45 минут: коллекции контента, острова и ментальная модель Astro.

Почему Astro?

Большинство современных веб-фреймворков отдают пользователю огромный бандл JavaScript, даже если на странице практически нет интерактива. Astro кардинально меняет подход: по умолчанию генерируется чистейший статический HTML и CSS, а клиентский JavaScript подключается только к изолированным «островкам» (React, Vue или Svelte) через директивы client:load или client:visible.

Ключевая концепция: Острова

---
import Header from "../components/Header.astro";
import InteractiveCounter from "../components/Counter.jsx";
---

<Header />
<main>
  <h1>Привет, Astro!</h1>
  <InteractiveCounter client:visible />
</main>

Компонент Header отдается как легковесный HTML, а InteractiveCounter гидратируется только тогда, когда пользователь доскроллит до него.

Туториалы