Пропустить до содержимого

Установка Astro вручную

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

  • Node.jsv18.14.1 или выше.
  • Текстовый редактор — Мы рекомендуем VS Code с нашим официальным расширением Astro.
  • Терминал — доступ к Astro осуществляется через интерфейс командной строки (CLI).

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

Создайте пустой каталог с названием вашего проекта, а затем перейдите в него.

Terminal window
mkdir my-astro-project
cd my-astro-project

Как только вы окажетесь в новой директории, создайте файл проекта package.json. Так вы будете управлять зависимостями проекта, включая Astro. Если вы не знакомы с этим форматом файла, выполните следующую команду для его создания.

Terminal window
npm init --yes

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

Terminal window
npm install astro

Затем замените код внутри секции “scripts” вашего package.json следующим образом:

package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview"
},

Эти скрипты вы будете использовать позже в руководстве для запуска Astro и выполнения различных команд.

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

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

src/pages/index.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, как обращаться с вашим сайтом.

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

public/robots.txt
# Пример: Разрешить всем ботам сканировать и индексировать ваш сайт.
# Полный синтаксис: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
User-agent: *
Allow: /

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 и т.д., или использовать другие инструменты, такие как Tailwind или Partytown в вашем проекте, вот где вы будете вручную импортировать и настраивать интеграции.

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

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"
}

Наконец, создайте src/env.d.ts, чтобы TypeScript знал о типах окружения, доступных в проекте Astro:

src/env.d.ts
/// <reference types="astro/client" />
Для получения дополнительной информации прочтите руководство по настройке TypeScript от Astro.

Если вы выполнили все шаги, описанные выше, каталог вашего проекта теперь должен выглядеть следующим образом:

  • 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 в первый раз.

Contribute

Что у вас на уме?

Community