Содержание

Фреймворк Astro

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

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

Особенности Astro:

Astro использует серверный рендеринг вместо клиентского рендеринга в браузере в максимально возможной степени. Это тот же подход, который традиционные серверные фреймворки – PHP, WordPress, Laravel, Ruby on Rails и т. д. – используют уже десятилетия. Но вам не нужно изучать второй серверный язык, чтобы использовать его. С Astro всё по-прежнему сводится к HTML, CSS и JavaScript. Чтобы рендерить страницы по запросу, вам нужно подключить адаптер. Каждый адаптер позволяет Astro сгенерировать скрипт, запускающий ваш проект в конкретной среде выполнения — окружении, которое выполняет код и генерирует страницы при обращении к ним (например, Cloudflare).

Требования и установка Astro

Astro создан на основе Vite, который по умолчанию нацелен на браузеры с современной поддержкой JavaScript. Доступна русскоязычная официальная документация Установка и настройка Astro.

Мое рабочее окружение Linux обычно с Xfce, поэтому сначала смотрим что версии ПО: 

$ git --version
git version 2.43.0
$ npm -v
11.6.2
$ node -v
v24.12.0
$ nvm ls
->     v24.12.0
         system
default -> lts/* (-> v24.12.0)
...
lts/krypton -> v24.12.0
darkfire@dark:~$

И я вижу, что мое системное оружение полностью соответствуете всем требованиям для Astro, в частности, установлена последняя официальная LTS-версия Node.js.

Создание Astro-проекта

В каталоге: 

cd ~/projects

Создадим проект. create-astro это CLI-мастер установки и у него собственный цикл релизов и своя нумерация. В итоговом файле package.json созданного проекта в секции dependencies будет указан именно astro: "^7.2.0". 

$ npm create astro@latest
Need to install the following packages:
create-astro@5.2.4
Ok to proceed? (y)

Например в директорию project_zones: 

Where should we create your new project?
./project_zones

Для первого проекта выбирать максимально простой вариант: 

 tmpl   How would you like to start your new project?
         ● A basic, helpful starter project (recommended)
         ○ Use blog template 
         ○ Use docs (Starlight) template 
         ○ Use minimal (empty) template

Если мастер предлагает установить зависимости, выбираем Yes. Git: Yes.

После создания, командой npm run dev запускаем сервер разработки. Сочетание клавиш q + ENTER останавливаем сервер: 

cd project_zones
npm run dev

Astro покажет локальный URL примерно: 

http://localhost:4321/

Открытие проекта в VS Code

Проще всего открывать проект в VS Code из консоли Linux, в директории проекта введите команду: 

code .

В VS Code установить официальное расширение Astro (astro-build.astro-vscode) от разработчиков Astro, как показано на скриншоте. Для первого этапа базового плагина Astro действительно более чем достаточно — он сразу даст подсветку синтаксиса .astro файлов, автодополнение и поддержку TypeScript. Что бы при каждом сохранении (Ctrl + S) VS Code сам выравнивал отступы и HTML-теги в .astro файлах, используя движок встроенного плагина, нужно создать файл .vscode/settings.json в корне вашего проекта и добавьте текстовую инструкцию в формате JSON: 

{
  "editor.formatOnSave": true,
  "[astro]": {
    "editor.defaultFormatter": "astro-build.astro-vscode"
  }
}

.gitignore для проекта на Astro

Файл .gitignore, который создаётся по умолчанию, уже полностью правильный и содержит 95% всего необходимого. Стандартного содержимого от Astro вполне достаточно, но для чистоты репозитория и предотвращения утечек ключей его стоит немного дополнить.

Итоговый рекомендуемый .gitignore для Astro: 

# build output
dist/
 
# generated types
.astro/
 
# dependencies
node_modules/
 
# logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
 
# environment variables
.env
.env.*
!.env.example
 
# macOS-specific files
.DS_Store
 
# IDEs and Editors
.idea/
.vscode/*
!.vscode/extensions.json
!.vscode/settings.json
*.suo
*.ntvs*
*.njsproj
*.sln
 
# Local temp & swap files
*.swp
*.swo
 
# Temporary & cache folders
.cache/
tmp/

Темы в Astro

Темы в Astro есть, но я бы для такого pSEO-проекта не ставил готовую тему на старте. Не потому что Astro «красивый из коробки» — он практически ничего не оформляет. Просто тебе нужны Header + Footer + нормальная типографика + таблицы + карточки. Это проще сделать самому, чем потом разбирать чужую тему с десятками ненужных компонентов. Если найдём действительно простую подходящую тему — использовать можно.

Мультиязычность Astro

Мультиязычность (i18n) Astro поддерживает из коробки. Есть встроенная i18n-маршрутизация: языки, язык по умолчанию, URL вида /en/…, /ru/…, fallback и т. п. Отдельный i18n-плагин не нужен. Официальную документацию смотрите в разделе Многоязычная маршрутизация (i18n).

Astro действительно имеет встроенный i18n routing, но важный нюанс: он управляет маршрутами, а тексты интерфейса сам не переводит. Для наших переводов позже сделаем маленький словарь без стороннего плагина.

Разное

<slot />

— это место, куда Astro вставляет содержимое конкретной страницы. Это стандартный механизм layouts в Astro.