Щоб викласти сайт в інтернет безкоштовно, дизайнеру достатньо двох речей: репозиторію на GitHub і проєкту в Cloudflare Pages, підключеного до цього репозиторію. Після цього кожен push у головну гілку сам публікує сайт, а кожна інша гілка отримує власну preview-адресу. Git-частину робить Claude Code за запитом звичайною мовою, а на вас лишаються кілька кліків у кабінеті Cloudflare і рішення, що саме публікувати.
Нижче - весь шлях від папки з файлами до живого сайту на своєму домені, ліміти безкоштовного плану станом на жовтень 2026, порівняння з Vercel, Netlify і GitHub Pages, і помилки, на яких дизайнери спотикаються найчастіше. Приклад - сайт uxhero.design, на якому ви це читаєте: він живе в Cloudflare і оновлюється сам після кожного push у GitHub.
Що таке Cloudflare Pages одним реченням?
Cloudflare Pages - це хостинг статичних сайтів від Cloudflare, який бере файли з вашого GitHub-репозиторію і роздає їх через мережу серверів по всьому світу, з HTTPS і без налаштування сервера.
Чотири слова, які знадобляться далі:
- Репозиторій - папка проєкту з історією всіх змін, яка живе на GitHub.
- Push - відправка ваших змін з комп'ютера в GitHub.
- Деплой - публікація конкретної версії сайту на хостингу.
- Preview-URL - тимчасова адреса, де видно версію сайту з окремої гілки, поки вона не потрапила на продакшн.
Скільки коштує Cloudflare Pages і які ліміти безкоштовного плану?
Для статичного сайту - нуль. Ліміти Free-плану станом на жовтень 2026:
| Параметр | Free-план |
|---|---|
| Збірки (деплої з Git) | 500 на місяць, 1 одночасно, таймаут 20 хвилин |
| Трафік і запити до статики | без обмежень |
| Файлів на сайт | до 20 000, один файл до 25 МБ |
| Власні домени | 100 на проєкт |
| Проєкти | до 100 на акаунт |
| Preview-деплої | без обмежень |
500 збірок - це приблизно 16 деплоїв на день. Для портфоліо чи сайту студії з головою. Обмеження з'являються тільки для серверної логіки (Pages Functions), але звичайному сайту дизайнера вона не потрібна.
Cloudflare Pages, Vercel, Netlify чи GitHub Pages: що обрати дизайнеру?
| Cloudflare Pages | Vercel Hobby | Netlify Free | GitHub Pages | |
|---|---|---|---|---|
| Трафік на безкоштовному плані | без обмежень для статики | 100 ГБ на місяць | 300 кредитів на все: 20 кредитів за ГБ, 15 за продакшн-деплой | м'який ліміт 100 ГБ на місяць |
| Комерційний сайт | так | тільки некомерційні проєкти | так | не для онлайн-бізнесу і продажів |
| Preview на кожну гілку | так | так | так | ні |
| Свій домен і SSL | так | так | так | так |
| Коли обирати | портфоліо, лендинг, сайт студії чи курсу | Next.js із серверною логікою | якщо вже звикли до його інтерфейсу | open-source документація, pet-проєкт |
Моя рекомендація для статичного сайту дизайнера - Cloudflare Pages. Трафік не рахується, домен, DNS і SSL в одному кабінеті, а комерційний проєкт не змушує переходити на платний план. Якщо ваш проєкт на React чи Next.js і вам ближче Vercel, покроковий шлях є в окремому матеріалі про деплой на Vercel за 15 хвилин.
Що підготувати перед першим деплоєм?
- Акаунт на GitHub - безкоштовний.
- Акаунт у Cloudflare - безкоштовний, картка не потрібна.
- Папка з сайтом, де в корені лежить
index.html(або проєкт, який збирається командою на кшталтnpm run build). - Claude Code - входить у підписку Claude Pro. Як його поставити і почати без досвіду в коді, розібрано в матеріалі Claude Code для дизайнерів.
Як задеплоїти сайт на Cloudflare Pages покроково?
Крок 1. Попросіть Claude Code створити репозиторій. Відкрийте Claude Code у папці сайту і напишіть щось на кшталт:
Зроби з цієї папки git-репозиторій: додай .gitignore
(без .env, node_modules, .DS_Store), зроби перший коміт,
створи приватний репозиторій my-portfolio на GitHub
через gh і відправ туди гілку main.Claude виконає git init, коміт і push сам, а якщо GitHub CLI ще не авторизований, підкаже, яку одну команду запустити і де натиснути «Authorize».
Крок 2. Підключіть репозиторій у Cloudflare. У кабінеті: Workers & Pages → Create → вкладка Pages → Connect to Git (назви кнопок Cloudflare іноді трохи змінює). Дайте Cloudflare доступ до потрібного репозиторію і вкажіть налаштування збірки:
- Production branch:
main - Framework preset: None для чистого HTML, або ваш фреймворк (Vite, Astro, Next.js)
- Build command: порожньо для чистого HTML,
npm run buildдля фреймворку - Build output directory: корінь проєкту для чистого HTML,
distдля Vite чи Astro
Натисніть Save and Deploy. Приблизно за хвилину сайт відкривається на адресі my-portfolio.pages.dev.
Крок 3. Перевірте автодеплой. Попросіть Claude змінити заголовок на головній, закомітити і запушити в main. Через хвилину зміна вже на живому сайті. Більше ніяких FTP і ручного завантаження файлів.
Крок 4. Підключіть свій домен. У проєкті: Custom domains → Set up a custom domain. Якщо DNS домену вже в Cloudflare, записи з'являться самі. Для піддомену (наприклад, portfolio.mysite.com) на іншому реєстраторі вистачить CNAME-запису на my-portfolio.pages.dev. Кореневий домен без www підключається тільки якщо nameservers перенесені в Cloudflare. SSL-сертифікат видається автоматично.
Крок 5. Працюйте через гілки і preview. Кожна гілка, крім main, отримує власну адресу на кшталт redesign.my-portfolio.pages.dev. Попросіть Claude: «зроби гілку redesign, переверстай hero і запуш». Посилання на preview можна скинути клієнту, а на продакшн зміни потраплять тільки після злиття в main. Мінімум, який варто знати про гілки, є в гайді з git для дизайнерів.
Альтернатива без GitHub - Direct Upload через Wrangler, офіційний CLI Cloudflare: Claude запускає npx wrangler pages deploy прямо з вашої папки. Це швидко для разового прототипу, але проєкт, створений через Direct Upload, потім не можна перевести на Git-інтеграцію. Для сайту, який житиме довше тижня, обирайте шлях через GitHub.
Як деплоїться сам uxhero.design?
Сайт UX Hero - це чистий HTML і один спільний ux.css у репозиторії на GitHub, без конструктора. Процес виглядає так:
- Claude Code створює гілку, робить зміни і відкриває pull request.
- На кожен pull request автоматично запускається перевірка: биті посилання, відсутні файли, наявність title, description і canonical.
- Я дивлюсь результат і даю ОК, гілка зливається в
main. - Cloudflare підхоплює push у
mainі за хвилину оновлює сайт по всьому світу.
Файли _headers (кешування і заголовки безпеки) і _redirects (переадресації старих адрес) теж написав Claude. Одна деталь: у 2026 році Cloudflare для нових проєктів рекомендує Workers зі статичними ресурсами, і uxhero.design працює саме так, з конфігом wrangler.jsonc. Для дизайнера різниці майже немає: той самий розділ Workers & Pages, той самий автодеплой з GitHub. Якщо Claude запропонує такий варіант замість класичного Pages - погоджуйтесь.
Які помилки бувають при деплої і як попросити Claude їх виправити?
- 404 замість головної. Неправильний Build output directory, або
index.htmlлежить не в корені. Попросіть Claude показати структуру папок і сказати, що вписати в налаштування. - Build failed. Скопіюйте лог збірки з Cloudflare в Claude. Часто причина в різних версіях Node локально і на сервері, і Claude додасть змінну
NODE_VERSION. - Локально все гарно, на сайті картинки не вантажаться. Сервери Cloudflare розрізняють регістр:
Logo.PNGіlogo.pngдля них різні файли. Попросіть Claude знайти всі такі розбіжності. - Домен «завис» у статусі pending. Зазвичай конфліктує старий A-запис у DNS. Зробіть скріншот DNS-записів і покажіть Claude.
- API-ключ потрапив у репозиторій. Попросіть Claude прибрати його з коду, додати файл у
.gitignoreі перенести значення в Environment variables проєкту. Сам ключ після цього перевипустіть.
Універсальний промпт на будь-яку помилку:
Ось лог збірки з Cloudflare: [вставити лог].
Знайди причину, виправ у новій гілці, запуш
і скажи, що перевірити на preview перед злиттям у main.Живі деплої з розбором таких помилок я показую на YouTube-каналі UX Hero.
Часті питання
Чи справді Cloudflare Pages безкоштовний?
Так, для статичного сайту. Станом на жовтень 2026 безкоштовний план Cloudflare Pages дає 500 збірок на місяць, необмежений трафік і запити до статики, до 20 000 файлів на сайт і 100 власних доменів на проєкт. Картка не потрібна. Платити доведеться тільки за домен, якщо він вам потрібен.
Чи треба знати git, щоб задеплоїти сайт на Cloudflare Pages?
Ні. Git-частину (створити репозиторій, закомітити, відправити в GitHub, зробити гілку) виконує Claude Code за вашим запитом звичайною мовою. Вам достатньо розуміти три поняття: репозиторій, гілка і push. Руками в кабінеті Cloudflare ви робите тільки підключення репозиторію і домену.
Що краще для портфоліо дизайнера: Cloudflare Pages чи Vercel?
Для статичного сайту чи портфоліо - Cloudflare Pages: трафік до статики не обмежений, а комерційні проєкти не потребують платного плану. Безкоштовний Vercel Hobby дає 100 ГБ трафіку і дозволений тільки для некомерційних проєктів. Vercel має сенс, коли сайт на Next.js із серверною логікою.
Як підключити свій домен до Cloudflare Pages?
У проєкті відкрийте Custom domains і додайте домен. Якщо DNS домену вже в Cloudflare, записи створяться автоматично. Для піддомену на іншому реєстраторі достатньо CNAME на адресу project.pages.dev, а для кореневого домену (без www) треба перенести nameservers у Cloudflare. SSL-сертифікат видається автоматично.
Чим preview-деплой відрізняється від продакшну?
Продакшн - це версія з головної гілки (зазвичай main), яку бачать усі на вашому домені. Preview - це окрема адреса для будь-якої іншої гілки на кшталт redesign.project.pages.dev. Її можна показати клієнту чи колезі до того, як зміни потраплять на живий сайт. На безкоштовному плані кількість активних preview не обмежена.
Деплой - це не окрема професія, а 15 хвилин налаштування один раз. Після цього «опублікувати сайт» для вас означає «попросити Claude запушити». І саме тут дизайнер, що кодить, відрізняється від дизайнера з красивим макетом: у першого є посилання, яке можна відкрити.