Что такое Astro

Astro — фреймворк для сайтов, где главное — содержимое: блогов, документации, лендингов, портфолио. Он собирает страницы в готовый HTML заранее, при сборке, и по умолчанию не отправляет в браузер ни строчки JavaScript. Поэтому такие сайты открываются очень быстро. Курс написан для Astro 5.

Три главные идеи

Остров — небольшой интерактивный кусок страницы: кнопка «Нравится», форма поиска, слайдер. Всё остальное — статичный HTML. Острова можно писать на React, Vue, Svelte и других библиотеках, и даже смешивать их на одном сайте.

Как выглядит компонент

Код Astro пишут в файлах .astro. Вот страница src/pages/index.astro:

---
const title = 'Мой блог';
---
 
<h1>{title}</h1>
<p>Здесь будут статьи.</p>

Код между линиями --- называют фронтматтером (frontmatter), он выполняется при сборке, а ниже идёт разметка. Браузер получит только <h1>Мой блог</h1> и абзац — без скрипта.

Статика и сервер

По умолчанию Astro собирает статический сайт: папку с HTML-файлами, которую можно выложить на любой хостинг. Если нужны страницы, которые формируются на каждый запрос (личный кабинет, поиск), подключают адаптер сервера. Это тема главы «Данные и сервер».

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

Нужен Node.js версии 18.20 или новее (лучше 20 или 22) и терминал. Проверьте версию:

node -v

Команда выведет что-то вроде v22.11.0. Сам JavaScript вы уже знаете из учебника; в курсе он нужен для кода в компонентах.

Учебный проект

Через весь курс проходит один пример — блог: статьи в Markdown, страница статьи, теги, страница «Обо мне», RSS-лента, а позже комментарии через форму. Каждый урок добавляет к нему одну деталь.

Частая ошибка

Новички ждут от Astro поведения React-приложения и пишут в компоненте обработчик onclick с функцией из фронтматтера. Код фронтматтера выполняется при сборке, а не в браузере, поэтому такая кнопка не будет работать. Для интерактивности нужен тег <script> или остров — об этом отдельные уроки.