Hospedagem Grátis Cloudflare Pages: Guia 2026

📚 Série: Automação & Marketing Digital → Evolution API | Automação WhatsApp | CRM Vendas

O que é Cloudflare Pages?

Cloudflare Pages é uma plataforma de hospedagem 100% gratuita para sites estáticos (landing pages, blogs, portfolios, aplicações React/Next.js/Astro). O diferencial é que você conecta seu repositório GitHub e cada vez que fizer push, o site atualiza automaticamente em 2 minutos. Inclui CDN global (carrega rápido no Brasil, EUA, Europa), SSL grátis e largura de banda ilimitada. Zero custo mensal.

Principais benefícios:

• ✅ 100% grátis: Hospedagem, CDN, SSL e deploy automático (R$ 0/mês)
• ✅ Deploy instantâneo: Push GitHub → site atualizado em 2 minutos
• ✅ Performance global: CDN em 300+ cidades (site rápido em qualquer lugar)
• ✅ SSL automático: HTTPS configurado sozinho em 5 minutos

Volume de busca: 1.240 buscas/mês no Brasil Tendência: +78% interesse últimos 12 meses (explosão JAMstack)

---

Cloudflare Pages vs outras hospedagens (comparação completa)

Antes de mergulhar no tutorial, entenda por que Cloudflare Pages é a melhor opção para sites estáticos em 2026.

Comparação detalhada:

Característica	Cloudflare Pages	Vercel	Netlify	VPS (DigitalOcean)	Hostinger
Custo/mês	R$ 0	R$ 0	R$ 0	R$ 60	R$ 20
SSL (HTTPS)	✅ Grátis	✅ Grátis	✅ Grátis	❌ R$ 40/ano	❌ R$ 120/ano
CDN global	✅ 300+ cidades	✅ Edge Network	✅ Global	❌ Manual	❌ Não
Deploy automático	✅ GitHub	✅ GitHub/GitLab	✅ GitHub	❌ FTP manual	❌ FTP
Builds/mês	Ilimitado	6.000	300	N/A	N/A
Largura banda	Ilimitada	100GB	100GB	1TB	100GB
Domínio custom	✅ Grátis	✅ Grátis	✅ Grátis	✅ Grátis	✅ Grátis
Melhor para	Sites estáticos	Apps Next.js	JAMstack	Apps full-stack	WordPress

Veredito: Para sites estáticos (landing pages, blogs Astro, apps React), Cloudflare Pages é imbatível em custo-benefício.

Quando NÃO usar Cloudflare Pages:

• Sites WordPress (precisa PHP + MySQL)
• Apps com backend (APIs Node.js) → usar Vercel ou VPS
• Sites muito dinâmicos (chat real-time) → precisa servidor tradicional

---

Tutorial completo: Deploy Cloudflare Pages (passo a passo)

Vou ensinar do zero, assumindo que você já tem um site (Astro, Next.js, React, HTML puro).

Passo 1: Preparar projeto localmente (30 minutos)

Se já tem projeto pronto, pule para Passo 2.

Criar projeto Astro (exemplo):

# Instalar Node.js (se não tiver)
# Download: https://nodejs.org

# Criar projeto Astro
npm create astro@latest meu-site

# Opções recomendadas:
# Template: Empty
# TypeScript: No (mais simples)
# Git: Yes

# Entrar na pasta
cd meu-site

# Testar local
npm run dev

Abrir http://localhost:4321 e ver se funciona.

Build de produção:

# Gerar arquivos otimizados
npm run build

# Pasta criada: dist/
# Conteúdo: HTML, CSS, JS prontos para deploy

Passo 2: Subir para GitHub (15 minutos)

Criar repositório GitHub:

1. Acessar https://github.com
2. Clicar “New repository”
3. Nome: meu-site
4. Visibilidade: Public (ou Private, tanto faz)
5. NÃO marcar “Initialize with README”
6. Criar

Conectar projeto local ao GitHub:

# Inicializar Git (se não fez no Passo 1)
git init

# Adicionar todos arquivos
git add .

# Primeiro commit
git commit -m "Initial commit - site pronto para deploy"

# Conectar ao GitHub (copiar URL do seu repo)
git remote add origin https://github.com/SEU-USUARIO/meu-site.git

# Subir código
git branch -M main
git push -u origin main

Verificar: Atualizar página do GitHub e ver arquivos lá.

Passo 3: Conectar Cloudflare Pages (20 minutos)

Criar conta Cloudflare (grátis):

1. Acessar https://dash.cloudflare.com/sign-up
2. Email + senha
3. Verificar email

Criar projeto Pages:

1. No dashboard, clicar “Workers & Pages” (menu lateral)
2. Clicar “Create application”
3. Aba “Pages” → “Connect to Git”
4. Autorizar GitHub (permitir acesso aos repositórios)
5. Selecionar repositório meu-site

Configurar build:

Framework preset: Astro (detecta automaticamente)

Se não detectar, configurar manualmente:

Build command: npm run build
Build output directory: dist

Para outros frameworks:

Framework	Build command	Output directory
Astro	npm run build	dist
Next.js	npm run build && npm run export	out
React (Vite)	npm run build	dist
HTML puro	(deixar vazio)	/
Hugo	hugo	public

6. Clicar “Save and Deploy”

Aguardar deploy (1-3 minutos):

Cloudflare vai:

• Clonar repositório
• Instalar dependências (npm install)
• Rodar build (npm run build)
• Publicar pasta dist/ no CDN global

URL gerada: https://meu-site.pages.dev

Clicar na URL e ver site no ar!

Passo 4: Configurar domínio personalizado (10 minutos)

Se não tem domínio próprio, pode pular este passo.

Adicionar domínio custom (exemplo: meunegocio.com.br):

1. No painel do projeto Cloudflare Pages, clicar “Custom domains”
2. Clicar “Set up a custom domain”
3. Digitar: meunegocio.com.br
4. Clicar “Continue”

Configurar DNS:

Cloudflare vai mostrar registros DNS para adicionar:

CNAME @ meu-site.pages.dev

Opção 1: Domínio já está no Cloudflare

• Cloudflare adiciona CNAME automaticamente
• SSL ativado em 5 minutos

Opção 2: Domínio em outro provedor (Registro.br, GoDaddy)

• Acessar painel DNS do provedor
• Adicionar CNAME: @ → meu-site.pages.dev
• Aguardar propagação (5 min - 24h)

Verificar SSL:

Acessar https://meunegocio.com.br → deve mostrar cadeado verde (SSL ativo).

---

Deploy automático: GitHub → Cloudflare (magia!)

A verdadeira vantagem do Cloudflare Pages é que cada push no GitHub atualiza o site automaticamente.

Como funciona:

1. Você edita código local
2. Commit + Push para GitHub
3. Cloudflare detecta push
4. Roda build automático
5. Site atualizado em 2 minutos

Exemplo prático:

# Editar arquivo index.astro
# (mudar título da página)

# Commitar mudança
git add .
git commit -m "Atualizar título página inicial"
git push

# Cloudflare detecta push e faz deploy automático
# Acessar https://meu-site.pages.dev → título atualizado!

Monitorar deploy:

1. Acessar painel Cloudflare Pages
2. Ver lista deployments
3. Status: Building → Success (2-3 min)

Rollback (voltar versão anterior):

Se deploy quebrou algo:

1. Clicar deployment anterior (que funcionava)
2. “Rollback to this deployment”
3. Site volta pra versão antiga em 30 segundos

---

Caso real: Dev freelancer economizou R$ 1.800/ano

Empresa: Desenvolvedor freelancer (5 clientes, São Paulo)

Situação anterior:

• 5 landing pages clientes (cada uma em domínio próprio)
• Hospedagem: HostGator R$ 30/site/mês = R$ 150/mês total
• Deploy: FTP manual (15 min/deploy)
• SSL: R$ 120/ano/site = R$ 600/ano
• Total: R$ 1.800/ano + R$ 600 (SSL) = R$ 2.400/ano

Problema principal: Custo alto de hospedagem + deploy manual lento (cliente pede mudança → 15 min pra subir via FTP) + SSL caro.

Implementação:

• Migrou 5 sites para Cloudflare Pages
• Conectou cada site a repositório GitHub separado
• Configurou domínios customizados (SSL automático)
• Tempo migração: 4 horas (1h/site × 5 sites, incluindo testes)

Workflow novo:

1. Cliente pede mudança texto/imagem
2. Dev edita código local (5 min)
3. git push (10 segundos)
4. Site atualizado automaticamente (2 min)
5. Total: 7 minutos (antes: 15-20 min FTP)

Resultados (12 meses):

• ✅ Custo hospedagem: R$ 150/mês → R$ 0 (economia R$ 1.800/ano)
• ✅ Custo SSL: R$ 600/ano → R$ 0
• ✅ Tempo deploy: 15 min → 7 min (-53%)
• ✅ Performance: +40% velocidade (CDN Cloudflare vs servidor compartilhado)
• ✅ Uptime: 99.8% → 99.99% (Cloudflare mais confiável)

Cálculo ROI:

Economia total: R$ 1.800 (hospedagem) + R$ 600 (SSL) = R$ 2.400/ano Investimento migração: R$ 400 (4 horas × R$ 100/h do tempo do dev) ROI: (R$ 2.400 / R$ 400) × 100 = 600% no 1º ano Payback: R$ 400 ÷ R$ 200/mês × 30 = 60 dias

Depoimento:

“Migrei 5 sites clientes para Cloudflare Pages e economizei R$ 2.400/ano. Além disso, deploy ficou 50% mais rápido com git push. Nunca mais pago hospedagem tradicional.” — Desenvolvedor freelancer, São Paulo

---

Melhores práticas (checklist essencial)

1. Sempre usar variáveis de ambiente

❌ Erro comum: Colocar API keys direto no código (expostas no GitHub)

✅ Correto: Usar variáveis de ambiente (Cloudflare Pages Settings)

Como fazer:

1. Painel Cloudflare Pages → Settings → Environment variables
2. Adicionar:
   • Name: API_KEY
   • Value: sk_abc123...
3. No código:

// astro.config.mjs
export default {
  env: {
    API_KEY: import.meta.env.API_KEY
  }
}

// Usar no código
const apiKey = import.meta.env.API_KEY

2. Testar build local antes push

❌ Erro comum: Push código e descobrir que build quebrou no Cloudflare

✅ Correto: Sempre rodar npm run build local antes de fazer push

Checklist pré-deploy:

# 1. Build local
npm run build

# 2. Testar build local
npm run preview
# Abrir http://localhost:4321 e testar

# 3. Se tudo OK, fazer push
git add .
git commit -m "Feature X"
git push

3. Usar Preview Deployments (pull requests)

Recurso mágico: Cada pull request gera URL de preview separada.

Como funciona:

1. Criar branch nova: git checkout -b nova-feature
2. Fazer mudanças
3. Push: git push origin nova-feature
4. Abrir pull request no GitHub
5. Cloudflare cria deploy preview automático
6. URL: https://abc123.meu-site.pages.dev
7. Testar preview
8. Se OK → merge pull request → deploy produção

Vantagem: Cliente/chefe aprova mudanças antes ir pra produção.

4. Configurar redirects (301/302)

Caso de uso: Mudou URL antiga /contato.html → /contato

Criar arquivo _redirects na pasta public/:

# Redirect 301 (permanente)
/contato.html /contato 301

# Redirect SPA (todas rotas → index.html)
/* /index.html 200

Cloudflare respeita regras automaticamente.

5. Otimizar imagens (Web Performance)

❌ Erro comum: Subir imagens PNG 5MB direto

✅ Correto: Converter para WebP e otimizar

Ferramenta recomendada:

# Instalar sharp (otimizador imagens)
npm install sharp

# Script otimizar imagens
node optimize-images.js

Script optimize-images.js:

const sharp = require('sharp');
const fs = require('fs');

const images = fs.readdirSync('src/images');

images.forEach(img => {
  sharp(`src/images/${img}`)
    .resize(1920) // max width 1920px
    .webp({ quality: 80 }) // converter para WebP
    .toFile(`public/images/${img.replace(/\.(jpg|png)/, '.webp')}`);
});

Resultado: Imagens 70-90% menores → site carrega 3-5x mais rápido.

---

Ferramentas complementares

1. Astro (framework recomendado)

O que é: Framework para sites estáticos super rápidos (carrega zero JavaScript por padrão)

Por que usar: Sites Astro são 10-50x mais rápidos que WordPress

Melhor para: Landing pages, blogs, portfolios

Tutorial: Astro

2. Cloudflare Analytics (grátis)

O que faz: Analytics privado (não usa cookies, LGPD-friendly)

Como ativar:

1. Painel Cloudflare Pages → Analytics
2. Ativar “Web Analytics”
3. Ver visitantes, páginas mais acessadas, países

Custo: R$ 0 (incluído no Pages grátis)

3. Decap CMS (ex-Netlify CMS)

O que faz: Painel admin para editar conteúdo (sem mexer em código)

Melhor para: Dar acesso ao cliente editar textos/imagens sem saber programar

Como funciona:

1. Cliente acessa https://meusite.com/admin
2. Edita texto/imagem no painel
3. Salva → gera commit automático no GitHub
4. Cloudflare faz deploy automático

Tutorial: Decap CMS

---

Erros comuns (e como resolver)

❌ Erro 1: Build failed - “npm install” não encontra pacotes

Problema: Deploy falha com erro npm ERR! Cannot find module 'X'

Causa: package.json desatualizado ou node_modules não commitados (correto)

Solução:

# Deletar node_modules e package-lock
rm -rf node_modules package-lock.json

# Reinstalar
npm install

# Commitar package.json atualizado
git add package.json package-lock.json
git commit -m "Fix: atualizar dependências"
git push

❌ Erro 2: Site mostra 404 em todas páginas

Problema: Acessar qualquer rota além da home (/sobre, /contato) dá 404

Causa: SPA (Single Page Application) precisa redirect

Solução:

Criar arquivo public/_redirects:

/* /index.html 200

Push para GitHub → próximo deploy corrige.

❌ Erro 3: Domínio custom não funciona (SSL error)

Problema: https://meunegocio.com.br dá erro SSL ou “Site não encontrado”

Causa: DNS não propagado ou CNAME errado

Solução:

1. Verificar DNS propagou: https://dnschecker.org
2. Verificar CNAME correto:

# Testar DNS
nslookup meunegocio.com.br

# Deve retornar: meu-site.pages.dev

3. Se CNAME errado, corrigir no provedor DNS
4. Aguardar 5 min - 24h propagação

❌ Erro 4: Deploy muito lento (>5 minutos)

Problema: Build demora 10-15 minutos (normal é 2-3 min)

Causa: Muitas dependências ou build ineficiente

Solução:

1. Otimizar package.json (remover pacotes não usados)

# Ver tamanho node_modules
du -sh node_modules

# Se >500MB, tem problema

2. Usar cache build:

# Em Cloudflare Pages Settings → Build cache
Habilitar "Use build cache"

3. Otimizar script build:

// package.json
{
  "scripts": {
    "build": "astro build --parallel" // build paralelo
  }
}

---

Custos realistas (breakdown completo)

Setup inicial (one-time):

Item	Custo	Observação
Domínio	R$ 40/ano	Registro.br (.com.br)
Conta Cloudflare	R$ 0	100% grátis
Conta GitHub	R$ 0	Plano Free suficiente
Desenvolvimento	R$ 0-800	Se contratar dev
TOTAL	R$ 40-840

Custo mensal (recorrente):

Item	Custo/mês	Observação
Cloudflare Pages	R$ 0	Grátis ilimitado
GitHub	R$ 0	Repos públicos grátis
SSL	R$ 0	Incluído Cloudflare
CDN	R$ 0	Incluído Cloudflare
TOTAL	R$ 0/mês	Literalmente zero!

Limites plano grátis Cloudflare Pages:

• Builds simultâneos: 1 (fila se push múltiplos)
• Sites: Ilimitado
• Largura banda: Ilimitada
• Builds/mês: Ilimitado
• Storage: 20.000 arquivos/projeto

Limites raramente atingidos:

Na prática, só atinge limites se tiver:

• 50+ sites simultâneos
• 100+ deploys/dia
• Sites com 10.000+ páginas

ROI esperado (caso típico):

Migração HostGator → Cloudflare Pages:

Antes (HostGator):

• Hospedagem: R$ 30/mês
• SSL: R$ 120/ano = R$ 10/mês
• Total: R$ 40/mês = R$ 480/ano

Depois (Cloudflare Pages):

• Tudo: R$ 0/mês = R$ 0/ano

Economia: R$ 480/ano por site Se tiver 5 sites: R$ 2.400/ano economizados

---

Próximos passos (roadmap)

1. Criar projeto local (30 min)

   • Escolher framework (Astro recomendado)
   • npm create astro@latest
   • Rodar local: npm run dev

2. Subir para GitHub (15 min)

   • Criar repositório
   • git push

3. Conectar Cloudflare Pages (20 min)

   • Criar conta Cloudflare
   • Connect to Git
   • Deploy automático

4. Configurar domínio (10 min)

   • Adicionar domínio custom
   • Configurar DNS
   • SSL ativado automaticamente

5. Testar deploy automático (5 min)

   • Editar código
   • git push
   • Ver site atualizar em 2 min

Tempo total: 1h20min Resultado: Site profissional no ar com deploy automático e custo zero

---

Recursos adicionais

Documentação oficial:

• Cloudflare Pages Docs (configuração, limites)
• Astro Docs (framework recomendado)
• GitHub Actions (CI/CD avançado)

Comunidades brasileiras:

• Cloudflare Brasil (Discord) - Ajuda técnica
• Astro Brasil (Telegram) - 800+ desenvolvedores
• JAMstack Brasil (Facebook) - 3.000+ membros

Vídeos recomendados:

• Cloudflare Pages - Deploy em 5 minutos (tutorial prático)
• Astro + Cloudflare Pages - Caso Real (landing page do zero)

Suporte:

• Email: contato@agenciacafeonline.com.br
• WhatsApp: (11) 94729-2318 (Felipe - especialista Cloudflare)

---

Sobre o autor: Felipe Zanoni é desenvolvedor full-stack especializado em JAMstack, com 120+ sites migrados para Cloudflare Pages gerando economia média de R$ 540/ano por cliente e performance 300% superior comparado a hospedagens tradicionais.

---

💬 Precisa de Ajuda para Implementar?

A Agência Café Online já ajudou dezenas de empresas a implementarem soluções de automação e IA, com resultados reais e mensuráveis.

Fale comigo:

• 📱 WhatsApp: Clique aqui para conversar
• 📸 Instagram: @fe_leads
• 🌐 Site: agenciacafeonline.com.br

💡 Consultoria inicial gratuita para avaliar seu caso e propor uma solução personalizada.

---