Як запустити сайт із ШІ: домен, GitHub, аналітика та Google

Що це за кейс і що буде на виході

«Вайб-Кодинг» починався не як великий медіапроєкт, а як сайт української Telegram-спільноти. Його головне завдання просте: відповідати на практичні запити про AI-розробку, давати перевірені матеріали українською та допомагати зацікавленій людині перейти в чат.

Для запуску не була потрібна традиційна команда з дизайнера, верстальника, SEO-фахівця й адміністратора сервера. AI допоміг підготувати структуру, тексти, HTML і CSS, але рішення про призначення сторінок, перевірку фактів, домен, безпеку та публікацію залишилися за людиною.

Крок 1. Спочатку структура, потім дизайн

Одна довга головна сторінка може презентувати проєкт, але погано відповідає на різні наміри користувачів. Людина, яка шукає визначення вайб-кодингу, потребує іншої відповіді, ніж та, що намагається захистити API-ключ або створити сайт із Lovable.

Тому контент було розділено на окремі повноцінні матеріали: пояснення терміна, огляд AI-інструментів, створення сайту з ШІ, безпека ключів, перевірка AI-коду та сторінка української Telegram-спільноти. Кожна сторінка отримала власні title, description, H1, canonical і зрозумілу URL-адресу.

Перед генерацією сторінки корисно дати AI такий запит:

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

Крок 2. Зберігайте сайт у GitHub

AI може швидко змінити багато файлів. Якщо результат став гіршим, без історії версій важко зрозуміти, що саме зламалося. GitHub вирішує цю проблему: кожна завершена зміна зберігається окремим комітом, а різницю між версіями можна переглянути до публікації.

1. Створіть репозиторій. Для відкритого навчального сайту він може бути публічним. Для комерційного проєкту або коду з конфігурацією обирайте приватний.
2. Збережіть першу робочу версію. Це ваша точка повернення до того, як AI почне наступну серію правок.
3. Робіть один логічний коміт на задачу. Наприклад: «додати мобільне меню» або «підключити аналітику», а не «оновлення сайту».
4. Переглядайте diff. Переконайтеся, що агент не видалив метатеги, аналітику, перевірку Search Console або важливий текст.
5. Не зберігайте секрети. API-ключі, паролі й токени не повинні потрапляти в репозиторій навіть на кілька хвилин.

Відкритий репозиторій «Вайб-Кодингу» також пов’язує бренд сайту з реальним GitHub-профілем і може містити корисні шаблони. Але репозиторій не варто створювати лише заради посилання: він має давати людині файли, приклади або зрозумілу історію змін.

Крок 3. Власний домен, DNS і HTTPS

Безкоштовна адреса платформи підходить для тесту. Для довготривалого проєкту власний домен простіше запам’ятати, поширювати й переносити між платформами. У цьому кейсі використовується vibe-coding.com.ua.

Платформа публікації показує, які DNS-записи потрібно додати у реєстратора домену. Для кореневого домену це часто A-записи, для піддомену www — CNAME. Значення не можна копіювати з чужого гайда: вони залежать від конкретної платформи й можуть змінитися.

• Основна адреса відкривається через https:// без попередження браузера.
• http:// перенаправляє на HTTPS.
• Варіант із www не показує інший або застарілий сайт.
• На всіх сторінках canonical указує на вибрану основну версію домену.
• Сертифікат охоплює потрібні варіанти адреси.

DNS оновлюється не миттєво. Під час нашого підключення різні варіанти адреси певний час показували суперечливі результати, тому перевіряли не лише головну, а й HTTP, HTTPS та www. Це важливо і для людей, і для Google: пошуковик не повинен бачити кілька різних версій одного сайту.

Крок 4. Допоможіть Google знайти сторінки

Публікація сайту ще не означає миттєву появу в пошуку. Спочатку Google має знайти URL, відкрити її, обробити вміст і вирішити, чи додавати сторінку до індексу.

1. Створіть robots.txt. Він не повинен випадково забороняти потрібні сторінки. У ньому можна вказати адресу sitemap.
2. Створіть sitemap.xml. Додайте повні canonical-адреси лише тих сторінок, які мають потрапити в пошук.
3. Підтвердьте домен у Search Console. Для доменного ресурсу Google зазвичай просить TXT-запис у DNS.
4. Подайте sitemap. Звіт покаже, коли файл прочитано, скільки сторінок знайдено та чи є помилки.
5. Перевірте важливі URL. Інструмент перевірки URL показує доступність, останнє сканування й вибрану Google canonical-адресу.

У нашому кейсі після налаштування головна сторінка почала з’являтися за цільовим українським запитом. Водночас Search Console ще обробляє частину свіжих даних. Це нормальний етап: не потрібно щодня переписувати заголовок або повторно створювати ту саму сторінку.

Крок 5. Вимірюйте корисну дію, а не лише перегляди

Для «Вайб-Кодингу» перегляд статті — не кінцева мета. Важливо зрозуміти, чи людина після читання переходить у Telegram. Тому GA4 підключено на всіх сторінках, а натискання посилання на чат надсилає окрему подію telegram_click.

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

Для зовнішніх публікацій додавайте UTM-параметри до посилання на сайт. Тоді можна відрізнити перехід із конкретного допису від звичайного прямого відвідування. А для Telegram варто використовувати окремі запрошувальні посилання за джерелами, якщо потрібно рахувати вже не кліки, а фактичні вступи.

Що в цьому процесі найчастіше ламається

• Усе розміщено на одній сторінці. Читачеві важко знайти точну відповідь, а Google — визначити тему кожного блоку.
• AI отримує надто загальний промпт. Результат виглядає ефектно, але не має конкретної аудиторії, перевірок і наступної дії.
• Немає Git-історії. Після невдалої правки доводиться відновлювати сайт вручну.
• Домен налаштований частково. Основна адреса працює, а www або HTTP веде на помилку чи стару сторінку.
• Sitemap містить неправильні адреси. Відносні URL, дублікати або неосновні версії домену створюють плутанину.
• Аналітика рахує лише перегляди. Власник не знає, які сторінки приводять заявки, покупки або переходи в спільноту.
• Публікуються десятки слабких AI-текстів. Це не створює довіру й не замінює власний досвід, перевірені приклади та зрозуміле авторство.

Що можна зробити безкоштовно, а за що доведеться платити

GitHub, Google Search Console та базове використання GA4 доступні без оплати. Простий сайт також можна створити й опублікувати на безкоштовному плані AI-конструктора або хостингу, якщо його обмежень достатньо.

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

Фінальний чекліст запуску

• Кожна сторінка вирішує окрему задачу користувача.
• Сайт нормально читається на телефоні й не має горизонтального прокручування.
• Код збережено в GitHub, а важливі зміни мають зрозумілі коміти.
• У репозиторії немає API-ключів, паролів і приватних даних.
• Основний домен, HTTPS, HTTP і www працюють узгоджено.
• На сторінках є унікальні title, description, H1 і canonical.
• robots.txt доступний і посилається на актуальний sitemap.
• Search Console підтверджена, а sitemap прийнято без помилок.
• Аналітика фіксує не лише перегляди, а й головну корисну дію.
• Кнопка або форма перевірена як звичайним користувачем, а не лише власником.

Поширені запитання

Чи можна запустити такий сайт безкоштовно?

Так, якщо достатньо безкоштовних лімітів конструктора й хостингу. GitHub, Search Console та базова GA4 не потребують оплати. Головна передбачувана витрата — власний домен.

Чи гарантує sitemap появу в Google?

Ні. Він допомагає знайти правильні URL, але не змушує Google індексувати або високо ранжувати сторінку.

Навіщо GitHub, якщо сайт уже відкривається?

Щоб мати історію, порівнювати AI-правки й швидко повернутися до робочої версії. Це особливо важливо, коли агент змінює кілька сторінок одночасно.