Как мы построили atlasceo.ru за 2 дня на Astro 5

Вы сейчас читаете сайт, который был построен за 2 дня. Одним человеком. С помощью AI.

22 страницы. 3 продуктовых лендинга. PI Calculator. AI-аудит. 5 контентных секций. RSS. Sitemap. OG-картинки.

Стек

Технология	Версия	Зачем
Astro	5.16.11	SSG, MDX, Content Collections
Tailwind CSS	4.1.18	Стили через @theme в CSS
React	19.2	Interactive islands
MDX	—	Статьи с компонентами
Vercel	—	Deploy, Edge Functions

Astro 5: что изменилось

Astro 5 — значительное обновление. Ключевые отличия от v4:

Content Layer API

// Astro 4
const blog = defineCollection({
  type: 'content',
  schema: z.object({ ... })
});

// Astro 5
const blog = defineCollection({
  loader: glob({ pattern: '**/*.mdx', base: './src/data/blog' }),
  schema: z.object({ ... })
});

Tailwind 4 интеграция

Больше никакого tailwind.config.mjs. Всё в CSS:

@import "tailwindcss";
@theme {
  --color-primary: #6366F1;
  --color-surface: #12121A;
}

React 19 Islands

<PICalculator client:visible />

React загружается только когда компонент становится видимым. JS бандл: 6.7 KB (gzipped: 2.7 KB).

Архитектура

src/
├── data/           # Контент (MDX, JSON)
├── pages/          # Маршруты
├── layouts/        # Layout, ArticleLayout
├── components/
│   ├── common/     # Header, Footer, SEO
│   ├── content/    # ArticleCard, RubricBadge, ...
│   ├── landing/    # Hero, Pricing, FAQ, ...
│   ├── widgets/    # PICalculator, AIAuditForm
│   └── ui/         # Button, Badge
├── styles/         # global.css (design system)
└── lib/            # constants, utils

Результат

• 22 страницы — статически сгенерированы
• 5.7 сек — время сборки
• 186 KB — общий JS бандл (gzip: 59 KB)
• 0 ошибок — чистый билд с первой попытки
• 0 сотрудников — Claude Code написал 95% кода