Установка Astro вручную
В этом руководстве вы пройдете через шаги по ручной установке и настройке нового проекта Astro.
Вместо этого воспользуйтесь инструментом Astro CLI.
Предварительные условия
Заголовок раздела Предварительные условия- Node.js —
v18.14.1
или выше. - Текстовый редактор — Мы рекомендуем VS Code с нашим официальным расширением Astro.
- Терминал — доступ к Astro осуществляется через интерфейс командной строки (CLI).
Установка
Заголовок раздела УстановкаЕсли вы не хотите использовать наш автоматический CLI-инструмент create astro
, вы можете установить проект самостоятельно, следуя приведенному ниже руководству.
1. Создайте каталог
Заголовок раздела 1. Создайте каталогСоздайте пустой каталог с названием вашего проекта, а затем перейдите в него.
Как только вы окажетесь в новой директории, создайте файл проекта package.json
. Так вы будете управлять зависимостями проекта, включая Astro. Если вы не знакомы с этим форматом файла, выполните следующую команду для его создания.
2. Установите Astro
Заголовок раздела 2. Установите AstroСначала установите зависимости Astro внутри вашего проекта.
Astro должен быть установлен локально, а не глобально. Убедитесь, что вы не запускаете npm install -g astro
, pnpm add -g astro
или yarn add global astro
.
Затем замените код внутри секции “scripts” вашего package.json
следующим образом:
Эти скрипты вы будете использовать позже в руководстве для запуска Astro и выполнения различных команд.
3. Создайте свою первую страницу
Заголовок раздела 3. Создайте свою первую страницуВ текстовом редакторе создайте новый файл в вашей директории по адресу src/pages/index.astro
. Это будет ваша первая страница в проекте Astro.
Для этого руководства скопируйте и вставьте в новый файл следующий фрагмент кода (включая ---
тире):
4. Создайте свой первый статический ресурс
Заголовок раздела 4. Создайте свой первый статический ресурсВам также понадобится создать директорию public/
для хранения ваших статических ресурсов. Astro всегда будет включать эти ресурсы в вашу окончательную сборку, поэтому вы можете безопасно ссылаться на них из шаблонов компонентов.
В текстовом редакторе создайте новый файл в директории по адресу public/robots.txt
. robots.txt
— это простой файл, который будет включен большинством сайтов, чтобы сообщить поисковым ботам, таким как Google, как обращаться с вашим сайтом.
Для этого руководства скопируйте и вставьте следующий фрагмент кода в новый файл:
5. Создайте astro.config.mjs
.
Заголовок раздела 5. Создайте astro.config.mjs.Astro настраивается с помощью файла astro.config.mjs
. Этот файл необязателен, если вам не нужно настраивать Astro, но вы можете захотеть создать его сейчас.
Создайте astro.config.mjs
в корне вашего проекта и скопируйте в него приведенный ниже код:
Если вы хотите включить компоненты UI-фреймворка, такие как React, Svelte и т.д., или использовать другие инструменты, такие как Tailwind или Partytown в вашем проекте, вот где вы будете вручную импортировать и настраивать интеграции.
6. Добавьте поддержку TypeScript
Заголовок раздела 6. Добавьте поддержку TypeScriptTypeScript настраивается с использованием tsconfig.json
. Даже если вы не пишете код на TypeScript, этот файл важен, чтобы такие инструменты, как Astro и VS Code, могли понять ваш проект. Некоторые функции (например, импорт пакетов npm) не полностью поддерживаются в редакторе без файла tsconfig.json
.
Если вы собираетесь писать код на TypeScript, рекомендуется использовать шаблон Astro strict
или strictest
. Вы можете посмотреть и сравнить три конфигурации шаблонов в astro/tsconfigs/.
Создайте tsconfig.json
в корне вашего проекта и скопируйте в него приведенный ниже код. (Вы можете использовать base
, strict
или strictest
для вашего шаблона TypeScript):
Наконец, создайте src/env.d.ts
, чтобы TypeScript знал о типах окружения, доступных в проекте Astro:
7. Следующие шаги
Заголовок раздела 7. Следующие шагиЕсли вы выполнили все шаги, описанные выше, каталог вашего проекта теперь должен выглядеть следующим образом:
Директорияnode_modules/
- …
Директорияpublic/
- robots.txt
Директорияsrc/
Директорияpages/
- index.astro
- env.d.ts
- astro.config.mjs
- package-lock.json or
yarn.lock
,pnpm-lock.yaml
, etc. - package.json
- tsconfig.json
Поздравляем, теперь вы готовы к использованию Astro!
Если вы полностью следовали этому руководству, вы можете сразу перейти к Шаг 2: Запуск Astro, чтобы продолжить и узнать, как запустить Astro в первый раз.
Learn