import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro'; import ReadMore from '/components/ReadMore.astro';

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

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

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

:::tip[Онлайн-превью] Хотите попробовать Astro в своем браузере? Посетите astro.new, чтобы просмотреть наши стартовые шаблоны и запустить новый проект 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 в любом месте на вашем компьютере, поэтому нет необходимости создавать новый пустой каталог для вашего проекта перед началом работы. Если у вас ещё нет пустого каталога для нового проекта, мастер поможет создать его автоматически.

<PackageManagerTabs> <Fragment slot="npm"> ```shell # создать новый проект с помощью npm npm create astro@latest ``` </Fragment> <Fragment slot="pnpm"> ```shell # создать новый проект с помощью pnpm pnpm create astro@latest ``` </Fragment> <Fragment slot="yarn"> ```shell # создать новый проект с помощью yarn yarn create astro ``` </Fragment> </PackageManagerTabs> Если всё прошло успешно, вы увидите сообщение об успехе, за которым последуют рекомендации по дальнейшим действиям.

2. Теперь, когда ваш проект создан, вы можете выполнить команду cd в новом каталоге проекта, чтобы начать использовать Astro.

3. Если вы пропустили шаг "Install dependencies?" во время работы мастера установки, то обязательно установите свои зависимости, прежде чем продолжить.

4. Теперь можно запустить сервер разработки Astro и увидеть живое превью вашего проекта во время сборки!

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

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

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

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

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

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

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

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

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

создать новый проект на основе главной ветки репозитория GitHub

npm create astro@latest -- --template /

</Fragment> <Fragment slot="pnpm"> ```shell # создать новый проект с официальным примером pnpm create astro@latest --template <example-name> # создать новый проект на основе главной ветки репозитория GitHub pnpm create astro@latest --template <github-username>/<github-repo>

создать новый проект на основе главной ветки репозитория GitHub

yarn create astro --template /

</Fragment> </PackageManagerTabs> По умолчанию эта команда будет использовать ветку `main` хранилища шаблонов. Чтобы использовать другое имя ветки, передайте его в качестве части аргумента `--template`: `<github-username>/<github-repo>#<branch>`. ## Ручная установка В этом руководстве вы узнаете, как вручную установить и настроить новый проект Astro. Если вы не хотите использовать наш автоматический CLI-инструмент `create astro`, вы можете создать проект самостоятельно, следуя руководству ниже. <Steps> 1. Создайте директорию Создайте пустой каталог с именем вашего проекта, а затем перейдите в него. ```bash mkdir my-astro-project cd my-astro-project ``` Как только вы окажетесь в новой директории, создайте файл проекта `package.json`. Так вы будете управлять зависимостями проекта, включая Astro. Если вы не знакомы с этим форматом, выполните следующую команду, чтобы создать такой файл. <PackageManagerTabs> <Fragment slot="npm"> ```shell npm init --yes ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm init ``` </Fragment> <Fragment slot="yarn"> ```shell yarn init --yes ``` </Fragment> </PackageManagerTabs> 2. Установите Astro Сначала установите зависимости Astro в свой проект. :::note[Важно] Astro должен быть установлен локально, а не глобально. Убедитесь, что вы *не* запускаете `npm install -g astro`, `pnpm add -g astro` или `yarn add global astro`. ::: <PackageManagerTabs> <Fragment slot="npm"> ```shell npm install astro ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm add astro ``` </Fragment> <Fragment slot="yarn"> ```shell yarn add astro ``` </Fragment> </PackageManagerTabs> Затем замените всю секцию «scripts» в `package.json` следующими данными: ```json title="package.json" del={3} ins={4-6} { "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "astro dev", "build": "astro build", "preview": "astro preview" }, } ``` Вы будете использовать эти скрипты далее в руководстве для запуска Astro и выполнения различных команд. 3. Создайте свою первую страницу В текстовом редакторе создайте новый файл в вашей директории по адресу `src/pages/index.astro`. Это будет ваша первая страница в проекте. Скопируйте и вставьте следующий фрагмент кода (включая символы `---`) в ваш новый файл: ```astro title="src/pages/index.astro" --- // Добро пожаловать в Astro! Всё, что находится между символами «---» — это // «метаданные компонента». Они никогда не отображаются в браузере. console.log('Это запускается в терминале, а не в браузере!'); --- <!-- Ниже приведён «шаблон компонента». Это просто HTML, но с небольшой магией, чтобы помочь вам создавать великолепные шаблоны. --> <html> <body> <h1>Привет, мир!</h1> </body> </html> <style> h1 { color: orange; } </style> ``` 4. Создайте свой первый статический ресурс Вам также потребуется создать директорию `public/` для хранения статических ресурсов. Astro всегда будет включать эти ресурсы в вашу финальную сборку, поэтому вы можете смело ссылаться на них внутри шаблонов компонентов. В текстовом редакторе создайте новый файл в вашей директории по адресу `public/robots.txt`. `robots.txt` — это простой файл, который большинство сайтов включают в себя, чтобы указать поисковым ботам, таким как Google, как обращаться с вашим сайтом. Скопируйте и вставьте следующий фрагмент кода в новый файл: ```diff title="public/robots.txt" # Пример: Разрешить всем ботам сканировать и индексировать ваш сайт. # Полный синтаксис: https://developers.google.com/search/docs/advanced/robots/create-robots-txt User-agent: * Allow: / ``` 5. Создайте файл `astro.config.mjs` Astro настраивается с помощью файла `astro.config.mjs`. Этот файл необязателен, если вам не нужно настраивать Astro, но вы можете захотеть создать его сейчас. Создайте `astro.config.mjs` в корне вашего проекта и скопируйте в него приведённый ниже код: ```js title="astro.config.mjs" import { defineConfig } from 'astro/config'; // https://astro.build/config export default defineConfig({}); ``` Если вы хотите включить [компоненты фреймворка пользовательского интерфейса](/ru/guides/framework-components/), такие как React, Svelte и др. Если вы используете в своем проекте другие инструменты, такие как MDX или Partytown, здесь вы сможете [вручную импортировать и настроить нужные интеграции](/ru/guides/integrations-guide/). Для получения дополнительной информации читайте [справочник по конфигурации API](/ru/reference/configuration-reference/). 6. Добавьте поддержку TypeScript TypeScript настраивается с помощью файла `tsconfig.json`. Даже если вы не пишете код на TypeScript, этот файл важен для того, чтобы такие инструменты, как Astro и VS Code, знали, как понимать ваш проект. Некоторые функции (например, импорт пакетов npm) не полностью поддерживаются в редакторе без файла `tsconfig.json`. Если вы собираетесь писать код на TypeScript, рекомендуется использовать шаблон Astro `strict` или `strictest`. Посмотреть и сравнить три конфигурации шаблонов можно на сайте [astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/). Создайте файл `tsconfig.json` в корне проекта и скопируйте в него приведённый ниже код. (Вы можете использовать `base`, `strict` или `strictest` для своего шаблона TypeScript): ```json title="tsconfig.json" "base" { "extends": "astro/tsconfigs/base" } ``` Подробнее об этом читайте в [руководстве по настройке TypeScript](/ru/guides/typescript/#настройка). 7. Следующие шаги Если вы выполнили все шаги, описанные выше, каталог вашего проекта должен выглядеть следующим образом: <FileTree> - node_modules/ - public/ - robots.txt - src/ - pages/ - index.astro - astro.config.mjs - package-lock.json, или `yarn.lock`, `pnpm-lock.yaml` и т. д. - package.json - tsconfig.json </FileTree> 8. Теперь можно [запустить сервер разработки Astro](/ru/develop-and-build/#запуск-сервера-разработки-astro) и увидеть живое превью вашего проекта во время сборки! </Steps>