Установка Astro

Команда CLI create astro — это самый быстрый способ начать новый проект Astro с нуля. Она проведёт вас через все этапы настройки и позволит выбрать один из нескольких официальных стартовых шаблонов.

Вы также можете запустить команду CLI с флагом template, чтобы начать проект на основе любой существующей темы или стартового шаблона. Загляните в нашу витрину тем и шаблонов, где вы найдёте темы для блогов, портфолио, сайтов документации, лендингов и многого другого!

Если вы предпочитаете установить Astro вручную, ознакомьтесь с нашим пошаговым руководством по ручной установке.

Предварительные требования

Node.js — v18.20.8, v20.3.0, v22.0.0 или выше. (v19 и v21 не поддерживаются.)
Текстовый редактор — мы рекомендуем VS Code с нашим официальным расширением Astro.
Терминал — доступ к Astro осуществляется через интерфейс командной строки (CLI).

Совместимость с браузерами

Astro построен на базе Vite, который по умолчанию ориентирован на браузеры с поддержкой современного JavaScript. Полный список поддерживаемых версий браузеров можно найти в документации Vite.

Установка через CLI

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

Запустите следующую команду в терминале, чтобы запустить мастер установки:
- npm
- pnpm
- Yarn
Окно терминала
# создание нового проекта с помощью npm npm create astro@latest
Окно терминала
# создание нового проекта с помощью pnpm pnpm create astro@latest
Окно терминала
# создание нового проекта с помощью yarn yarn create astro
Если всё пройдёт успешно, вы увидите сообщение об удачном завершении и рекомендации по дальнейшим шагам.
Теперь, когда проект создан, перейдите в его директорию с помощью команды cd, чтобы начать работу с Astro.
Если вы пропустили шаг «Установить зависимости?» (Install dependencies?) в мастере CLI, обязательно установите их перед продолжением.
- npm
- pnpm
- Yarn
Окно терминала
npm install
Окно терминала
pnpm install
Окно терминала
yarn install
Теперь вы можете запустить сервер разработки Astro и увидеть превью вашего проекта в реальном времени!

Флаги установки CLI

Вы можете запускать команду create astro с дополнительными флагами, чтобы настроить процесс установки (например, отвечая «да» на все вопросы, пропуская анимацию Хьюстона) или сам проект (например, устанавливать git или нет, добавлять интеграции).

Смотрите все доступные флаги команды create astro.

Добавление интеграций

Вы можете начать новый проект Astro и одновременно установить любые официальные или сторонние интеграции, поддерживающие команду astro add, передав аргумент --add команде create astro.

Запустите следующую команду в терминале, подставив любую интеграцию, поддерживающую astro add:

# создание нового проекта с React и Partytown
npm create astro@latest -- --add react --add partytown

# создание нового проекта с React и Partytown
pnpm create astro@latest --add react --add partytown

# создание нового проекта с React и Partytown
yarn create astro --add react --add partytown

Использование темы или стартового шаблона

Вы можете начать новый проект Astro на основе официального примера или ветки main любого репозитория GitHub, передав аргумент --template команде create astro.

Запустите следующую команду в терминале, подставив название официального стартового шаблона Astro или имя пользователя GitHub и репозиторий темы, которую вы хотите использовать:

# создание нового проекта на основе официального примера
npm create astro@latest -- --template <example-name>

# создание нового проекта на основе ветки main репозитория GitHub
npm create astro@latest -- --template <github-username>/<github-repo>

# создание нового проекта на основе официального примера
pnpm create astro@latest --template <example-name>

# создание нового проекта на основе ветки main репозитория GitHub
pnpm create astro@latest --template <github-username>/<github-repo>

# создание нового проекта на основе официального примера
yarn create astro --template <example-name>

# создание нового проекта на основе ветки main репозитория GitHub
yarn create astro --template <github-username>/<github-repo>

По умолчанию эта команда будет использовать ветку main репозитория шаблона. Чтобы использовать другое имя ветки, укажите его как часть аргумента --template: <github-username>/<github-repo>#<branch>.

Ручная настройка

Это руководство проведёт вас через этапы ручной установки и настройки нового проекта Astro.

Если вы предпочитаете не использовать наш автоматический инструмент CLI create astro, вы можете настроить проект самостоятельно, следуя инструкциям ниже.

Создайте директорию

Создайте пустую директорию с названием вашего проекта и перейдите в неё.
Окно терминала
```
mkdir my-astro-project
cd my-astro-project
```
Находясь в новой директории, создайте файл package.json. С его помощью вы будете управлять зависимостями вашего проекта, включая Astro. Если вы не знакомы с форматом этого файла, выполните следующую команду для его создания.
- npm
- pnpm
- Yarn
Окно терминала
npm init --yes
Окно терминала
pnpm init
Окно терминала
yarn init --yes
Установите Astro

Сначала установите зависимости Astro внутри вашего проекта.

Astro должен быть установлен локально, а не глобально. Убедитесь, что вы не запускаете npm install -g astro, pnpm add -g astro или yarn add global astro.
- npm
- pnpm
- Yarn
Окно терминала
npm install astro
Окно терминала
pnpm add astro
Окно терминала
yarn add astro
Затем замените любую временную секцию scripts в вашем package.json на следующую:
package.json
```
{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
}
```
Вы будете использовать эти скрипты позже в руководстве для запуска Astro и выполнения его различных команд.

Создайте свою первую страницу

В текстовом редакторе создайте новый файл по пути src/pages/index.astro. Это будет ваша первая страница Astro в проекте.

Для этого руководства скопируйте и вставьте следующий фрагмент кода (включая тире ---) в ваш новый файл:

---
// Добро пожаловать в Astro! Всё, что находится между этими
// тройными тире — это «метаданные компонента» (frontmatter).
// Этот код никогда не выполняется в браузере.
console.log('Это выполняется в терминале, а не в браузере!');
---
<!-- Ниже находится «шаблон компонента». Это обычный HTML, но
     с добавлением магии, которая поможет вам создавать отличные шаблоны. -->
<html>
  <body>
    <h1>Привет, мир!</h1>
  </body>
</html>
<style>
  h1 {
    color: orange;
  }
</style>

Создайте свой первый статический ресурс

Вам также понадобится создать директорию public/ для хранения статических ресурсов. Astro всегда будет включать эти ресурсы в итоговую сборку, поэтому вы можете смело ссылаться на них из шаблонов ваших компонентов.

В текстовом редакторе создайте новый файл по пути public/robots.txt. robots.txt — это простой файл, который большинство сайтов используют, чтобы сообщить поисковым роботам (например, Google), как индексировать ваш сайт.

Для этого руководства скопируйте и вставьте следующий фрагмент кода в ваш новый файл:
public/robots.txt
```
# Пример: разрешить всем роботам сканировать и индексировать ваш сайт.
# Полный синтаксис: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
User-agent: *
Allow: /
```
Создайте astro.config.mjs

Astro настраивается с помощью файла astro.config.mjs. Этот файл необязателен, если вам не нужно настраивать Astro, но лучше создать его сейчас.

Создайте astro.config.mjs в корне вашего проекта и скопируйте в него код ниже:
astro.config.mjs
```
import { defineConfig } from "astro/config";

// https://astro.build/config
export default defineConfig({});
```
Если вы хотите использовать компоненты UI-фреймворков, таких как React, Svelte и др., или использовать другие инструменты, такие как MDX или Partytown, именно здесь вы будете вручную импортировать и настраивать интеграции.

Для получения дополнительной информации ознакомьтесь со справочником по конфигурации API Astro.
Добавьте поддержку TypeScript

TypeScript настраивается с помощью tsconfig.json. Даже если вы не пишете код на TypeScript, этот файл важен для того, чтобы такие инструменты, как Astro и VS Code, знали, как понимать ваш проект. Некоторые функции (например, импорт npm-пакетов) не поддерживаются в редакторе в полной мере без файла tsconfig.json.

Если вы намерены писать код на TypeScript, рекомендуется использовать шаблоны Astro strict или strictest. Вы можете просмотреть и сравнить три конфигурации шаблонов на странице astro/tsconfigs/.

Создайте tsconfig.json в корне вашего проекта и скопируйте в него код ниже. (Вы можете использовать base, strict или strictest для вашего шаблона TypeScript):
tsconfig.json
```
{
  "extends": "astro/tsconfigs/base"
}
```
Для получения дополнительной информации ознакомьтесь с руководством по настройке TypeScript в Astro.
Дальнейшие шаги

Если вы выполнили шаги выше, директория вашего проекта должна выглядеть следующим образом:
- Директорияnode_modules/
  - …
- Директорияpublic/
  - robots.txt
- Директорияsrc/
  - Директорияpages/
    index.astro
- astro.config.mjs
- package-lock.json или yarn.lock, pnpm-lock.yaml и т. д.
- package.json
- tsconfig.json
Теперь вы можете запустить сервер разработки Astro и увидеть превью вашего проекта в реальном времени!