Структура проекта

Новый проект Astro, созданный с помощью мастера create astro, уже содержит набор файлов и папок. Другие вы будете создавать самостоятельно по мере развития проекта.

Ниже описано, как организован проект Astro, и приведены основные файлы, которые вы в нём найдёте.

Директории и файлы

Astro предлагает рекомендуемую структуру папок для вашего проекта. Корень любого проекта Astro должен содержать следующие директории и файлы:

• src/* — исходный код вашего проекта (компоненты, страницы, стили, изображения и т. д.);
• public/* — статические ресурсы, не требующие обработки (шрифты, иконки и т. д.);
• package.json — манифест проекта;
• astro.config.mjs — файл конфигурации Astro (рекомендуется);
• tsconfig.json — файл конфигурации TypeScript (рекомендуется).

Пример дерева проекта

Типичная структура каталогов Astro выглядит следующим образом:

• Директорияpublic/

  • robots.txt
  • favicon.svg
  • my-cv.pdf
• Директорияsrc/

  • Директорияblog/

    • post1.md
    • post2.md
    • post3.md
  • Директорияcomponents/

    • Header.astro
    • Button.jsx
  • Директорияimages/

    • image1.jpg
    • image2.jpg
    • image3.jpg
  • Директорияlayouts/

    • PostLayout.astro
  • Директорияpages/

    • Директорияposts/

      • [post].astro
    • about.astro
    • index.astro
    • rss.xml.js
  • Директорияstyles/

    • global.css
  • content.config.ts
• astro.config.mjs
• package.json
• tsconfig.json

src/

Папка src/ — это место, где находится большая часть исходного кода вашего проекта. Она включает в себя:

• Страницы
• Макеты
• Компоненты Astro
• Компоненты UI-фреймворков (React и др.)
• Стили (CSS, Sass)
• Markdown
• Изображения, которые должны быть оптимизированы и обработаны Astro

Astro обрабатывает, оптимизирует и собирает файлы из папки src/, чтобы создать итоговый сайт, который отправляется в браузер. В отличие от папки public/, содержимое src/ проходит через процесс сборки.

Некоторые файлы (например, компоненты Astro) даже не отправляются в браузер «как есть», а рендерятся в статический HTML. Другие файлы (например, CSS) отправляются пользователю, но могут быть оптимизированы или объединены в общие файлы для повышения производительности.

Совет

Хотя в этом руководстве описаны общепринятые в сообществе Astro соглашения, единственной зарезервированной директорией является src/pages/. Вы вольны переименовывать и организовывать любые другие папки так, как удобно вам.

src/pages

Маршруты вашего сайта создаются путём добавления файлов поддерживаемых типов в эту директорию.

Осторожно

src/pages — это обязательная поддиректория. Без неё на вашем сайте не будет страниц и маршрутов!

src/components

Компоненты — это переиспользуемые блоки кода для ваших HTML-страниц. Это могут быть компоненты Astro или компоненты UI-фреймворков, таких как React или Vue. Обычно все компоненты проекта группируются в этой папке.

Это стандартное соглашение для проектов Astro, но оно не является строгим требованием. Организуйте свои компоненты так, как вам удобно!

src/layouts

Макеты — это компоненты Astro, которые определяют структуру интерфейса, общую для одной или нескольких страниц.

Как и src/components, эта папка является общепринятым соглашением, но не обязательна.

src/styles

Часто CSS или Sass файлы хранят в директории src/styles, но это также необязательно. Пока ваши стили находятся где-то внутри src/ и правильно импортированы, Astro сможет их обработать и оптимизировать.

public/

Директория public/ предназначена для файлов и ресурсов, которые не должны обрабатываться в процессе сборки Astro. Файлы из этой папки копируются в итоговую сборку без изменений.

Это делает public/ идеальным местом для ресурсов, не требующих обработки, таких как некоторые изображения и шрифты, или специальных файлов вроде robots.txt и manifest.webmanifest.

Вы можете размещать CSS и JavaScript в папке public/, но имейте в виду, что эти файлы не будут оптимизированы или объединены в итоговой сборке.

Совет

Как правило, любой CSS или JavaScript, который вы пишете сами, должен находиться в директории src/.

package.json

Этот файл используется менеджерами пакетов JavaScript для управления зависимостями. В нём также определены скрипты для запуска Astro (например, npm run dev, npm run build).

Существует два типа зависимостей, которые можно указать в package.json: dependencies и devDependencies. В большинстве случаев для Astro они работают одинаково: все зависимости нужны на этапе сборки. Мы рекомендуем поначалу добавлять всё в dependencies и использовать devDependencies только если у вас есть для этого веская причина.

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

astro.config.mjs

Этот файл создаётся в каждом стартовом шаблоне и содержит настройки вашего проекта Astro. Здесь вы можете указать используемые интеграции, параметры сборки, настройки сервера и многое другое.

Astro поддерживает несколько форматов для файла конфигурации: astro.config.js, astro.config.mjs, astro.config.cjs и astro.config.ts. Мы рекомендуем использовать .mjs в большинстве случаев или .ts, если вы хотите писать конфигурацию на TypeScript.

Загрузка конфигурационного файла TypeScript выполняется с помощью tsm и учитывает настройки вашего tsconfig.

Полную информацию можно найти в справочнике по конфигурации.

tsconfig.json

Этот файл генерируется в каждом стартовом шаблоне и содержит параметры конфигурации TypeScript. Некоторые функции (например, импорт npm-пакетов) могут не поддерживаться в редакторе в полной мере без файла tsconfig.json.

Подробности о настройках можно найти в руководстве по TypeScript.