Тюмень.Онлайн — городской портал с реальными данными

Задача

Спроектировать и собрать городской информационный портал, который не «выглядит как новостной сайт 2015 года». Цель — показать, как должен выглядеть современный региональный портал: единая дизайн-система, типографика уровня премиальных медиа, и при этом — реальный, не статичный контент, который обновляется автоматически без участия редактора.

Технически нужно было решить три задачи одновременно: (1) дать пользователю свежие новости и афишу города, (2) не платить за облачную CMS и не держать на сервере PHP-бэкенд, (3) сохранить максимальную скорость и SEO-индексируемость.

Решение

Стек выбран сознательно «олдскульно-минималистичный»: Astro 5 как генератор статики, Tailwind CSS через CDN, vanilla JavaScript для интерактива (фильтры, мобильное меню). Никаких React, Redux, серверного рантайма — всё рендерится в HTML на этапе сборки.

11 экранов → 20+ маршрутов

Дизайн собран как набор уникальных шаблонов для каждого типа экрана:

• Главная (/) — hero-блок и три новостных карточки с боковой колонкой
• Новости (/news) — лента с фильтром по рубрикам, sticky-панель, sidebar
• Афиша (/afisha) — события с фильтром по категориям, карточки с ценами и возрастной маркировкой
• Места (/places) — каталог заведений с двумя секциями: ручные «топовые» места и автоматический полный каталог из 2GIS
• Транспорт (/transport), Услуги (/services), Поиск (/search), О проекте (/about)
• Динамические маршруты: /article/[slug], /event/[slug], /place/[slug]

Каждый из 11 шаблонов разворачивается в реальные URL благодаря Astro getStaticPaths — на выходе получается 20+ страниц, индексируемых отдельно.

Реальные данные из трёх источников

Главная фишка проекта — содержимое не выдумано. Три отдельных prebuild-скрипта забирают данные:

• Новости из 72.ru — парсинг RSS-фида издания, нормализация дат, извлечение категорий и обложек. Запускается по cron каждые 3 часа.
• Афиша из kto72.ru — HTML-парсинг каталога событий (Bitrix-шаблон без публичного API): cheerio достаёт title, цены, возрастную маркировку, изображения, ссылки на покупку. Ежедневный cron.
• Места из 2GIS — запросы к публичному каталогу 2GIS API, выгрузка по 8 категориям (рестораны, кафе, бары, СПА, медицина, авто, спорт, шопинг), 160 топ-мест по рейтингу. Еженедельный cron.

После каждого фетча данные кладутся в src/data/*.json и в течение нескольких секунд пересобирается весь сайт (astro build). Готовая статика синкается на боевой сервер через rsync.

Build-time всё — нулевая стоимость рантайма

Это ключевое архитектурное решение. На бою нет ни одного PHP-процесса, ни Node-сервера, ни запроса в базу. Nginx отдаёт готовые HTML-файлы напрямую — TTFB измеряется десятками миллисекунд. При этом контент свежий, потому что пересборка идёт фоном по расписанию.

Побочный эффект — идеальная SEO-индексация. Все 20+ страниц с реальными данными отдаются ботам Яндекс/Google готовыми, без JavaScript-выполнения и без рисков с гидратацией. Это критично для регионального портала, который должен попадать в локальную выдачу.

Дизайн-система

Своя мини-палитра в духе Material Design 3: primary #0048d1 + container-токены, surface-уровни от lowest до highest, accent-коралл для CTA, типографика на Manrope (заголовки) + Inter (тело). Все токены прописаны в tailwind.config внутри Layout и используются во всех 11 шаблонах единообразно.

Интерактив без бандла

Фильтры по чипам (на /news, /afisha, /places) написаны на 30 строках чистого JS на каждой странице — без React, без библиотек. IntersectionObserver используется только для scroll-reveal анимаций. Бандл фронтенда — буквально нулевой; страница places весит ~200 КБ HTML с 160 карточками заведений.

Декоративные анимации

Поверх hero на главной — три размытых градиентных blob’а, плавно перемещающихся по фигуре-восьмёрке на 40-секундном цикле. Анимированный гиперграциент для hero-секций. Везде уважается prefers-reduced-motion: reduce — анимации полностью отключаются для пользователей с этой настройкой.

Результат

Портал работает на отдельном поддомене с Let’s Encrypt SSL. Контент обновляется автоматически — редактор не нужен. Сайт целиком открывается мгновенно даже на слабом мобильном интернете благодаря полностью статичной отдаче.

Это демонстрация того, как региональный городской портал может выглядеть и работать в 2026 году: не очередная WordPress-CMS с тяжёлым админ-интерфейсом, а легковесная SSG-архитектура с прозрачным потоком данных «источник → JSON → HTML → CDN».

Стек технологий

• Фреймворк: Astro 5 (статическая генерация, content collections, dynamic routes)
• Стили: Tailwind CSS через CDN (с конфигом прямо в Layout — без локальной сборки CSS)
• JS: vanilla, точечный inline-скрипт на страницу
• Сборка данных: node-скрипты в scripts/fetch-*.mjs для RSS / HTML / 2GIS, запускаются как prebuild
• Парсинг: cheerio для kto72.ru, штатный XML-парсер для RSS 72.ru, fetch для 2GIS API
• Деплой: rsync по SSH на VPS, Nginx + Let’s Encrypt
• Расписание: cron на VPS (новости каждые 3 часа, афиша ежедневно, места еженедельно)