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

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

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

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

Заголовок раздела Предпочитаете более быстрый способ начать работу?
Попробуйте инструмент Astro CLI →
  • Node.js - v18.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('Это выполняется в вашем терминале, а не в браузере!');
---
<!-- Ниже приведен ваш "шаблон компонента". Это просто 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.

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 для получения дополнительной информации.

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

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