Cloudflare Pages — бесплатный хостинг статических сайтов с деплоем из GitHub

Cloudflare Pages — платформа для хостинга статических и JAMstack-сайтов. Подключаете GitHub или GitLab, пушите код — сайт автоматически собирается и раздаётся через глобальную сеть Cloudflare. Бесплатный тариф: неограниченный трафик, 500 деплоев в месяц, HTTPS и preview-ссылки на каждый коммит.

Что это такое

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

Главное отличие от классического хостинга: вы не загружаете файлы вручную и не настраиваете сервер. Вместо этого подключаете Git-репозиторий, указываете команду сборки — и каждый пуш автоматически запускает деплой.

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

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

Основные возможности

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

Шаг 1. Подготовьте репозиторий

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

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

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

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

Шаг 3. Настройте билд

Cloudflare спросит параметры сборки:

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

Шаг 4. Запустите деплой

Нажмите Save and Deploy. Cloudflare:

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

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

Шаг 5. Проверьте результат

После деплоя вы получите URL вида:

https://your-project.pages.dev

Сайт уже работает с HTTPS и глобальным CDN.

Настройки билда по фреймворкам

Preview-деплои

Одна из самых полезных фич Pages — preview-деплои. Как это работает:

1. Вы создаёте pull request в GitHub
2. Cloudflare автоматически собирает ветку и выдаёт уникальный URL
3. URL имеет формат: https://<commit-hash>.your-project.pages.dev
4. Ссылка появляется прямо в PR на GitHub как проверка (check)
5. После мёрджа preview удаляется

Это позволяет:

• Показать изменения заказчику или дизайнеру до мёрджа
• Проверить сборку на реальном CDN
• Тестировать несколько веток параллельно

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

Вариант 1. Домен уже в Cloudflare

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

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

Вариант 2. Домен у другого провайдера

Если DNS управляется не через Cloudflare:

1. Добавьте домен в Pages → Custom domains
2. Cloudflare покажет CNAME-запись, которую нужно создать у вашего DNS-провайдера:

CNAME  mysite.ru  your-project.pages.dev

1. Создайте эту запись в панели вашего регистратора
2. Дождитесь верификации (обычно до 30 минут)
3. SSL-сертификат выпустится после верификации

Настройка www-редиректа

Чтобы www.mysite.ru перенаправлял на mysite.ru (или наоборот):

1. Добавьте оба домена в Custom domains
2. Настройте Page Rule или Redirect Rule в основном Cloudflare-дашборде

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

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

Через CLI (wrangler)

# Установите 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

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

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

Pages поддерживает переменные окружения для хранения ключей, токенов и конфигурации.

Настройка: Settings → Environment variables

Можно задать разные значения для production и preview:

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

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

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

Cloudflare Pages vs альтернативы

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

Личный сайт или портфолио

Ставите 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.

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

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 по умолчанию зависит от заголовков).

Ссылки

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

По теме

База знаний: Cloudflare — бесплатная защита, ускорение и управление доменами для любого сайта

База знаний: GitHub Pages — бесплатный хостинг статических сайтов прямо из GitHub

Блог: Интернет для агентов: почему ваш продукт должен говорить на языке машин

Если хотите разобраться, как настроить Cloudflare Pages для вашего проекта — выбрать фреймворк, подключить домен, настроить Functions или CI/CD — пишите в Telegram @pimenov