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

> С нуля до рабочего статического сайта за 45 минут: коллекции контента, острова и ментальная модель Astro.
>
> 2026-06-10 — y7.hk

## Почему Astro?

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

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

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

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

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