Установка и настройка Astro

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

Или вы можете начать свой проект, используя любую существующую тему или стартовый шаблон.

Чтобы установить Astro вручную, обратитесь к нашему пошаговому руководству по установке вручную.

Требования

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

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

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

Установка с помощью интерфейса командной строки

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

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

Флаги установки через CLI

Вы можете запустить команду create astro с дополнительными флагами, чтобы настроить процесс установки (например, автоматически отвечать «да» на все вопросы, пропускать анимацию Houston) или параметры нового проекта (например, устанавливать 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>

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

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

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

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

# создать новый проект на основе главной ветки репозитория 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! Всё, что находится между символами «---» — это
// «метаданные компонента». Они никогда не отображаются в браузере.
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({});
```
Если вы хотите включить компоненты фреймворка пользовательского интерфейса (EN), такие как React, Svelte и др. Если вы используете в своем проекте другие инструменты, такие как MDX или Partytown, здесь вы сможете вручную импортировать и настроить нужные интеграции.

Для получения дополнительной информации читайте справочник по конфигурации API (EN).
Добавьте поддержку 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.
Следующие шаги

Если вы выполнили все шаги, описанные выше, каталог вашего проекта должен выглядеть следующим образом:
- Директория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 и увидеть живое превью вашего проекта во время сборки!

Внести свой вклад Сообщество Sponsor