Розробка сайту на CMS Wagtail
Редактори не можуть додати кастомний блок на сторінку без розробника? Вивантаження контенту через REST API проблемне? Wagtail вирішує ці проблеми «з коробки». Ми розробляємо сайти на Wagtail — Django-based CMS, яка лежить в основі великих editorial-проєктів: NASA, Google, Mozilla. Ці гіганти обирають Wagtail завдяки StreamField, headless API та версійності контенту — гнучкість, недоступна в типових рішеннях. Wagtail дозволяє будувати масштабовані контент-платформи з продуктивністю, порівнянною з кастомними розробками.
Часто зустрічаємо проєкти, де контент-менеджери витрачають години на форматування статей в адмінці WordPress, а розробники — на підтримку кастомних типів записів. Wagtail виключає цю рутину: редактор одразу бачить прев'ю сторінки, а кодова база залишається чистою. Такий підхід економить бюджет і прискорює виведення продукту на ринок.
За роки роботи ми реалізували понад 15 проєктів на Wagtail: від сайтів-візиток до багатомовних порталів з персоналізацією. Наш досвід дозволяє скоротити час на розробку адмінки вдвічі порівняно з чистим Django.
Wagtail vs Django без CMS: ключові відмінності
Wagtail додає до Django:
- Admin UI з live preview, revision history, workflow approval;
- StreamField — блоковий редактор, як Matrix в Craft;
- Routable Pages — кастомні URL без окремих view;
- Images — вбудована обробка з focal point;
- Documents — управління файлами;
- Snippets — перевикористовувані об'єкти;
- Search — повнотекстовий пошук через Elasticsearch.
StreamField дозволяє створювати блоки з типізацією та валідацією — редактор збирає сторінку як із кубиків, не порушуючи верстку. Wagtail автоматично створює кропи, підтримує фокальні точки та галереї. Зображення оптимізуються під розмір контейнера, а редактору не потрібно думати про ресайз.
Які типові проблеми вирішує StreamField?
Складна контентна структура. Коли сторінка складається з різних блоків (текст, зображення, відео, акордеони), стандартний RichTextField незручний. StreamField забезпечує типізацію та валідацію кожного блока, що виключає помилки верстки. Наприклад, блок CTA містить обов'язкові поля: заголовок, текст, кнопка, URL — редактор не зможе зберегти сторінку, якщо не заповнить їх.
Управління медіафайлами. Wagtail автоматично створює кропи, підтримує фокальні точки та галереї. Зображення оптимізуються під розмір контейнера, а редактору не потрібно думати про ресайз.
Як налаштувати headless API за 2 дні?
Wagtail надає REST та GraphQL API з коробки. Ми налаштовуємо ендпоінти для кожного типу сторінки, додаємо фільтрацію та пагінацію. Приклад конфігурації:
# urls.py — headless API from wagtail.api.v2.views import PagesAPIViewSet api_router = WagtailAPIRouter('wagtailapi') api_router.register_endpoint('pages', PagesAPIViewSet) urlpatterns = [path('api/v2/', api_router.urls)] Після налаштування API фронтенд на React або Next.js отримує дані через fetch-запити. Згідно з Wikipedia, Wagtail підходить для проєктів з окремим фронтендом.
Як ми розробляємо Wagtail-сайти: кейс
Онлайн-видання з $1–1риками та 5 000 статей потребувало гнучке управління контентом і швидкий пошук. Ми спроєктували 5 Page-моделей (головна, рубрика, стаття, автор, лендінг), 12 StreamField-блоків (включаючи CTA, таблиці, слайдери) та інтегрували Elasticsearch.
Ключовий результат — редактори почали публікувати матеріали без допомоги розробників, а час завантаження сторінок знизився на 40% завдяки кешуванню та inlin'у критичних CSS. Проєкт зайняв 20 днів.
# core/blocks.py — приклад кастомного блока class CTABlock(blocks.StructBlock): heading = blocks.CharBlock() text = blocks.RichTextBlock(required=False) button_label = blocks.CharBlock() button_url = blocks.URLBlock() variant = blocks.ChoiceBlock(choices=[ ('primary', 'Primary'), ('secondary', 'Secondary'), ]) class Meta: template = 'blocks/cta.html' icon = 'pick' Процес роботи
- Аналітика — вивчаємо контент-стратегію, типи сторінок, користувацькі сценарії.
- Проєктування — створюємо Page-моделі, StreamField-блоки, схему API.
- Реалізація — кодимо моделі, шаблони, налаштовуємо адмінку та пошук.
- Тестування — перевіряємо на реальних даних, автоматизуємо регрес.
- Деплой — розгортаємо на продакшен, навчаємо редакторів.
Що входить в роботу
- Вихідний код з коментарями;
- Налаштування сервера (Docker, Nginx, PostgreSQL);
- Документація з розгортання та редагування;
- Доступи до хостингу та адмінки;
- Навчання редакторів (2 години онлайн);
- Гарантія 30 днів на приховані дефекти.
Скільки часу займає розробка?
| Етап | Час |
|---|---|
| Установка + налаштування + деплой | 1–2 дні |
| Page Models (5–7 типів) | 3–5 днів |
| StreamField блоки (8–12 блоків) | 2–4 дні |
| HTML-шаблони | 4–8 днів |
| Snippets та допоміжний контент | 1–2 дні |
| Пошук, теги, фільтрація | 1–2 дні |
| Корпоративний сайт | 15–25 днів |
Порівняння Wagtail з іншими CMS
| CMS | StreamField | Headless | Продуктивність | Гнучкість |
|---|---|---|---|---|
| Wagtail | ✅ | ✅ | Висока | Максимальна |
| WordPress | ❌ (через плагіни) | ✅ (через плагіни) | Середня | Середня |
| Django CMS | Частково | ❌ | Висока | Висока |
Wagtail у 2–3 рази прискорює розробку адмінки для контентних сайтів, що дає економію до 60% бюджету порівняно з чистим Django або налаштуванням WordPress.
Висновок
Wagtail — зріла платформа для editorial-проєктів. Якщо вам потрібна гнучка контент-стратегія, швидкий пошук і сучасний headless підхід — зв'яжіться з нами. Ми проведемо аудит, запропонуємо архітектуру та оцінимо проєкт за 1–2 дні. Замовте консультацію з архітектури Wagtail, щоб обговорити ваш проєкт.