Як я створив цей блог за один вечір із Claude Code

До 3 жовтня цей сайт складався з двох HTML-сторінок — англійської та української. Кожна зміна означала, що треба редагувати обидва файли й карту сайту. Того вечора я взявся за блог. Трохи по другій ночі сайт уже працював на Astro, мав 12 матеріалів англійською (11 із них — також українською) і збірку, яка не публікує зламаних сторінок.

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

Той вечір, година за годиною

Час український. Джерела: журнал чату, історія комітів і журнал розгортань Cloudflare.

Час	Що сталося
3 жовтня, 21:42	Ідея в одному повідомленні: переглянути мої проєкти й чати та знайти, з чого цей сайт може вирости в блог, кейси й нові сторінки.
21:47	Стартують шість агентів-дослідників. П’ять читають мої проєкти й чати з Claude Code. Один вивчає ринок і те, що шукають люди.
22:19	План і прототип із чотирма пілотними матеріалами збережено. За планом перехід на новий рушій, пілотні матеріали й аналітика мали зайняти приблизно один робочий день.
23:26	Сайт переходить на Astro й отримує блог англійською та українською: 73 файли, 9 801 новий рядок.
23:34	Виправлення після вичитки. Новий сайт запрацював.
4 жовтня, 00:13	Графіки й Tag Manager.
01:25	Структуровані дані, llms.txt, заголовки безпеки, IndexNow, суворіші перевірки.
02:01	Ще сім матеріалів. Загалом — 12.

Замість робочого дня пішов вечір: новий сайт запрацював через 75 хвилин після плану, а Tag Manager — ще приблизно через 40 хвилин. 9 801 рядок — це менше, ніж здається. Половина з них — службовий файл, у який менеджер пакетів npm сам записує версії бібліотек.

З чого складався 9 801 новий рядок переходу на Astro

З 9 801 нового рядка: 5 012 — файл версій, який npm пише сам, 2 408 — код сайту і скрипти, 1 116 — п’ять матеріалів англійською й українською, 1 265 — нотатки досліджень, чернетки дизайну та інші файли.

• Файл версій, який пише npm 5 01251%
• Код сайту і скрипти 2 40825%
• П’ять матеріалів англійською й українською 1 11611%
• Нотатки досліджень, чернетки дизайну, інші файли 1 26513%

Дві речі були готові ще до того вечора. Вигляд, шрифти, світла й темна теми — із серпня, коли я переробив головну сторінку, і під час переходу їх зберегли. А ще агентам було що читати: три місяці моїх проєктів і чатів.

Чому Astro на Cloudflare

Під час збірки сайту Astro перетворює файли Markdown на звичайні HTML-сторінки. Cloudflare віддає ці файли, а на сервері нічого не запускається. Щойно зміни потрапляють у головну гілку на GitHub, Cloudflare збирає сайт і викладає його. На моєму ноутбуці збірка приблизно 30 сторінок триває три секунди.

Кожен матеріал — це один файл Markdown, а його папка визначає мову й розділ. Файл у en/blog/ стає сторінкою в /blog/, а файл із такою самою назвою в uk/blog/ — її парою в /uk/blog/. Із цих файлів збираються карта сайту, RSS-стрічка для кожної мови, мовні посилання й картинка для поширення кожного матеріалу. Нічого не доводиться правити вручну двічі.

Чому це важливо для SEO:

• Кожен бот отримує повну сторінку. Текст лежить прямо в HTML, тому пошукові роботи й ШІ-помічники читають те саме, що й людина, без запуску JavaScript.
• Одна адреса для кожної сторінки. Тестові адреси Cloudflare для сайту вимкнено, тож копії на іншому домені немає. Кожна URL-адреса закінчується скісною рискою, і канонічний тег записує адресу так само.
• Чесні дати. Дата останньої зміни в карті сайту береться з матеріалу, а не з часу збірки.

Дві мови без плагіна

Англійська версія розміщена в корені, українська — у /uk/ за тим самим шляхом. Два файли з однаковою назвою — це один матеріал двома мовами. У блоці head кожної сторінки вказано обидві версії, а для всіх інших мов типовою зазначено англійську. Карта сайту й структуровані дані пов’язують ті самі пари. Матеріал, який є лише однією мовою, не має мовних посилань узагалі — це краще, ніж посилання на сторінку, якої не існує.

Збірка перевіряє, що кожне мовне посилання веде на наявну сторінку і що та посилається назад. У документації Google пояснено чому: «Якщо дві сторінки не посилаються одна на одну, теги буде проігноровано».

Я пишу англійською. Скрипт перекладає кожен матеріал українською за допомогою моделі, яку я вибрав у сліпому тесті: три моделі, десять абзаців, троє суддів. Як пройшов цей тест і чому менша перевірка могла б обрати не ту модель. Скрипт залишає Markdown і код як є, а посилання спрямовує на українські сторінки. Він записує числа по-українськи й дотримується словникових правил, які дав тест. Потім українську версію вичитують.

Ще дві перевірки стежать, щоб кожна версія залишалася своєю мовою. Збірка завершується помилкою, якщо на англійській сторінці є кирилиця, крім перемикача мов і слів, позначених як українські. Так само вона зупиняється, якщо в українському матеріалі кирилиця становить менш як 60% літер — це ознака, що частина тексту залишилася англійською. Така сторінка має не ту мову, яку вказано в її hreflang, і майже дублює англійську версію.

Збірка, яка не пропускає помилок: SEO-перевірки

Після кожної збірки скрипт читає кожну готову сторінку. Будь-яка проблема зупиняє збірку. Тоді Cloudflare нічого не розгортає, а на сайті залишається остання справна версія.

Що перевіряє збірка	Яку помилку вона знаходить
Заголовок довший за 66 символів	Google може обрізати його у видачі.
Опис довший за 162 символи	Сніпет може обірватися посеред речення.
H1 немає або їх більше одного	Якщо H1 немає, шаблон утратив заголовок. Якщо їх два, тема стає менш чіткою. Google також може взяти із заголовка назву, яку показує у видачі.
Графа структурованих даних немає чи їх кілька, або автор статті — не та особа (Person), що вказана для сайту	Два блоки можуть назвати двох різних авторів. Один граф пов’язує кожен матеріал з однією людиною на всьому сайті.
Канонічна адреса не збігається з власною адресою сторінки	Сторінка повідомляє Google, що вона — копія іншої сторінки.
Немає зображення для поширення	Посилання, яким поділилися в чаті чи в LinkedIn, показується без картинки.
Мовної пари немає або вона не посилається назад	Google ігнорує мовні посилання.
Зламані внутрішні посилання та якорі	Глухі кути для читачів і пошукових роботів.
Кирилиця на англійській сторінці або менш як 60% кирилиці в українському матеріалі	Мова сторінки не відповідає її адресі.
Забуті позначки чернетки	Незавершений текст потрапляє на сайт та індексується.
Сторінка з noindex у карті сайту	Суперечливі сигнали: карта сайту просить Google проіндексувати сторінку, яка сама просить її не індексувати.
У llms.txt бракує англійської сторінки	ШІ-помічники отримують застарілу карту сайту.
Немає англійської або української RSS-стрічки	Читачі стрічок не бачать нових матеріалів.
Цитати з анонсу в Telegram немає в тексті сторінки слово в слово	Анонс цитує фразу, якої в матеріалі немає.
Два речення анонсу кажуть одне й те саме	У каналі й LinkedIn та сама думка звучить двічі.

Кожна сторінка також повинна мати мову, заголовок і опис. Одна перевірка — особиста: місцем перебування сайт називає лише Україну, і збірка зупиняється, якщо на якійсь сторінці згадано моє місто.

Я навмисно зламав копію збірки: додав задовгий заголовок і залишив у тексті позначку чернетки. Збірка зупинилася:

✗ Site check failed — 2 problem(s):
  - /blog/five-times-the-text/index.html: title is 71 characters (max 66): I made the text five times longer and my rankings fell in Google search
  - /blog/five-times-the-text/index.html: draft marker left on the page

Більшість цих помилок на сторінці не видно. Мовне посилання в нікуди або канонічна адреса, що веде на іншу сторінку, у браузері мають нормальний вигляд. Таке помічають через кілька тижнів, у Search Console. А тут така помилка зупиняє розгортання.

У перевірки є межа: вона читає файли до публікації. Те, що Cloudflare насправді віддає, зокрема HTTP-заголовки й переспрямування, існує лише на живому сайті. Перевірка живого сайту після кожного розгортання — наступна в моєму списку.

Графіки без JavaScript

Кожен графік на цьому сайті малює збірка — як HTML і CSS. Лінійний графік додає для самої лінії невеликий вбудований SVG. Жодної бібліотеки графіків і жодного скрипту.

На місці графіка в матеріалі стоїть один рядок, і збірка замінює його графіком мовою сторінки. Числа зберігаються в одному файлі даних, кожен графік — разом зі своїм джерелом. Українською той самий графік пише не 12,322, а 12 322.

• Текст залишається текстом. Назви, підписи й числа — це звичайний текст, який можуть читати пошукові системи та ШІ-помічники. Кожен графік також має короткий опис для програм зчитування з екрана.
• Темна тема й телефони — без проблем. Кольори беруться з теми сайту, тому графік перемикається разом зі сторінкою. Підписи не є частиною картинки, тож не зменшуються разом із нею.
• Нічого зайвого не завантажується. Перед появою графіка не виконується жоден скрипт.

Поки що вистачає п’яти типів: горизонтальні смуги, вертикальні стовпчики, складені смуги, лінії та «гантелі», які показують «до» і «після» в одному рядку. Станом на 4 жовтня на сайті було 25 графіків.

Аналітика через API

Окрім того, що дав доступ сервісному акаунту, я нічого не клацав в інтерфейсах Google Analytics і Tag Manager. Ресурс GA4, контейнер Tag Manager і тег Google у ньому створив скрипт через API Google. Спершу він робить пробний прогін, а ідентифікатор вимірювання бере з відповіді API — вручну його ніхто не вводить. Того самого вечора карту сайту надіслали в Search Console теж через API.

Потім — перевірка, яка справді важить: опублікована сторінка надсилає запит про перегляд. Налаштування, дозволи й помилки, з якими я зіткнувся, описано в плейбуці для Search Console і GA4.

Що далі

Сторінка «Нотатки» показує фільтри за темою та форматом лише тоді, коли матеріалів щонайменше вісім. Якщо їх менше, більшість комбінацій дає порожній результат. 4 жовтня матеріалів стало більше восьми, тож фільтри вже ввімкнено.

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

За перші два тижні, з 3 по 17 жовтня, Search Console показала 141 показ сторінок сайту в пошуку Google і 6 кліків. Покази вже мають 11 матеріалів.