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

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

Это руководство покажет вам, как установить и настроить новый проект Astro, если вы предпочитаете не использовать автоматический инструмент CLI.

Предпочитаете более быстрый способ начать работу?

Раздел, озаглавленный Предпочитаете более быстрый способ начать работу?
Попробуйте инструмент Astro CLI →

Требования

Раздел, озаглавленный Требования
  • 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('Это выполняется в вашем терминале, а не в браузере!');
---
<!-- Ниже приведен ваш "шаблон компонента". Это просто 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.

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. Следующие шаги

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

  • Директория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 в первый раз.