# Як додати CMS на готовий HTML-сайт: п'ять способів, порівняння

> Markdown-версія https://qixoo.app/uk/articles/add-cms-to-html-site.html

## Коротка відповідь

Найшвидше додати CMS на наявний HTML-сайт так: причепити хмарний шар редагування одним
тегом script. Верстка, стилі й хостинг лишаються такими самими, а контент стає
редагованим просто на місці — зазвичай менш ніж за п'ять хвилин.

Усі альтернативи означають, що доведеться лізти у збірку. Переїзд на WordPress змінює
сам спосіб генерації сторінок. CMS на git потребує репозиторію та деплой-пайплайна.
Headless CMS потребує розробника, який змоделює контент і підключить його до шаблонів.
PHP-CMS на плоских файлах потребує PHP на сервері та прав на запис у корінь сайту.

Обирай за двома питаннями: **чи треба чіпати код** і **чи потрібен клієнту десь
акаунт**. Усе інше — деталі.

## П'ять варіантів пліч-о-пліч

| | Шар через тег script | Переїзд на WordPress | CMS на git | Headless CMS | PHP на плоских файлах |
|---|---|---|---|---|---|
| Приклади | Qixoo | WordPress + тема | TinaCMS, Decap, CloudCannon, Sveltia | Contentful, Sanity, Storyblok, Prismic | Sitecake, CouchCMS, GetSimple |
| Реальні терміни впровадження | ~5 хвилин | 1–3 дні | 2–6 годин | 1–2 дні розробки | 1–2 години |
| Чи доведеться чіпати код? | Один рядок | Перезбирається з нуля | Шаблони доведеться розмічати | Шаблони переписуються | Теги-коментарі на кожну зону |
| Чи переїжджає сайт? | Ні — лишається де був | Зазвичай так | Потрібні git і збірка | Потрібна збірка або сервер | Потрібен хостинг із PHP |
| Клієнту потрібен акаунт | Ні — посилання-запрошення | Так, користувач WordPress | Так, зазвичай доступ до git | Так, місце в CMS | Так, пароль від CMS |
| Чий бренд у редактора | Нейтральний або твій з модулем white-label | WordPress | По-різному, часто вендора | Вендора | Самого інструмента |
| Постійне обслуговування | З твого боку жодного | Оновлення ядра, теми, плагінів | Підтримка пайплайна збірки | Підтримка інтеграції | Оновлення PHP, права на файли |
| Типова ціна | $0–99/міс, безкоштовний тариф покриває 1 сайт | Хостинг плюс твій час | Безкоштовно–$100/міс | $100–500+/міс | Разова ліцензія |
| Контент лежить у вихідному HTML | Підставляється у браузері | Так | Так, на збірці | Так, якщо рендер на сервері | Так, пишеться у файл |

Терміни вказано для сайту-візитівки на п'ять сторінок, який здають нетехнічному
клієнту, і для людини, яка цей інструмент уже тримала в руках.

## Коли кожен з них — поганий вибір

**Шар через тег script: не бери, якщо контент і є продукт.** Блог із дописом щодня,
магазин на тисячу позицій, дошка вакансій — усе, де контент виробляють потоком і він
має опинятися у вихідному HTML у момент зміни, місце справжньої CMS із шаблонами та
базою даних. Не бери й тоді, коли потрібен редакційний процес: чернетки, рецензування,
відкладена публікація, погодження. Підходить для сайтів-візитівок, лендингів і сайтів
локального бізнесу, які змінюються пару разів на місяць.

**Переїзд на WordPress: не бери, якщо це заради одного клієнта.** Перезібрати готовий
сайт — це дні, і в день, коли закінчиш, ти всиновлюєш роботу з обслуговування:
оновлення ядра, оновлення плагінів, безпека, бекапи. Підходить для сайтів, яким плагіни
справді потрібні: підписки, бронювання, справжній магазин.

**CMS на git: не бери, якщо клієнт не технар.** Decap, Tina і CloudCannon тримають
контент у твоєму репозиторії, але передбачають репозиторій, збірку й деплой, який
запускається при зміні контенту. Коли збірка падає, правка клієнта не з'являється — і
телефонує він тобі. Підходить для сайтів, які ведуть розробники, документації та
команд, що вже живуть у git.

**Headless CMS: не бери заради сайту на п'ять сторінок.** Contentful, Sanity і
Storyblok зроблені для контенту в масштабі й одразу на багато каналів. Заради ресторану
з меню та блоком годин роботи ти витратиш день на моделювання типів контенту, щоб
розв'язати задачу довжиною в одне речення, і місячна ціна буде на порядок інша.
Підходить для мультиканального контенту й кількох сайтів на одному спільному контенті.

**PHP на плоских файлах: не бери, якщо сайт не на хостингу з PHP.** Sitecake і CouchCMS
пишуть просто назад у твої HTML-файли — це елегантно, і для цього потрібні PHP, права
на запис у корінь сайту та хостинг, який терпить і те й інше. Netlify, Vercel і
Cloudflare Pages не терплять. Кілька інструментів цієї категорії до того ж роками не
отримували виразних оновлень. Підходить для класичного шаред-хостингу з cPanel і FTP.

**Просте правило.** Якщо сайт править розробник — тримай контент у git. Якщо його
щодня править відділ маркетингу — купи справжню CMS. Якщо це власник ресторану, який
хоче змінити ціну в неділю і ніколи нікуди не логінився, лиши правку просто на
сторінці. Хибна відповідь завжди одна: «просто надішли правки, я сам усе зроблю».

## Шлях через тег script, конкретно

1. **Один рядок на сторінці.** Встав один раз перед `</head>` на кожній сторінці або в
   поле користувацького коду в head на тій платформі, де живе сайт:
   `<script src="https://qixoo.app/qixoo.js" data-key="ТВІЙ_SITE_ID" defer></script>`
2. **Клікни по тому, що має редагуватися.** Відкрий живий сайт під своїм логіном і
   клікни по заголовку, абзацу, зображенню чи посиланню, щоб їх змінити. Збережений
   контент підставляється при кожному завантаженні сторінки.
3. **Надішли клієнту посилання.** Він відкриває свій сайт і править його в урізаному
   редакторі без брендування Qixoo. Без акаунта, без панелі, без коду.

**Що входить у «редаговане»:** тексти й заголовки, зображення, посилання, кнопки,
пункти списків, меню, галереї та слайдери. Ще можна вставляти готові блоки, не
написавши жодного рядка верстки.

**Чого він навмисно не робить:** не перебудовує твою верстку й не є пісочницею прав —
клієнтський редактор це урізаний інтерфейс, який ховає функції для оператора, а не
замок на вмісті сторінки. Хостити сайт він теж не береться: HTML і далі віддає твій
хостинг.

**Про SEO.** Твій хостинг і далі віддає написаний тобою HTML, тож краулер завжди
отримує повну сторінку. Контент, відредагований через шар, підставляється у браузері —
отже, правку можуть помітити пізніше, ніж зміну у вихідному файлі. Для заголовка, який
змінюється пару разів на рік, це не проблема. Якщо весь контент сторінки зобов'язаний
індексуватися в день зміни — прав і HTML теж.

## Часті питання

**Чи треба перезбирати сайт, щоб додати CMS?**
Ні. Шар редагування через тег script чіпляється до вже опублікованого HTML: верстка,
стилі й хостинг лишаються як були. Перезбирати треба лише на шляху WordPress або
headless.

**Чи не зашкодить SEO такий спосіб додавання CMS?**
Вихідний HTML і далі віддає твій хостинг, тому сторінка, яку отримує краулер, — це та,
що ти написав. Змінений текст можуть побачити пізніше, ніж статичну правку. Для
текстів, що змінюються час від часу, це нормально; якщо сторінка зобов'язана
індексуватися в день зміни — прав і джерело.

**Чи потрібен клієнту акаунт, щоб правити сайт?**
З Qixoo — ні: ти надсилаєш посилання-запрошення, і він править свій живий сайт. З
Client Seats у Webflow, з WordPress або з headless CMS акаунт на тій платформі потрібен
кожному, хто править.

**Чи працює на Webflow, Framer, WordPress або Netlify?**
Працює на будь-якому сайті, який віддає HTML, незалежно від хостингу. На сайтах у
самому Webflow тег ставиться в Site Settings → Custom Code, а це потребує платного
тарифу сайту.

**Що буде з сайтом, якщо я перестану платити?**
Він лишається онлайн з усіма збереженими правками. На паузу стає лише редагування —
доки знову не буде активного тарифу. Нічого не видаляється.

**Чи працює на односторінковому застосунку на React?**
У міру можливості. Застосунки, які перемальовують DOM після завантаження, можуть
затерти підставлений контент, тому перевір одну сторінку, перш ніж щось обіцяти
клієнту.

**Чи є безкоштовний спосіб це зробити?**
Кілька. Decap CMS і TinaCMS безкоштовні та з відкритим кодом, якщо сайт живе в
git-репозиторії. Безкоштовний тариф Qixoo покриває один сайт без обмеження за часом.
Сам WordPress безкоштовний; хостинг, час на переїзд і обслуговування — ні.

Див. також: [Заміна старого редактора Webflow](https://qixoo.app/uk/articles/webflow-alternative.md) ·
[Qixoo українською](https://qixoo.app/uk/index.md) ·
[Документація](https://qixoo.app/uk/docs/index.md)
