Як зробити просту адмінку для HTML сайту

Класичний лендінг — це статичний сайт на HTML/JS/CSS. Після запуску замовнику потрібно легко міняти тексти, телефони, ціни або зображення. Пересаджувати лендінг на повноцінну CMS (WordPress/MODX) часто зайве: це ускладнює підтримку, додає навантаження й зайві ризики безпеки. Нижче — практичні способи додати «легку адмінку» до статичного сайту, без російських сервісів: тільки ті, що доступні та зручні в Україні.

Що саме ми хочемо від «легкої адмінки»

• Простий вхід і зрозумілий інтерфейс для контент-менеджера.
• Без бази даних (flat-file або правка існуючих файлів).
• Швидке розгортання на звичайному хостингу.
• Безпека: окрема авторизація, SSL, рольовий доступ, логи.

Варіант A: PHP файлові менеджери (TinyFileManager / FileGator)

Це найпростіший шлях: ви ставите невеликий PHP‑скрипт, який дозволяє редагувати файли й завантажувати зображення прямо в браузері. Підходить, якщо правки рідкі, а контент зберігається у HTML.

TinyFileManager (1 файл PHP)

Плюси: один файл, працює майже на будь-якому хостингу; мінуси: мінімальна рольова модель, краще ховати за Basic Auth/IP.

1. Завантажте останній tinyfilemanager.php з GitHub і покладіть у папку /admin вашого сайту.
2. Відкрийте файл у редакторі та замініть дефолтні логін/пароль у масиві користувачів.
   

   
   // уривок конфігурації (псевдоприклад)
   $auth_users = array(
   ‘editor’ => ‘надiйний_пароль’
   );
   

3. Перейдіть за адресою site.com/admin/tinyfilemanager.php, увійдіть і редагуйте HTML/JS/CSS файли.

FileGator

Плюси: чистий інтерфейс, кілька користувачів, логи; мінуси: трохи складніша установка, ніж 1‑файлове рішення.

1. Завантажте реліз FileGator з GitHub і розпакуйте до /admin.
2. Відкрийте config.php та створіть користувачів:
   

   
   // приклад користувача (псевдосинтаксис)
   ‘users’ => [
   [‘username’ => ‘editor’, ‘password’ => ‘hash_пароля’, ‘role’ => ‘reader’],
   [‘username’ => ‘admin’, ‘password’ => ‘hash_пароля’, ‘role’ => ‘admin’]
   ]
   

3. Зайдіть на site.com/admin і працюйте з файлами (редагування, завантаження зображень, заміна PDF тощо).

Безпека для обох: увімкніть HTTPS, додайте Basic Auth на директорію /admin, обмежте доступ по IP (якщо можливо), робіть бекапи.

Варіант B: Flat‑file CMS з адмінкою — Grav CMS

Grav — сучасна flat‑file CMS: контент — це Markdown‑файли в папках, а адмінка (плагін Admin) дає зручне WYSIWYG‑редагування. Підходить, якщо лендінг росте у міні‑сайт з 5–20 сторінками.

Установка Grav + Admin

1. Скачайте Grav + Admin пакет із сайту Grav.
2. Залийте архів на хостинг і розпакуйте у корінь сайту (або підкаталог).
3. Відкрийте /admin, створіть акаунт адміністратора.
4. Сторінки лежать у /user/pages: кожна — папка з default.md і медіа.

Плюси: легкість, швидкість, бек-апи через Git/FTP, десятки тем. Мінуси: потрібно звикнути до структури контенту у файлах.

Варіант C: Git‑CMS для статичних сайтів — Decap CMS (ex Netlify CMS)

Decap CMS — безкоштовна адмінка для статичних сайтів (JAMstack). Працює через Git‑репозиторій (GitHub/GitLab/Bitbucket): редактор у браузері, контент зберігається у Markdown/YAML/JSON.

Швидкий старт (уже маєте Git‑репозиторій сайту)

1. Додайте у проект папку /admin із двома файлами:
   • admin/index.html — лоадер адмінки.
   • admin/config.yml — конфіг колекцій контенту.
2. Приклад мінімального config.yml:
   

   
   backend:
   name: github
   repo: ваш-акаунт/ваш-репозиторiй
   media_folder: “assets/uploads”
   public_folder: “/assets/uploads”
   collections:
   – name: “pages”
   label: “Сторінки”
   folder: “content/pages”
   create: true
   slug: “{{slug}}”
   fields:
   – { label: “Заголовок”, name: “title”, widget: “string” }
   – { label: “Тіло”, name: “body”, widget: “markdown” }
   

3. Налаштуйте OAuth (Git‑провайдер або Netlify Identity) — і можна логінитись у /admin та редагувати сторінки у браузері.

Плюси: історія змін у Git, прев’ю, робота з командою. Мінуси: потрібні Git і базові DevOps‑звички.

Варіант D: SaaS‑адмінки для статичних сайтів — Surreal CMS / CloudCannon

Хмарні сервіси дозволяють редагувати статичні сайти «як у Word»: підключення через FTP або Git. Інтерфейс дружній для клієнта, є ролі, затвердження, історія змін.

Як це працює

1. Реєструєтесь у сервісі (Surreal CMS або CloudCannon).
2. Підключаєте сайт через FTP або GitHub/GitLab.
3. Відмічаєте редаговані блоки на сторінках (атрибути/селектори) — клієнт бачить WYSIWYG.

Плюси: мінімум техніки, редактор «з коробки». Мінуси: щомісячна оплата, необхідність довірити доступ сервісу.

Що обрати? (швидка шпаргалка)

Безпека та організація доступів

• HTTPS обов’язково: увімкніть SSL на домені.
• Basic Auth на папку /admin (окрім логіну самої адмінки) — подвійний захист.
  

  
  # .htaccess (уривок для Basic Auth)
  AuthType Basic
  AuthName “Restricted Area”
  AuthUserFile /шлях/до/.htpasswd
  Require valid-user
  

• Резервні копії: перед змінами знімайте бекап (FTP/Zip або git tag).
• Логи: FileGator/Grav ведуть журнали дій — зберігайте їх 30–90 днів.
• Ролі: клієнту — «editor», техпідтримці — «admin».

Практика редактора контенту (для клієнта)

1. Увійти в адмінку (надішлемо окремо URL/логін/пароль).
2. Відкрити сторінку/файл, змінити текст або зображення.
3. Зберегти зміни, оновити сторінку сайту (F5) і перевірити.
4. За потреби — повернутись до попередньої версії (Grav/Decap).

Висновок

Для простих лендінгів найшвидше встановити TinyFileManager або FileGator. Якщо сторінок більше і потрібна звична адмінка — оберіть Grav. Для командної роботи та історії правок — Decap CMS. А якщо клієнту потрібен максимально простий «Word‑подібний» редактор без серверних турбот — підійде Surreal CMS чи CloudCannon.

Привіт! Я — Ашифін Федір, full-stack розробник та автор власних тем і плагінів.
Створюю сайти без використання конструкторів — лише чистий і валідний код. Це забезпечує високу швидкість завантаження та відмінні показники в Google PageSpeed, а отже — вартість кліка в рекламі зменшується в 2–3 рази.
Потрібен сайт з нуля, оптимізація існуючого проекту або доопрацювання функціоналу?
📩 Напишіть у будь-який месенджер — обговоримо ваш проект!

FAQ — Часті питання