Polyarix 5.0

Собственный сайт - самый требовательный проект: заказчик придирчивый, дедлайнов нет, а результат смотрят все. Это честная история о том, как сайт нашей компании прошёл путь от WordPress через Laravel к связке «статический фронт на Astro + headless-CMS на Laravel» - и почему новая версия загружается мгновенно, живёт на четырёх языках и пересобирает себя сама после каждой правки в админке.

История сайта тянется с 2013 года, и все первые версии жили на WordPress. Это не был «сайт из шаблона»: уникальная тема, написанная под нас, эффекты на three.js, кастомные поля на ACF, мультиязычность. За эти годы сайт пережил несколько редизайнов - менялся внешний вид, но платформа оставалась той же. Языки тоже добавлялись постепенно: до 2020 года сайт жил на двух, затем их стало три.

И WordPress честно делал свою работу. Если что и требовало постоянного внимания - так это безопасность: WordPress - самая популярная CMS в мире, а значит и самая атакуемая, поэтому ядро и плагины нужно патчить без пауз.

Со временем накопилось и другое наблюдение: сайт с тяжёлой 3D-графикой и несколькими языками упирался в архитектуру универсальной CMS. Всё работало, но мы хотели не «работает» - мы искали максимально удобное и быстрое решение. Для компании, которая делает сайты клиентам, собственный сайт - это ещё и полигон: на нём мы обкатываем подходы, прежде чем предлагать их другим.

В 2022 году мы перенесли сайт на Laravel - фреймворк, на котором строим большинство клиентских проектов. Классический монолит: Laravel собирает страницы на сервере, контент в базе данных, своя админка.

• Полный контроль над кодом: любая функция - это вопрос разработки, а не поиска подходящего плагина.
• Порядок в данных: проекты, статьи, отзывы, вакансии и технологии стали полноценными сущностями в базе со своими полями и связями.
• Спокойнее по безопасности: Laravel из коробки закрывает целые классы атак, а поверхность атаки заметно меньше, чем у CMS с десятками сторонних плагинов.

Эта версия отработала четыре года. Но к 2026-му мы снова захотели большего.

Новую версию начали не с кода, а с дизайна. Референс по настроению - лёгкие «дышащие» сайты с широкой сеткой: мы выбрали контейнер 1520 пикселей вместо привычных 1140-1200, чтобы работам и типографике было просторно. Фирменные константы бренда сохранили: логотип, фирменный синий, шрифт Gotham Pro. Добавили акцентную палитру - фиолетовый, оранжевый, мятный, персиковый.

Важное архитектурное решение: дизайн-система существует не в виде PDF-гайдлайна, а в виде живой страницы прямо внутри сайта. Это внутренний UI-kit, который рендерит реальные токены и компоненты из продакшен-кода: палитру, типографическую шкалу, отступы, радиусы, кнопки, карточки, формы, аккордеоны. Дизайн и код не могут разъехаться: если токен поменялся в CSS - он поменялся и в гайдлайне. В прод эта страница не попадает.

Все токены живут в одном CSS-файле как custom properties:

:root {
  --c-blue: #0204f5;
  --c-purple: #b535fc;
  --c-orange: #ff642c;
  --c-mint: #85f4c4;
  /* ...типографическая шкала, отступы, радиусы, тени, easing-функции */
}

Один файл - единственный источник правды для всего визуала на каждой из сотен страниц.

• Astro - фреймворк фронтенда. Собирает страницы в готовый HTML заранее и по умолчанию отправляет посетителю ноль килобайт JavaScript. Для сравнения: типичный сайт на React несёт 100-300 КБ скриптов только чтобы «завестись».
• Vite - сборщик, на котором Astro работает под капотом: мгновенный дев-сервер и агрессивная оптимизация продакшен-кода.
• TypeScript - каждая сущность контента описана типом, и если API вернёт не то, что ждёт шаблон, - ошибка всплывёт при сборке, а не у посетителя.
• three.js - 3D-графика для анимации на главной. Используем «голой», без обвязок: меньше кода, выше FPS.
• sanitize-html - фильтр для HTML из админки: контент из CMS физически не может принести на страницу уязвимость.
• sharp - обработка изображений на этапе сборки.
• Laravel + Backpack CRUD - контент-API и админка: описываешь сущность - получаешь готовый интерфейс со списками, фильтрами и правами доступа.
• Cloudflare Pages - хостинг статики в CDN-сети: посетитель из Варшавы, Киева или Нью-Йорка получает сайт с ближайшей точки.
• GitHub Actions - CI/CD: каждое изменение прогоняется через тесты и деплоится автоматически.
• Sentry - мониторинг ошибок с обеих сторон: мы узнаём о проблеме раньше, чем посетитель напишет в поддержку.

Ключевая идея: сайт-витрина должен быть статикой. Браузер получает готовый HTML с ближайшего CDN-сервера - рендерить нечего, ждать нечего. Поисковый робот видит полностью готовую страницу, а не пустой контейнер, который «когда-нибудь дорисует JavaScript». У статических файлов нет базы данных и сессий - атаковать в буквальном смысле нечего.

Вся сборка - 119 страниц на четырёх языках примерно за 2,5 секунды. И это только старт: страницы активно добавляются - блог, посадочные под услуги, новые кейсы.

«Ноль JS по умолчанию» не значит «скучно». Анимации есть, но каждая подключается точечно: «signal field» на главной грузится лениво и останавливается вне экрана; halftone-портреты в отзывах растрируются прямо в браузере; появление блоков при скролле и счётчики - вручную на IntersectionObserver, без единой библиотеки.

Показательный пример - главная. Сначала мы интегрировали эффектный 3D-шар из стекла: React, физический движок, 3D-модель. Красиво, но тяжело - мегабайты кода и WebAssembly-физика. Заменили его на «signal field»: чистый three.js без React и физики. Визуально почти не проиграли, а по весу и плавности выиграли в разы. Иногда правильное инженерное решение - вовремя отказаться от красивого, но дорогого.

Отдельно про языки: сайт живёт на английском, русском, украинском и польском - четыре языка впервые за всю историю проекта. Каждая страница существует в четырёх версиях с правильными URL, и все они собираются из одного набора компонентов - меняются только словари переводов и контент из CMS.

В классической CMS админка и сайт - одно целое: система и хранит контент, и рисует страницы. В headless-подходе CMS «обезглавлена»: она только хранит контент и отдаёт его по API - в формате JSON. А рисует страницы кто-то другой - в нашем случае Astro.

Мы не стали выбрасывать наработки второй версии: Laravel-бэкенд остался, но сменил профессию - из «сервера, рендерящего сайт» превратился в контент-API и админку на Backpack. В ней живут десять типов контента: страницы, статьи, авторы, проекты, отзывы, клиенты, услуги, технологии, вакансии и настройки сайта.

API отдаёт переводимые поля картой всех локалей с фолбэком (если польский текст не написан - покажется английский), скрывает черновики, кэшируется и отвечает только доверенным доменам фронтенда.

Контент сложных страниц - кейсов и услуг - это не «простыня» текста, а массив типизированных блоков: факты, текст, колонки, изображение, галерея, слайдер, шаги, FAQ, призыв к действию. Редактор собирает страницу из блоков, как из конструктора, а на стороне Astro один общий рендерер превращает каждый тип в свой компонент:

{blocks.map((block) => {
  switch (block.type) {
    case 'facts':   return <FactsGrid {...block} />;
    case 'gallery': return <Gallery images={block.images} />;
    case 'steps':   return <StepsTimeline {...block} />;
    case 'cta':     return <CtaBanner {...block} />;
    /* ...text, columns, image, slider, faq */
  }
})}

Контент-менеджер получает свободу вёрстки, но не может сломать дизайн: каждый блок рендерится строго по дизайн-системе. А весь HTML из админки прогоняется через санитайзер: вычищаются потенциально опасные теги и даже выравнивается иерархия заголовков - чтобы редактор физически не мог испортить SEO-структуру страницы. Кстати, эту страницу вы читаете именно из таких блоков.

От правки в админке до обновления на продакшене проходит 3-4 минуты, без участия разработчика. На случай, когда ждать не хочется, в админке есть кнопка «Пересобрать сайт». Это и есть архитектура JAMstack: скорость и неуязвимость статики плюс удобство обычной CMS.

Деталь для надёжности: снимки API-ответов закоммичены в репозиторий фронтенда. Сайт можно собрать и протестировать вообще без бэкенда, а специальная проверка сверяет структуру снимков с живым API - о смене формата мы узнаем из проверки, а не из сломанного продакшена.

SEO для этого проекта было требованием номер один к архитектуре - мы закладывали его с самого начала.

• Мгновенная отдача HTML: статика с CDN даёт лучшие Core Web Vitals - нет сервера, который «думает», и нет JS-рендеринга, который поисковику пришлось бы исполнять.
• Ровно один h1 на каждой странице и без пропусков уровней заголовков - это гарантировано даже для контента из CMS.
• Canonical, title и description - по одному на страницу, для каждой из 119.
• Мультиязычное SEO: каждая страница объявляет свои языковые версии через hreflang, а карта сайта генерируется автоматически со всеми связями.
• Структурированные данные: граф Schema.org на каждой странице - Organization, WebSite, WebPage, плюс Article, JobPosting, FAQPage, Service, BreadcrumbList, Person. Из этого Google собирает расширенные сниппеты.
• Честные 404: без специального файла Cloudflare Pages отдаёт на несуществующие URL главную с кодом 200 (soft-404, за который поисковики наказывают) - мы поймали это на аудите и починили.
• Никаких ссылок страницы на саму себя: логотип на главной, активный пункт меню и текущий язык - не ссылки. Гигиена ссылочного графа, которую почти никто не делает.

И главное: всё перечисленное проверяется автоматически. Собственный скрипт-аудитор прогоняется по всем собранным страницам, и SEO-регрессия не проникнет на сайт незамеченной - ноль замечаний или сборка не едет в прод.

Статика статикой, но заявки принимать нужно. Формы отправляются напрямую в Laravel API: валидация на сервере, защита от спама, резюме - в приватное хранилище, а каждая заявка фиксирует страницу и язык пользователя.

Бэкенд покрыт набором из 72 автотестов: контракт API (все локали на месте, черновики скрыты), CORS, формы, пересборка, импорт контента. Деплой физически невозможен, пока хоть один тест красный. На фронтенде свои стражи: структурный SEO-аудит всех страниц и проверка контракта с API. Ошибки продакшена ловит Sentry с обеих сторон.