Новий сайт факультету створено на 100% без ручних правок коду

Факультет комп’ютерних наук та технологій представляє оновлений сайт. Його головна особливість — спосіб розробки: увесь код, від структури сторінок до дизайну й автоматизації, написав ШІ-агент Claude Code за прямими вказівками людини — без жодного рядка, набраного вручну. Розповідаємо, як це влаштовано технічно: воркфлоу розробки й делівері, новий підхід до публікації новин і чим усе це відрізняється від попередньої платформи.

Технологічний стек

• Astro — фреймворк для статичних сайтів. За замовчуванням віддає чистий HTML/CSS без жодного байта клієнтського JavaScript, а динаміку додає лише там, де вона справді потрібна:
  • Content Collections із валідацією структури через Zod
  • вбудований Markdown-конвеєр із підсвіткою коду (Shiki) — саме він рендерить цей текст
  • маршрутизація «файл = сторінка», без окремого роутера
• TypeScript — і в компонентах сайту, і в бекенді мікроадмінки.
• Cloudflare Pages — хостинг статики на CDN + Cloudflare Pages Functions для єдиної динамічної частини сайту, адмінки новин.
• GitHub — єдине джерело правди для контенту й коду: кожна новина, кожна правка сторінки — це коміт.

Як влаштована розробка

Робота над сайтом — це не «людина пише код», а діалог, зафіксований у регламенті репозиторію (AGENTS.md):

1. Постановка задачі. Власник сайту описує потрібне звичайною мовою — навіть з телефону.

2. Розробка. Агент читає регламент і наявний код, пише Astro-компоненти й сторінки, дотримуючись дизайн-токенів бренду (tokens.css) і схеми даних.

3. Перевірка контракту. npm run build одночасно білдить усі сторінки і звіряє кожну новину проти схеми:

   const news = defineCollection({
     type: "content",
     schema: z.object({
       title: z.string(),
       date: z.date(),
       category: z.enum(["Новини", "Досягнення", "Події", "Вступ", "Наука"]),
       summary: z.string().max(240),
       draft: z.boolean().default(false),
     }),
   });

   Новина без дати чи з категорією поза списком просто не збереться — білд впаде ще до деплою.

4. Рев’ю. Зміни йдуть через Pull Request: людина дивиться diff і вирішує, чи зливати.

5. Делівері. Після merge у main Cloudflare Pages сам забирає код і викладає сайт.

Два свідомі винятки з цього процесу — конвеєр Google Docs і мікроадмінка новин (нижче): обидва комітять напряму в main, але від імені автентифікованої людини, а не агента.

Делівері без окремого сервера

Крок	Що відбувається
git push	Зміни потрапляють у гілку main на GitHub
Cloudflare Pages	Автоматично тригерить білд (npm run build)
Astro	Генерує статичний .html для кожної сторінки й новини
CDN	Нова версія одразу доступна на edge-мережі Cloudflare

Повний білд сайту (кілька десятків сторінок і всі новини) займає ~3 секунди. Для кожного пул-реквесту Cloudflare додатково піднімає прев’ю-деплой на окремій URL — рецензент бачить зміни живими ще до злиття.

---

Новий підхід до публікації новин

Раніше єдиним каналом була ручна правка .md-файлу в Git. Тепер їх два, і жоден не вимагає від автора знати Git:

• Google Docs → сайт. Автор кладе документ у спеціальну теку на Диску — погодинний Apps Script сам розпізнає шапку (Заголовок:, Дата:, Категорія:…) і комітить новину в main.
• Мікроадмінка (/admin/). Власна легка адмін-панель на Cloudflare Pages Functions: форма «Нова новина» / «Редагувати» / «Видалити», обкладинка — просто перетягнути файл. За лаштунками Function комітить .md і картинку напряму в GitHub через Contents API — без бази даних, без окремого бекенду.

Доступ до /admin/ — не «весь домен @kai.edu.ua», а явний список конкретних редакторів, перевірений одразу на двох рівнях: політикою Cloudflare Access (Google SSO) і повторно — у коді самої Function.

Порівняння зі старою платформою

Стара версія сайту — типовий WordPress: PHP, база даних, теми й десятки плагінів. Нова — статичний сайт без сервера, що виконує код на кожен запит.

Критерій	Було (WordPress)	Стало (Astro + Cloudflare)
Розробка / експертиза	Потрібен PHP-девелопер, що орієнтується в темах і плагінах	Стандартні веб-компоненти + агент-асистент; схема даних не дає опублікувати «криву» новину
Деплоймент	Сервер із PHP+MySQL, ручні оновлення й бекапи	git push → автобілд → CDN; атомарні деплої з історією й відкатом
Безпека	SQL-ін’єкції, вразливі плагіни, брутфорс /wp-admin — постійний attack surface	Публічні сторінки не виконують код на бекенді — цілий клас вразливостей просто не застосовний
Вага бандла	jQuery + CSS/JS десятків плагінів, часто кілька МБ на сторінку	0 KB клієнтського JS для відвідувача за замовчуванням — лише HTML і CSS
Доречність інструментів	Універсальна CMS під будь-який сценарій, важча за потреби для переважно статичного контенту	Astro обрано саме тому, що 90%+ сайту — рідкісні зміни; для єдиної динамічної частини (адмінка) — Functions, без окремого сервера

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

Дорожня карта

• Перенесення сторінок і архіву новин зі старого сайту
• Конвеєр Google Docs → сайт для новин
• Мікроадмінка новин (Cloudflare Pages Functions + GitHub API)
• Пагінація стрічки новин
• Фінальне налаштування Cloudflare Access для мікроадмінки (зараз у тестовому режимі)
• RSS-стрічка та sitemap.xml
• Редиректи зі старих кириличних посилань
• Наповнення розділів «Наука», «Викладачу», «Ради факультету» контентом від факультету

Це приклад того, як сучасні інструменти розробки на основі штучного інтелекту дозволяють оновлювати цифрову присутність факультету швидко й без залучення окремої команди розробників — не втрачаючи ні контролю над контентом, ні безпеки.