Начало работы с Astro-Theme-Aither

Это руководство проведёт вас от пустого проекта до опубликованного многоязычного блога. Его можно читать по порядку или сразу перейти к нужному разделу.

Что понадобится

• Node.js 22 LTS или новее
• pnpm 10 или новее
• Аккаунт GitHub
• Аккаунт Cloudflare для деплоя

Установка

git clone https://github.com/YOUR_USERNAME/YOUR_REPO.git
cd YOUR_REPO
corepack enable
pnpm install
pnpm validate
pnpm dev

После этого откройте http://localhost:4321.

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

src/
├── components/        # Компоненты Astro и React
├── config/site.ts     # Название сайта, навигация, footer, соцссылки
├── content/posts/     # Посты по локалям
├── i18n/              # Переводы интерфейса
├── layouts/           # Layout-компоненты
├── lib/               # Утилиты
├── pages/             # Страницы и маршруты
└── styles/global.css  # Токены темы Tailwind v4

Настройка

Site Config

src/config/site.ts — главный источник конфигурации сайта:

1
export const siteConfig = {
2
  name: 'Название вашего блога',
3
  title: 'Ваш слоган',
4
  description: 'Описание сайта для SEO',
5
  author: {
6
    name: 'Ваше имя',
7
    avatar: '',
8
  },
9
};

Переменные окружения

cp .env.example .env

Пустые значения просто отключают соответствующую интеграцию.

URL сайта

Продакшн-адрес задаётся в astro.config.mjs:

1
import { defineConfig } from 'astro/config';
2
import aither from '@aither/astro';
3

4
export default defineConfig({
5
  site: 'https://your-domain.pages.dev',
6
  integrations: [aither()],
7
});

Написание статей

Создайте новый .mdx файл в src/content/posts/en/:

1
---
2
title: Моя первая статья
3
date: "2026-03-14T16:00:00+08:00"
4
category: General
5
description: Краткое описание для SEO и соцсетей.
6
tags: [Topic, Another]
7
pinned: false
8
---
9

10
Здесь начинается ваш контент.

Поля frontmatter

MDX-компоненты

В контент можно импортировать интерактивные компоненты:

1
import MyChart from '@/components/MyChart'
2

3
<MyChart data={[10, 20, 30]} />

Интернационализация

Тема поддерживает 11 языков из коробки. Чтобы добавить перевод статьи, создайте файл с тем же именем в нужной локали:

src/content/posts/en/my-post.mdx
src/content/posts/ru/my-post.mdx
src/content/posts/zh-hans/my-post.mdx

Тексты интерфейса находятся в src/i18n/messages/.

Пользовательские разделы контента

Можно добавить отдельные коллекции вроде переводов, заметок или туториалов через src/content.config.ts и src/config/site.ts. После этого страницы списков и деталей создадутся автоматически.

Темы и режимы

Система состоит из двух уровней:

• цветовой режим: light, dark, system
• стиль темы: default или встроенный стиль вроде evolution

1
ui: {
2
  defaultMode: 'system',
3
  defaultStyle: 'default',
4
  showMoreThemesMenu: true,
5
},

Цветовые токены находятся в src/styles/global.css. По умолчанию используется системный sans-serif стек, а для кода — monospace.

SEO и AI

Каждая страница уже предоставляет:

• /sitemap-index.xml
• /rss.xml
• /robots.txt
• /llms.txt
• /llms-full.txt
• /posts/slug.md
• JSON-LD и Open Graph

Деплой

Cloudflare Pages

Лучшая практика: сначала создайте проект Pages. Процесс по умолчанию использует имя репозитория, а для переопределения можно задать CLOUDFLARE_PAGES_PROJECT_NAME.

Добавьте в GitHub Secrets:

• CLOUDFLARE_API_TOKEN
• CLOUDFLARE_ACCOUNT_ID

Затем выполните pnpm validate и только после этого делайте push в main.

Полезные команды

Схема версий

Публичные теги релизов используют имена в стиле CalVer, например v2026.04.08.