Как мы построили 0101ai.tech — 87 страниц на чистом HTML, без React и Next.js

В июне 2026 года мы начали перестраивать сайт 0101ai.tech. На входе был бэкап с хостинга: 79 файлов, местами битая вёрстка, разные версии nav и футера на каждой странице, никакой системы.

На выходе — 87 HTML-страниц, 135 000 строк кода, единый mega-menu на 417 строк JavaScript, AI-чат с DeepSeek и BANT-квалификацией лидов, партнёрская программа с реферальной системой, три автономных AI-агента и SEO-инфраструктура с семантическим ядром на 120 ключей.

Стек: Tailwind CSS v4, PHP 8.2 (без фреймворка), JSON-файлы вместо базы данных, Apache на shared-хостинге Nichost. Ни одного JS-фреймворка, ни одного контейнера, ни строчки TypeScript.

Почему не Next.js и не WordPress

Стандартный путь для такого проекта — Next.js + headless CMS (Strapi/Contentful). Или WordPress с кучей плагинов. Оба варианта дают:

• Сложный деплой: Next.js требует Node.js на сервере или Vercel. WordPress — MySQL и постоянные обновления безопасности.
• Медленную разработку: Пока настройшь CMS, сверстаешь компоненты, напишешь типы — пройдёт неделя. А нам нужно было менять по 10 страниц в день.
• Зависимость от инфраструктуры: Shared-хостинг за 300 ₽/мес не тянет Node.js. А VPS за 3 000 ₽/мес для статического сайта — перебор.

Мы выбрали статический HTML + Tailwind CSS v4. Сборка CSS через npx tailwindcss, деплой через FTP (Python-скрипт на ftplib). PHP только для серверной логики: приём лидов, чат-API, партнёрское API.

Результат: сайт открывается мгновенно, индексируется без SSR, не требует ни Node.js, ни MySQL, ни Docker.

Структура: 87 страниц, один nav.js

Самая большая проблема при масштабировании статического сайта — дублирование навигации и футера. Когда у вас 10 страниц, можно скопипастить. Когда 87 — нельзя.

Решение — nav.js (417 строк, IIFE). Один скрипт, который:

• Инжектит CSS для mega-menu (6 панелей) и мобильного аккордеона
• Определяет активную страницу по window.location.pathname
• Строит полный nav HTML (десктоп + мобильный) и заменяет первый <nav> на странице
• Вешает обработчики: desktop hover с 150ms задержкой, overlay click, Escape, мобильный гамбургер, аккордеон

Mega-menu имеет 6 панелей: Услуги (3 подколонки), Автоматизации (3), Отрасли (4), Продукты (3), Кейсы/Блог (прямые ссылки), Компания (4). Активные состояния подсвечиваются автоматически.

Изменение в одном файле — обновление на всех 87 страницах. Это не идеал (в идеале — include на сервере), но для статического HTML без шаблонизатора — работает.

AI-чат: 6 стадий диалога и human handoff

Одно из ключевых требований к сайту — квалификация лидов до того, как они попали к менеджеру. AI-чат на DeepSeek решает эту задачу.

Архитектура: chat_widget.js (545 строк) → chat_api.php (1 222 строки, 14 endpoints) → DeepSeek API. Между ними — kb_engine.php (385 строк, поиск по базе знаний с keyword matching и NLP).

Стейт-машина диалога из 6 стадий:

1. Discovery — понять, что нужно клиенту
2. Qualification — BANT-квалификация (Budget, Authority, Need, Timeline)
3. Solution Matching — подбор продукта под потребность
4. Objection Handling — работа с возражениями (триггер-ключевики + паттерны ответов)
5. Consultation Offer — предложение созвона/расчёта
6. Human Handoff — переключение на оператора

Каждая стадия — свой system prompt для DeepSeek. Human handoff защищён regex-проверкой на негацию: «не надо оператора» не переключит на человека. Неактивные сессии сбрасываются через 5 минут.

152-ФЗ: сначала сбор PII (имя, телефон/email) → отправка в Bitrix24, потом обезличенный AI-диалог. История: максимум 12 сообщений. Rate limit: 20 запросов/мин/IP.

Партнёрская программа: куки, рефералы и CRUD

Три уровня: Партнёр (5%) → Агент (10%) → Амбассадор (15%). Реферальный механизм:

• Короткая ссылка /go/{short}/ → кука partner_ref на 30 дней → редирект на /
• Все формы на сайте читают куку → лид уходит в CRM с source_id='PARTNER'
• Автосоздание директорий: /expert/{slug}/ (профиль) и /go/{short}/ (редирект)
• API: 10+ endpoints — partner_login, apply, track_visit, partner_stats, admin_partners (CRUD), admin_deals (CRUD)

Вся партнёрка — 5 PHP/HTML файлов, ~1 340 строк. Без базы данных: partners.json, deals.json, visits.json. Файловые блокировки через LOCK_EX.

Автономные AI-агенты: DevOps, Content, Board

Три PHP-скрипта, запускаемые по cron через cron-job.org. Точка входа — agents/scheduler.php.

Безопасность: CRON_SECRET (64 символа) в URL, файловые блокировки (предотвращение двойного запуска), константа AGENT_RUN (прямой доступ к PHP-файлам запрещён). Агенты изолированы в /agents/ — не трогают файлы сайта.

DevOps Agent — самый экономный: просто curl-запросы, без AI. Content Agent промптит DeepSeek на основе базы знаний и семантического ядра. Board Agent собирает все отчёты за вчера и выдаёт сводку: что главное, какой приоритет, на что обратить внимание.

SEO: 12 кластеров, 120 ключей, sitemap на 67 URL

Сайт — не визитка, а инструмент привлечения трафика. SEO-инфраструктура включает:

• semantic_core.json (699 строк) — 12 кластеров, 120+ ключей с интентом и частотностью Wordstat
• sitemap.xml (405 строк) — 67 URL с lastmod, changefreq и priority
• utm_resolver.js — динамическая подмена h1 и CTA под поисковый запрос
• ab_engine.js — сплитование трафика, подсчёт конверсий
• tracker.js — клиентский трекинг (sendBeacon → tracking.php)

Каждая статья в блоге (41 штука) — с JSON-LD BlogPosting, OG-тегами, каноникалом и перекрёстными ссылками. 5 продуктовых кейсов — с JSON-LD Article и BreadcrumbList.

Деплой: FTP, Python и Tailwind

Инструментарий деплоя минимален:

• deploy.py — полный деплой всех файлов
• deploy_update.py — точечный: только изменённые файлы (сейчас 180+ записей)
• Python ftplib с retry-логикой (3 попытки при таймауте)
• Автосоздание директорий на FTP (ftplib не умеет рекурсивно)

Tailwind CSS v4 собирается через npx tailwindcss -i css/input.css -o css/output.css --minify. V4 автоматически сканирует HTML и включает только используемые классы. Output.css — 101 KB.

Git: MinGit portable (2.50.1, вне PATH). Conventional commits на русском. Правило: коммитить до и после batch-операций (regex-замены на десятках файлов). Это спасло нас при катастрофе 28 мая, когда PowerShell-скрипт вырезал контент 13 страниц — откатили из git за секунду.

Итоги: что мы получили

Сайт, который работает как полноценная инфраструктура продаж:

• 87 страниц — от главной до отраслевых решений
• 41 статья в блоге — AI, маркетинг, продажи, отрасли
• 5 продуктовых кейсов — от AI-чата до промышленного парсинга
• AI-чат с квалификацией лидов — 6 стадий, human handoff, 152-ФЗ
• Партнёрская программа — 3 уровня, рефералы, автосоздание страниц
• 3 автономных AI-агента — мониторинг, контент, брифинг
• SEO-инфраструктура — семантическое ядро, UTM-резолвер, A/B-тесты

Стек: статический HTML + Tailwind CSS v4 + PHP 8.2 + JSON. Ни одного фреймворка, ни одного контейнера, ни одного платного сервиса кроме хостинга и DeepSeek API.

Статический HTML — не архаика. Это осознанный выбор, когда скорость разработки и простота деплоя важнее модного стека. Если вы делаете корпоративный сайт, а не веб-приложение — попробуйте без React. Возможно, вы удивитесь, насколько это быстро.