Установка Astro вручную
В этом руководстве вы пройдете через шаги по ручной установке и настройке нового проекта Astro.
Предварительные условия
Заголовок раздела Предварительные условия- Node.js —
v18.14.1или выше. - Текстовый редактор — Мы рекомендуем VS Code с нашим официальным расширением Astro.
- Терминал — доступ к Astro осуществляется через интерфейс командной строки (CLI).
Установка
Заголовок раздела УстановкаЕсли вы не хотите использовать наш автоматический CLI-инструмент create astro, вы можете установить проект самостоятельно, следуя приведенному ниже руководству.
1. Создайте каталог
Заголовок раздела 1. Создайте каталогСоздайте пустой каталог с названием вашего проекта, а затем перейдите в него.
mkdir my-astro-projectcd my-astro-projectКак только вы окажетесь в новой директории, создайте файл проекта package.json. Так вы будете управлять зависимостями проекта, включая Astro. Если вы не знакомы с этим форматом файла, выполните следующую команду для его создания.
npm init --yespnpm inityarn init --yes2. Установите Astro
Заголовок раздела 2. Установите AstroСначала установите зависимости Astro внутри вашего проекта.
npm install astropnpm add astroyarn add astroЗатем замените код внутри секции “scripts” вашего package.json следующим образом:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "astro dev", "start": "astro dev", "build": "astro build", "preview": "astro preview" },Эти скрипты вы будете использовать позже в руководстве для запуска Astro и выполнения различных команд.
3. Создайте свою первую страницу
Заголовок раздела 3. Создайте свою первую страницуВ текстовом редакторе создайте новый файл в вашей директории по адресу src/pages/index.astro. Это будет ваша первая страница в проекте Astro.
Для этого руководства скопируйте и вставьте в новый файл следующий фрагмент кода (включая --- тире):
---// Добро пожаловать в Astro! Все, что находится между этими кодовыми заборами с тройным тире// это ваш компонент "frontmatter". Он никогда не запускается в браузере.console.log('This runs in your terminal, not the browser!');---<!-- Ниже расположен ваш "шаблон компонента". Это просто HTML, но с но с некоторой магией, которая поможет вам создавать отличные шаблоны. --><html> <body> <h1>Hello, World!</h1> </body></html><style> h1 { color: orange; }</style>4. Создайте свой первый статический ресурс
Заголовок раздела 4. Создайте свой первый статический ресурсВам также понадобится создать директорию public/ для хранения ваших статических ресурсов. Astro всегда будет включать эти ресурсы в вашу окончательную сборку, поэтому вы можете безопасно ссылаться на них из шаблонов компонентов.
В текстовом редакторе создайте новый файл в директории по адресу public/robots.txt. robots.txt — это простой файл, который будет включен большинством сайтов, чтобы сообщить поисковым ботам, таким как Google, как обращаться с вашим сайтом.
Для этого руководства скопируйте и вставьте следующий фрагмент кода в новый файл:
# Пример: Разрешить всем ботам сканировать и индексировать ваш сайт.# Полный синтаксис: https://developers.google.com/search/docs/advanced/robots/create-robots-txtUser-agent: *Allow: /5. Создайте astro.config.mjs.
Заголовок раздела 5. Создайте astro.config.mjs.Astro настраивается с помощью файла astro.config.mjs. Этот файл необязателен, если вам не нужно настраивать Astro, но вы можете захотеть создать его сейчас.
Создайте astro.config.mjs в корне вашего проекта и скопируйте в него приведенный ниже код:
import { defineConfig } from 'astro/config';
// https://astro.build/configexport default defineConfig({});Если вы хотите включить компоненты 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):
{ "extends": "astro/tsconfigs/base"}Наконец, создайте src/env.d.ts, чтобы TypeScript знал о типах окружения, доступных в проекте Astro:
/// <reference types="astro/client" />7. Следующие шаги
Заголовок раздела 7. Следующие шагиЕсли вы выполнили все шаги, описанные выше, каталог вашего проекта теперь должен выглядеть следующим образом:
Directorynode_modules/
- …
Directorypublic/
- robots.txt
Directorysrc/
Directorypages/
- 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