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

Ваш новый 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 обрабатывает, оптимизирует и объединяет в бандл ваши файлы из src/, чтобы создать окончательный сайт, который отправляется в браузер. В отличие от статической директории public/, файлы из src/ собираются в билд и обрабатываются с помощью Astro.

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

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

`src/pages`

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

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

`src/components`

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

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

`src/layouts`

Макеты - это компоненты Astro, которые задают UI-структуру, используемую на одной или нескольких страницах.

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

`src/styles`

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

`public/`

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

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

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

`package.json`

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

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

Чтобы создать новый файл package.json для вашего проекта, ознакомьтесь с инструкцией по ручной установке.

`astro.config.mjs`

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

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

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

См. Руководство по настройке Astro (EN) для детальной настройки.

`tsconfig.json`

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

См. Руководство по TypeScript для деталей по настройке конфигурации.

Внести свой вклад Сообщество Sponsor