Hospedar um site ou aplicativo web costumava significar contratar servidor, configurar certificado SSL manualmente e se preocupar com escala. O Cloudflare Pages simplificou drasticamente esse processo para aplicações estáticas e PWAs, oferecendo um plano gratuito generoso que já resolve boa parte das necessidades de pequenos e médios projetos.

Como funciona, na prática

O fluxo básico é conectar um repositório do GitHub (ou GitLab) ao Cloudflare Pages. A cada alteração enviada para o repositório, a plataforma automaticamente gera uma nova versão publicada — sem precisar rodar comandos manuais de deploy. Isso é especialmente útil para times pequenos, que ganham um processo de publicação profissional sem precisar montar infraestrutura própria.

O que vem incluso no plano gratuito

  • CDN global: o conteúdo do site é distribuído em servidores ao redor do mundo, reduzindo o tempo de carregamento para visitantes de qualquer região.
  • Certificado SSL automático: HTTPS é ativado automaticamente, sem configuração manual — requisito, inclusive, para que um PWA funcione corretamente.
  • Deploy contínuo: cada push no repositório gera uma nova versão, com histórico de deployments anteriores disponível para rollback.
  • Domínio próprio: é possível conectar um domínio personalizado (como devlobbo.com) sem custo adicional pela hospedagem em si.

Limitações a considerar

O Cloudflare Pages é voltado para sites estáticos e aplicações que rodam no navegador (React, Vue, HTML puro, PWAs). Ele não hospeda diretamente um backend com banco de dados tradicional rodando em servidor — para isso, normalmente se combina com serviços como Firebase, Supabase, ou funções serverless (Cloudflare Workers), que cuidam da parte de dados e lógica de servidor.

💡 Uma arquitetura comum e eficiente: frontend estático hospedado no Cloudflare Pages + backend e banco de dados no Firebase. Essa combinação mantém custos baixos mesmo com o crescimento do número de usuários.

Passo a passo: publicando seu primeiro site do zero

Esse guia assume que você já tem os arquivos do seu site ou app prontos (HTML, ou o resultado de um build de React/Vue). Se você nunca publicou nada online antes, siga os passos exatamente nessa ordem — leva menos de 15 minutos até o site estar no ar.

Não sabe se você tem esses "arquivos" prontos? Se o seu site já abre no seu computador quando você clica duas vezes num arquivo .html (ou se você já usa algum programa como VS Code, Cursor, ou uma ferramenta de IA pra gerar código), você já tem tudo que precisa — é literalmente a pasta onde esses arquivos estão salvos.

Fluxo de publicação: GitHub conectado ao Cloudflare Pages

1. Crie sua conta gratuita na Cloudflare

Acesse dash.cloudflare.com/sign-up e crie uma conta com seu e-mail — não é necessário cartão de crédito para o plano gratuito. Depois de confirmar o e-mail, você já cai direto no painel principal (dashboard), onde vamos voltar no passo 3.

2. Prepare seu projeto no GitHub

Um repositório é só uma pasta na nuvem onde o GitHub guarda os arquivos do seu projeto e o histórico de mudanças — pense nele como o "Google Drive" dos programadores. Se você nunca usou o GitHub, crie uma conta gratuita em github.com, clique em "New repository", dê um nome, e arraste os arquivos do seu site pra dentro (dá pra fazer isso direto pelo navegador, sem instalar nada). Se você usa um framework como React ou Vue, não precisa subir a pasta de build já pronta — a Cloudflare vai gerar isso automaticamente a cada publicação, usando o comando que você configurar no passo 4.

3. Conecte o repositório ao Cloudflare Pages

No painel da Cloudflare, procure o menu "Workers & Pages" na barra lateral esquerda. Clique em "Create application", depois na aba "Pages", e em "Connect to Git". Você vai precisar autorizar a Cloudflare a acessar sua conta do GitHub — escolha se quer dar acesso a todos os repositórios ou só ao que você vai usar.

4. Configure o build (esse passo confunde muita gente)

Depois de escolher o repositório, a Cloudflare pede duas informações: o comando de build e a pasta de saída. Isso soa mais complicado do que é — o "build" é só o processo que transforma seu código em algo que o navegador consegue exibir. Aqui vai o que preencher em cada situação:

  • Site em HTML puro (sem framework, arquivos .html/.css/.js direto): deixe os dois campos em branco e aponte a pasta de saída pra raiz do projeto (só uma barra: /).
  • Projeto em React com Vite: comando de build npm run build, pasta de saída dist.
  • Next.js ou Vue: na maioria das vezes a Cloudflare detecta o framework sozinha assim que você seleciona o repositório, e já preenche os dois campos automaticamente — só confirme se bateu certo antes de continuar.

Se você não tem certeza de qual é o seu caso, não tem problema — esses campos podem ser alterados depois, a qualquer momento, sem perder nada do que já foi configurado.

5. Publique e acompanhe o primeiro deploy

Clique em "Save and Deploy". A Cloudflare vai baixar seu código, rodar o comando de build (se configurado) e publicar o resultado — isso costuma levar de 30 segundos a 2 minutos, dependendo do tamanho do projeto. Você acompanha esse processo em tempo real, com o log completo do que está acontecendo.

6. Confirme que o site está no ar

Quando o deploy terminar, a Cloudflare gera automaticamente um endereço gratuito no formato seu-projeto.pages.dev — clique nele pra conferir que tudo carregou certo. A partir de agora, qualquer novo push que você fizer no repositório do GitHub republica o site automaticamente, sem precisar repetir esse processo.

7. Quer usar seu próprio domínio?

O endereço gratuito .pages.dev já funciona perfeitamente, mas se você tem um domínio próprio (como devlobbo.com), dá pra conectar ele em poucos cliques — sem custo adicional pela hospedagem em si. Escrevemos um guia dedicado só pra essa parte, com todos os detalhes de configuração de DNS:

Ver o passo a passo de domínio próprio →
💡 Se der algum erro no build, o log mostra exatamente em qual linha o processo falhou — na maioria das vezes é porque o comando de build ou a pasta de saída foram configurados errado no passo 4. Vale conferir isso primeiro antes de qualquer outra investigação.

Problemas comuns e como resolver

  • Página em branco depois de publicar: geralmente é porque a pasta de saída configurada no passo 4 está errada. Confira se ela aponta exatamente pra pasta onde o index.html final fica salvo depois do build.
  • Site funciona no computador mas quebra no ar: normalmente é um caminho de arquivo escrito errado (por exemplo, ./imagem.png funciona local mas quebra publicado). Use sempre caminhos começando com barra, tipo /imagem.png.
  • Build falha com "command not found": confira se o comando de build está escrito exatamente igual ao que aparece no arquivo package.json do seu projeto, na seção "scripts".
  • Demora demais pra atualizar depois de um push: a Cloudflare tem uma fila de deploy — se publicar várias vezes seguidas rápido, o mais recente sempre vence, mas pode levar 1-2 minutos a mais nesses casos.

Para projetos que estão validando uma ideia ou operando com orçamento enxuto, essa combinação de custo zero de hospedagem com infraestrutura de nível profissional (CDN, SSL, deploy automático) reduz bastante a barreira técnica para colocar um produto no ar.