👋 Привет, мир
Добро пожаловать в Astro-Theme-Aither — тему для блога, где типографика определяет дизайн
Добро пожаловать в Astro-Theme-Aither.
Это тема для блога, построенная на одном убеждении: хороший текст заслуживает хорошей типографики. Шрифты без засечек, чистый ритм чтения и макет, который не мешает. Всё здесь служит одной цели — сделать так, чтобы ваши слова выглядели и воспринимались красиво.
Зачем ещё одна тема для блога
В интернете множество тем для блогов, поэтому закономерный вопрос: зачем создавать ещё одну? Ответ кроется в приоритетах. Большинство тем оптимизированы для визуального эффекта — крупные изображения-заставки, сложные макеты, анимированные переходы. Они великолепно смотрятся в демо, но мешают, когда кто-то действительно садится читать статью на 2 000 слов.
Astro-Theme-Aither исходит из другой предпосылки. Контент — это продукт. Задача темы — подать этот контент с должным вниманием: продуманные сочетания шрифтов, щедрые пробелы и вертикальный ритм, делающий чтение длинных текстов комфортным, а не утомительным.
Эта философия распространяется и на технические решения. Тема отправляет примерно 0,5 КБ клиентского JavaScript — ровно столько, сколько нужно для переключения темы. Всё остальное — статический HTML и CSS. Никаких сдвигов макета, индикаторов загрузки и JavaScript-фреймворков, гидратирующихся в фоне. Страница загружается — и вы читаете.
Начало работы
Запуск занимает всего несколько минут. Вот полный процесс:
- Клонируйте репозиторий — используйте кнопку шаблона GitHub или клонируйте напрямую через
git clone - Установите зависимости — выполните
pnpm installдля загрузки всех пакетов - Настройте сайт — отредактируйте
src/config/site.ts, указав название сайта, описание и ссылки навигации - Замените примеры контента — замените посты в
src/content/posts/собственными Markdown-файлами - Начните разработку — запустите
pnpm devдля локального сервера с горячей перезагрузкой - Разверните — отправьте на GitHub, и встроенный CI-пайплайн автоматически развернёт на Cloudflare Pages
Структура проекта
Кодовая база организована так, чтобы быть сразу понятной:
src/
├── components/ # Переиспользуемые Astro-компоненты
├── config/ # Конфигурация сайта
├── content/ # Ваши Markdown-посты и контент
├── layouts/ # Макеты страниц (Layout.astro)
├── pages/ # Страницы маршрутов
└── styles/ # Глобальный CSS с токенами Tailwind v4У каждой директории чёткая ответственность. Компоненты маленькие и компонуемые. Макеты отвечают за оболочку документа. Страницы определяют маршруты. Контент хранит ваши тексты. Никакой магии — просто хорошо организованные файлы.
Написание первого поста
Создайте новый .md файл в src/content/posts/ со следующим заголовком:
---
title: Заголовок вашего поста
date: 2026-01-15
category: General
description: Краткое описание для SEO и превью в соцсетях
tags: [Topic, Another]
---
Ваш контент начинается здесь.Поля title, date и category обязательны. Поле description настоятельно рекомендуется, так как заполняет мета-тег описания и превью Open Graph. Теги необязательны, но помогают читателям находить связанный контент.
Что вы получаете
Из коробки у вас готовая к продакшену блог-платформа со всеми нужными функциями и без лишнего.
Контентные возможности
- RSS-лента — автоматически генерируется по адресу
/rss.xml, совместима со всеми ридерами - Карта сайта — автогенерация через
@astrojs/sitemapдля индексации поисковиками - SEO мета-теги — Open Graph, Twitter-карточки и канонические URL на каждой странице
- Тёмная тема — трёхпозиционный переключатель (Светлая / Тёмная / Системная) с сохранением в
localStorage - Страницы категорий и тегов — организованные архивы для просмотра по темам
Возможности для разработчиков
- TypeScript повсюду — strict-режим, полностью типизированные компоненты и утилиты
- Content Collections — встроенная система Astro для типобезопасного Markdown с валидацией frontmatter
- Tailwind CSS v4 — используются
@themeдизайн-токены для простой настройки цветов, шрифтов и отступов - Vitest + Playwright — юнит-тесты и E2E-тесты, уже интегрированные в CI-пайплайн
- Cloudflare Pages — рабочий процесс деплоя с автоматическими PR-превью
- Google Analytics — опционально, изолирован в Partytown Web Worker, не блокируя основной поток
Производительность
Поскольку тема генерирует статический HTML с минимумом JavaScript, производительность отличная по умолчанию. Ожидайте оценки Lighthouse 100 по всем параметрам — Производительность, Доступность, Лучшие практики и SEO. Оптимизировать нечего, потому что нет ничего лишнего.
Кастомизация
Тема создана быть вашей. Наиболее частые настройки просты:
- Цвета — измените CSS-переменные в
src/styles/global.cssдля смены всей палитры - Шрифты — замените значения font-family в конфигурации темы Tailwind
- Навигация — обновите массив ссылок навигации в
src/config/site.ts - Аналитика — добавьте идентификатор Google Analytics в конфигурацию сайта
Для более глубоких изменений компонентная архитектура намеренно проста. Нет глубоко вложенных абстракций или сложных паттернов управления состоянием. Каждый компонент делает одно дело, читает свои props и рендерит HTML.
Заметка о философии дизайна
Визуальная простота этой темы намеренна, но она не означает инженерную простоту. Под капотом тема справляется с удивительным количеством задач: адаптивные типографические шкалы, доступные коэффициенты контрастности цветов в светлом и тёмном режимах, правильная семантическая HTML-структура, корректная иерархия заголовков и внимательное отношение к опыту чтения на экранах от телефонов до ультрашироких мониторов.
Хороший дизайн невидим. Когда вы читаете статью с этой темой и просто наслаждаетесь текстом, не замечая темы вообще — значит, дизайн работает именно так, как задумано.
Приятного написания.
Комментарии