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 з обох боків.