Cloudflare Pages: заливаем сайт из GitHub бесплатно — без VPS, без сервера, без лимита по трафику

Cloudflare Pages — это хостинг, при котором вы пушите код в Git, а сайт сам раздаётся через CDN. Без захода на сервер по SSH, без ручной загрузки файлов, без ковыряния nginx. Я в первый раз залил так блог в 2023-м и до сих пор считаю, что для статики это самый простой путь: коммит уехал — сайт уже онлайн.

Ключевое правило: Cloudflare Pages — не замена серверу. Это раздача готовой статики через 330+ точек по миру. Если ваш сайт «собирается» в папку с HTML/CSS/JS — Pages для вас. Если там сервер с базой данных, сессиями и реалтаймом — смотрите в сторону Workers, Railway или классического VPS.

Что это

Cloudflare Pages — сервис внутри экосистемы Cloudflare, который берёт на себя полный цикл: сборку, хостинг и раздачу статических сайтов. Контент раздаётся через ту же глобальную сеть из 330+ дата-центров, что и обычный Cloudflare CDN. Главное отличие от классического хостинга — вам не нужно загружать файлы вручную и не нужно настраивать сервер. Вместо этого вы подключаете Git-репозиторий, указываете команду сборки — и каждый пуш автоматически запускает деплой.

Pages поддерживает:

• Чистый HTML/CSS/JS без фреймворков.
• Генераторы статики: Astro, Hugo, Gatsby, Jekyll, Eleventy.
• Фреймворки с SSR через Functions: Next.js, Nuxt, SvelteKit, Remix.
• Любой инструмент, который на выходе даёт папку с файлами.

Cloudflare постепенно объединяет Pages и Workers в единую платформу. Pages продолжает работать и поддерживается, но новые фичи (например, Workers Builds) появляются на стороне Workers. Для статических сайтов Pages по-прежнему самый простой способ начать.

Зачем нужно

• Блог, лендинг, документация, портфолио. Залили в Git, через 2 минуты сайт онлайн с HTTPS.
• Preview-деплои на каждый pull request. Заказчик или дизайнер смотрит изменения до мёрджа.
• Сайт с формами и серверной логикой. Functions добавляют API-эндпоинты без отдельного бэкенда.
• Headless CMS + статика. Notion, Sanity или Contentful как источник, Pages — как раздача.
• Staging и production в одной панели. Разные ветки — разные URL.

Как устроено

Элемент	Назначение
Git-интеграция	Подключение GitHub или GitLab. На каждый пуш — автодеплой.
Preview-деплои	Каждый PR получает уникальный URL для предпросмотра до мёрджа.
Глобальный CDN	Сайт раздаётся с 330+ серверов Cloudflare по всему миру.
HTTPS	Бесплатный SSL-сертификат для кастомного домена, выпускается автоматически.
Functions	Серверная логика на Edge — API-эндпоинты, SSR, серверные формы. Работает на Workers.
Direct Upload	Загрузка файлов напрямую через CLI (wrangler) — без привязки к Git.
Кастомные домены	До 100 доменов на проект на бесплатном тарифе.
Rollback	Откат к любому предыдущему деплою в один клик.
Build cache	Кэширование зависимостей между билдами — быстрее повторные деплои.
Web Analytics	Встроенная аналитика без сторонних скриптов и cookie.

Когда использовать

Ситуация	Подходит	Почему
Личный блог или портфолио	Да	Бесплатно, автодеплой из Git, домен .pages.dev из коробки.
Корпоративный сайт с CMS	Да	Headless CMS + статическая сборка + Pages = обновления без деплоя кода.
Документация проекта	Да	Starlight, Docusaurus, VitePress отлично работают с Pages.
Лендинг с формой заявки	Да	Чистый HTML + Functions для обработки формы.
SaaS с авторизацией и базой	Нет	Нужен сервер с базой данных и сессиями. Смотрите в сторону Workers + D1 или VPS.
Интернет-магазин с личным кабинетом	Скорее нет	Pages справится с витриной, но корзина и чекаут требуют серверной логики с базой и платёжным шлюзом.
Real-time приложение (чат, коллаборативный редактор)	Нет	Pages — это раздача статики. WebSocket-соединения требуют Workers или отдельного сервера.

Пример

Быстрый старт: деплой из GitHub

Шаг 1. Подготовьте репозиторий. У вас должен быть GitHub- или GitLab-репозиторий с проектом. Это может быть:

• Папка с HTML-файлами.
• Проект на Astro, Hugo, Next.js или любом другом фреймворке.
• Результат работы любого генератора статики.

Шаг 2. Создайте проект в Cloudflare.

• Откройте dash.cloudflare.com и войдите в аккаунт.
• Перейдите в Workers & Pages.
• Нажмите Create → вкладка Pages → Connect to Git.
• Авторизуйте Cloudflare в вашем GitHub/GitLab.
• Выберите репозиторий.

Шаг 3. Настройте билд. Cloudflare автоматически определяет фреймворк и подставляет значения. Если нет — укажите вручную:

Фреймворк	Build command	Output directory
Чистый HTML	exit 0	. (без сборки) или папка с файлами
Astro	npm run build	dist
Hugo	hugo	public
Next.js (static)	npx next build	out или .next
Gatsby	gatsby build	public
Nuxt (static)	nuxt generate	dist
SvelteKit	npm run build	build
Eleventy (11ty)	npx eleventy	\_site
Jekyll	jekyll build	\_site
Vite	npm run build	dist

Если Cloudflare неправильно определил фреймворк — можно изменить настройки билда в любой момент: Settings → Build & deployments → Build configurations.

Шаг 4. Запустите деплой. Нажмите Save and Deploy. Cloudflare:

• Склонирует репозиторий.
• Установит зависимости (npm install).
• Выполнит команду сборки.
• Загрузит результат на CDN.

Первый билд занимает 1–3 минуты. Последующие — быстрее за счёт кэша.

Шаг 5. Проверьте результат. После деплоя вы получите URL вида https://your-project.pages.dev. Сайт уже работает с HTTPS и глобальным CDN.

Каждый пуш в production-ветку автоматически запускает новый деплой. Пуш в любую другую ветку создаёт preview-деплой с отдельным URL.

Direct Upload: деплой без Git

Если проект не в GitHub/GitLab или вы хотите депоить из CI/CD:

# Установите wrangler
npm install -g wrangler

# Авторизуйтесь
wrangler login

# Создайте проект и загрузите файлы
wrangler pages project create my-project
wrangler pages deploy ./dist --project-name=my-project

Через GitHub Actions:

name: Deploy to Cloudflare Pages
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy dist --project-name=my-project

Direct Upload нельзя переключить на Git-интеграцию после создания проекта (и наоборот). Выбирайте способ деплоя при создании.

Functions: серверная логика на Edge

Cloudflare Pages Functions позволяет добавить серверный код к статическому сайту. Под капотом это Cloudflare Workers.

Создайте папку functions/ в корне проекта. Каждый файл в ней становится API-эндпоинтом:

functions/
├── api/
│   ├── hello.js   →  GET  /api/hello
│   └── submit.js  →  POST /api/submit
└── [[catchall]].js  → fallback для SPA

Пример файла functions/api/hello.js:

export async function onRequestGet(context) {
  return new Response(JSON.stringify({
    message: "Hello from Edge!",
    timestamp: new Date().toISOString()
  }), {
    headers: { "Content-Type": "application/json" }
  });
}

Что можно делать через Functions:

• Обработка форм без стороннего сервера.
• API-прокси (скрыть ключи от клиента).
• Server-side rendering (SSR) для фреймворков.
• Аутентификация и авторизация.
• Работа с KV, D1, R2 и другими сервисами Cloudflare.

Functions на бесплатном тарифе: 100 000 вызовов в день. Этого хватает для форм, API и SSR небольших сайтов.

Переменные окружения

Pages поддерживает переменные окружения для хранения ключей, токенов и конфигурации. Настройка: Settings → Environment variables. Можно задать разные значения для production и preview.

Переменные доступны:

• На этапе сборки — через process.env.API\_URL.
• В Functions — через context.env.API\_URL.

Тарифы и лимиты

Параметр	Free	Pro ($25/мес)	Business ($250/мес)
Деплоев в месяц	500	5 000	20 000
Параллельных билдов	1	5	20
Кастомных доменов	100	250	500
Файлов на сайт	20 000	100 000	100 000
Максимальный размер файла	25 МБ	25 МБ	25 МБ
Трафик	Неограниченный	Неограниченный	Неограниченный
Статические запросы	Неограниченные	Неограниченные	Неограниченные
Functions (вызовов/день)	100 000	100 000	100 000
Количество сайтов	Неограниченное	Неограниченное	Неограниченное

Неограниченный трафик и бесплатные статические запросы — главное преимущество Cloudflare Pages перед другими платформами. Вы не заплатите за всплеск трафика.

Сравнение с альтернативами

Параметр	Cloudflare Pages	GitHub Pages	Vercel	Netlify
Трафик	Неограниченный	100 ГБ/мес	100 ГБ/мес	100 ГБ/мес
Деплоев/мес	500	Без лимита	100 (Hobby)	500
Preview-деплои	Да	Нет	Да	Да
Серверные функции	Functions (Workers)	Нет	Serverless Functions	Functions
CDN-серверов	330+	~10	~20	~10
Приватные репозитории	Да	Нет (нужен Pro)	Да	Да
HTTPS	Автоматически	Автоматически	Автоматически	Автоматически
Direct Upload	Да (wrangler CLI)	Нет	Да (vercel CLI)	Да (netlify CLI)

Практические сценарии

Личный сайт или портфолио. Ставите Astro или Hugo, пишете контент в Markdown, подключаете репозиторий к Pages. Каждый коммит — автоматический деплой. Бесплатный домен .pages.dev или свой кастомный. Полностью бесплатно.

Блог с CMS. Используете headless CMS (Notion, Sanity, Contentful) как источник контента, генерируете статику через Astro или Next.js. Pages собирает сайт при каждом пуше. Через webhook от CMS можно триггерить ребилд при обновлении контента.

Документация проекта. Starlight (тема Astro), Docusaurus или VitePress для документации. Markdown-файлы в репозитории, автоматический деплой через Pages. Preview-деплои позволяют ревьюить изменения в документации перед мёрджем.

Лендинг или промо-страница. Чистый HTML или лёгкий генератор. Деплой за 2 минуты. Нужна форма — добавьте Function для обработки. Нужна аналитика — включите встроенную Web Analytics.

SPA (React, Vue, Svelte). Собираете приложение, деплоите через Pages. Добавьте \[\[catchall\]\].js в Functions для fallback-роутинга. Если нужен бэкенд — Functions работает как API прямо рядом с фронтендом.

Staging-окружение. Push в main → продакшн. Push в staging → preview с отдельным URL. Можно привязать отдельный домен (например, staging.mysite.ru) к конкретной ветке через Branch Deploy Controls.

Привязка кастомного домена

Вариант 1. Домен уже в Cloudflare. Если домен добавлен в Cloudflare (DNS управляется через Cloudflare):

• Откройте проект в Pages → Custom domains.
• Нажмите Set up a custom domain.
• Введите домен (например, mysite.ru или blog.mysite.ru).
• Cloudflare автоматически создаст CNAME-запись.
• SSL-сертификат выпустится автоматически.

Вариант 2. Домен у другого провайдера. Если DNS управляется не через Cloudflare:

• Добавьте домен в Pages → Custom domains.
• Cloudflare покажет CNAME-запись, которую нужно создать у вашего DNS-провайдера: CNAME mysite.ru your-project.pages.dev.
• Создайте эту запись в панели вашего регистратора.
• Дождитесь верификации (обычно до 30 минут).
• SSL-сертификат выпустится после верификации.

Если хотите и mysite.ru, и www.mysite.ru — добавьте оба домена. Cloudflare Pages не делает автоматический редирект между ними. Чтобы настроить www-редирект: добавьте оба домена в Custom domains, затем настройте Page Rule или Redirect Rule в основном Cloudflare-дашборде.

Полезные настройки

Build caching. Pages автоматически кэширует node\_modules между билдами. Если используете другие пакетные менеджеры: pnpm — кэш работает автоматически, yarn — кэш работает автоматически, bun — поддерживается.

Branch Deploy Controls. По умолчанию каждая ветка получает preview-деплой. Можно ограничить: Settings → Build & deployments → Branch deploy controls.

• Деплоить только production-ветку.
• Деплоить production + конкретные ветки.
• Деплоить все ветки (по умолчанию).

Build Watch Paths. Если в монорепозитории несколько проектов — укажите пути, при изменении которых запускается билд: Settings → Build & deployments → Build watch paths.

/packages/website/**
/shared/**

Частые проблемы

Билд падает с ошибкой. Проверьте логи сборки: Deployments → выберите деплой → View logs. Частые причины:

• Неправильная команда сборки или output directory.
• Версия Node.js не совпадает с локальной — задайте NODE\_VERSION в переменных окружения (например, 20).
• Недостающие зависимости — проверьте package.json.

Сайт показывает 404. Убедитесь, что output directory указан правильно. Если деплоите SPA — добавьте файл \_redirects в output:

/*  /index.html  200

Или используйте \[\[catchall\]\].js в Functions.

SSL не работает на кастомном домене. SSL-сертификат выпускается автоматически после верификации домена. Если не работает:

• Проверьте CNAME-запись.
• Подождите до 30 минут.
• Убедитесь, что домен не проксируется через другой CDN.

Preview-деплои не создаются. Проверьте Branch Deploy Controls — возможно, деплой ограничен только production-веткой. Также убедитесь, что GitHub-интеграция имеет доступ к репозиторию.

Изменения не появляются после деплоя. Cloudflare кэширует статику. Очистите кэш в основном дашборде: Caching → Purge Everything. Или дождитесь автоматического обновления (TTL по умолчанию зависит от заголовков).

Ограничения

Ограничения

Что учитывать

Pages подходит не для всего. Перед подключением проверьте рамки.

Неограниченный трафик

это про статику — Functions и Functions CPU имеют отдельные лимиты (100 000 вызовов в день на бесплатном тарифе), всплеск трафика через Functions может упереться в лимит.

20 000 файлов на сайт на Free

крупные медиа-каталоги с тысячами картинок упрутся в лимит, переход на Pro за $25/мес снимает ограничение до 100 000.

Functions на бесплатном тарифе

100 000 вызовов в день — для формы обратной связи и небольшого API хватит, для серьёзного SSR или прокси — нет.

Нет прямого SSH-доступа к серверу — если привыкли ковырять конфиги на VPS, здесь так нельзя.

Всё через CLI wrangler и дашборд.

DNS у другого провайдера

дольше верификация — добавление кастомного домена занимает до 30 минут, если DNS не в Cloudflare.

Preview-деплои живут до мёрджа

после слияния ветки preview удаляется, нельзя использовать как долгосрочный staging.

Build cache работает только в пределах одной учётки

если переключаетесь между организациями Cloudflare, кэш не переносится.

Cloudflare объединяет Pages и Workers — новые фичи (например, Workers Builds) появляются на стороне Workers, не Pages.

Долгосрочная стратегия платформы может удивить.

Антипаттерны

Антипаттерны

Чего не делать

Частые ошибки, которые ломают работу Pages или замедляют деплой.

Депоить готовый билд из CI/CD через Direct Upload, а потом пытаться переключить на Git-интеграцию — придётся создавать проект заново.

Решите заранее, какой способ деплоя основной.

Игнорировать версию Node.js — если локально 22, а в Cloudflare по умолчанию 18, билд упадёт.

Зафиксируйте NODE\_VERSION=22 в Environment variables.

Хранить секреты в коде и пушить в публичный репозиторий

используйте Environment variables, secrets не попадают в git и доступны только в билде и Functions.

Подключать Functions как «замену базы данных» — Functions stateless, между вызовами нет состояния.

Для данных используйте KV, D1, R2 или внешнюю базу.

Не добавлять `_redirects` для SPA — React Router / Vue Router без fallback выдаст 404 на любой странице, кроме корня.

Добавьте /\* /index.html 200.

Ждать, что Pages сам починит SSL после смены DNS

после смены DNS-серверов нужно заново пройти верификацию домена, до 30 минут.

Ставить сложную серверную логику в Functions без CPU-лимита

Functions CPU на бесплатном тарифе имеет ограничение по времени выполнения, тяжёлые задачи упадут по таймауту.

Использовать Pages как CDN для медиа-библиотек на 100 000+ файлов — упрётесь в лимит файлов или в размер (25 МБ на файл).

Для медиа лучше R2 + Workers или специализированный CDN.

Подключать `staging` через тот же проект, что и production — preview-деплои живут до мёрджа, а staging нужен долгосрочно.

Заведите отдельный проект Pages под staging.

Чеклист

Чеклист

Проверка перед запуском

Чеклист после деплоя и до публикации в открытый доступ.

Проект создан в Workers & Pages

и привязан к правильному аккаунту Cloudflare.

Репозиторий подключён (или настроен Direct Upload)

GitHub-интеграция имеет доступ к репо, или wrangler login отработал.

Команда сборки и output directory указаны правильно

для Astro это npm run build и dist, для Hugo — hugo и public, для чистого HTML — без команды и output = ..

NODE_VERSION зафиксирован

совпадает с локальной версией, без этого билд может упасть.

Первый деплой прошёл успешно

в логах нет ошибок, статус зелёный.

Сайт открывается по `.pages.dev` адресу

без 404, без SSL-ошибок.

Кастомный домен привязан (если нужен)

CNAME-запись создана, DNS указывает на your-project.pages.dev.

SSL-сертификат выпущен для кастомного домена

после верификации домена, обычно до 30 минут.

Переменные окружения заданы для production и preview

отдельно для каждого окружения, без секретов в коде.

Preview-деплои работают при создании PR

открывается уникальный URL в комментарии к PR.

Web Analytics включена (если нужна)

встроенная аналитика без cookie, не требует GA или Яндекс.Метрики.

Для SPA настроен `_redirects` или `[[catchall]].js`

без этого внутренние страницы будут выдавать 404.

Branch Deploy Controls настроены под процесс

деплоится только main, или main + staging, или все ветки.

Ссылки

Ссылки

• Cloudflare Pages — официальная страница
• Документация Pages
• Framework guides
• Git-интеграция
• Лимиты по тарифам
• Cloudflare Workers & Pages Pricing
• Wrangler CLI

По теме

По теме

• База знаний: TimeWeb, Selectel, Beget, Yandex Cloud: какой российский VPS взять и как его защитить за полчаса если нужен полный контроль над сервером, а не managed-хостинг.
• База знаний: API как язык между сервисами: что это, зачем нужно и как читать ответы Functions на Pages работают через API-эндпоинты, полезно понимать REST.