← все статьиопубликовано: 20 сентября 2026 г. · 2 мин чтения

Как сделан этот сайт

Nuxt 3 на статике, три языка, замер Lighthouse при каждом деплое и заявки без своего сервера.

Nuxtпроизводительностьстатика

Этот сайт — не витрина «посмотрите, как я умею анимировать». Это рабочий пример того, как я собираю проекты целиком: от макета до продакшена. Ниже — что внутри и почему сделано именно так.

Статика вместо сервера

Сайт собран Nuxt 3 в режиме статической генерации и лежит на GitHub Pages. Никакого сервера нет: на каждый адрес заранее сгенерирован HTML. Отсюда быстрая отдача, ноль расходов на хостинг и отсутствие целого класса проблем — падений, обновлений, уязвимостей в серверном коде.

Домен подключён через Cloudflare, он же раздаёт файлы через свою сеть.

Три языка через адреса

Русская версия живёт в корне, казахская и английская — в /kk и /en. Язык определяется адресом, а не настройкой в браузере: у каждой версии свой URL, своя карточка для превью и свои теги hreflang. Поисковик видит три полноценных сайта вместо одного с переключателем.

Заявки без бэкенда

Форма отправляет данные в Cloudflare Worker, а тот пересылает их в Telegram. Токен бота лежит в секретах Cloudflare и в браузер не попадает. Если воркер недоступен, форма не теряет сообщение: она открывает Telegram с уже собранным текстом.

Скорость важнее эффектов

Анимации на сайте есть: слои стека расходятся в трёхмерную стопку, кейсы листаются по горизонтали, по Ctrl/⌘ + K открывается командная строка. Но библиотеки анимации грузятся не сразу, а когда браузер освободился или когда человек начал листать страницу. Аналитика — так же.

Шрифты лежат на том же домене, что и сайт, и подключены с font-display: optional. Из-за этого текст не прыгает при подмене шрифта: сдвиг макета на мобильном равен нулю.

Оценки проверяются на каждом деплое

Внизу страницы стоят четыре цифры Lighthouse. Это не картинка: при каждом деплое GitHub Actions поднимает собранный сайт, трижды прогоняет Lighthouse на мобильном профиле и берёт медиану. Результат кладётся рядом со страницами, и футер читает его как обычный файл.

Так проверяются и мои же слова: если очередная правка уронит производительность, это увидят все, включая меня.

Что это значит для заказчика

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

Asanali · Астана2026 · сделано без конструктора