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

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

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

Предварительные условия

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

Установка

Заголовок раздела Установка

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

1. Создайте каталог

Заголовок раздела 1. Создайте каталог

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

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

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

Terminal window
npm init --yes

2. Установите Astro

Заголовок раздела 2. Установите Astro

Сначала установите зависимости 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 и выполнения различных команд.

3. Создайте свою первую страницу

Заголовок раздела 3. Создайте свою первую страницу

В текстовом редакторе создайте новый файл в вашей директории по адресу 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: /

5. Создайте astro.config.mjs.

Заголовок раздела 5. Создайте 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({});

Если вы хотите включить компоненты UI-фреймворка, такие как React, Svelte и т.д., или использовать другие инструменты, такие как Tailwind или Partytown в вашем проекте, вот где вы будете вручную импортировать и настраивать интеграции.

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

6. Добавьте поддержку TypeScript

Заголовок раздела 6. Добавьте поддержку 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"
}

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

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

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