Создание проекта
Проект Astro создаёт официальный мастер create astro. Он задаёт несколько вопросов, скачивает шаблон и устанавливает зависимости. После этого остаётся запустить сервер разработки и открыть сайт в браузере.
Создание
Выполните в терминале, в папке, где хранятся ваши проекты:
npm create astro@latest blogМастер спросит, какой шаблон взять, устанавливать ли зависимости и создать ли репозиторий Git. Для курса выберите минимальный пустой шаблон (вариант с названием вроде «minimal» или «empty») и согласитесь на установку зависимостей. Появится папка blog.
Запуск
cd blog
npm run devКоманда запускает сервер разработки и пишет в терминале адрес http://localhost:4321. Откройте его — появится стартовая страница. Сервер следит за файлами: сохраните изменения, и страница в браузере обновится сама. Остановить сервер можно сочетанием Ctrl+C.
Структура проекта
blog/
├── public/
│ └── favicon.svg
├── src/
│ └── pages/
│ └── index.astro
├── astro.config.mjs
├── package.json
└── tsconfig.json| Путь | Что внутри |
|---|---|
src/pages/ | Страницы сайта: каждый файл — отдельный адрес |
src/components/ | Компоненты, из которых собираются страницы (папку создаёте сами) |
src/layouts/ | Макеты — общее оформление страниц (тоже создаёте сами) |
src/styles/ | Общие файлы CSS |
src/assets/ | Картинки, которые Astro оптимизирует при сборке |
public/ | Файлы, которые копируются на сайт как есть: favicon.svg, robots.txt |
astro.config.mjs | Настройки Astro и подключённые интеграции |
Обязательна только папка src/pages/, остальные — общепринятое соглашение.
Файл настроек
// astro.config.mjs
import { defineConfig } from 'astro/config';
export default defineConfig({});Пока настройки пустые. В следующих уроках сюда добавятся адрес сайта, интеграции (React, MDX, sitemap) и адаптер сервера.
Команды проекта
| Команда | Что делает |
|---|---|
npm run dev | Сервер разработки на http://localhost:4321 |
npm run build | Сборка готового сайта в папку dist/ |
npm run preview | Просмотр собранного сайта из dist/ |
npx astro add react | Подключение интеграции, здесь — React |
Частая ошибка
Картинку кладут в src/ и пишут в разметке путь вида /src/images/cat.jpg. В разработке это иногда работает, но после сборки файл не попадёт на сайт. Файлы, на которые вы ссылаетесь прямым адресом, кладите в public/ и пишите путь без public: /cat.jpg. Картинки в src/assets/ подключают через import — об этом урок про изображения.