Como Hospedar um Site Estático de Graça em 2026: GitHub Pages, Cloudflare Pages e Formulários de Contato

Escolher a plataforma certa de hospedagem de sites estáticos pode economizar centenas de reais por ano, mantendo seu site rápido, seguro e fácil de manter. Em 2026, as opções de plano gratuito amadureceram bastante, e plataformas como GitHub Pages e Cloudflare Pages oferecem infraestrutura pronta para produção sem custo algum. Mas existe um desafio que a maioria dos tutoriais ignora: como lidar com formulários de contato em um site estático quando não há servidor para processá-los? Este guia percorre todo o processo de configuração, desde a escolha da plataforma até a criação de um formulário de contato funcional, com exemplos concretos e as limitações reais que você precisa conhecer antes de se comprometer com uma plataforma.

Por que a hospedagem estática gratuita merece sua atenção

Um site estático serve arquivos HTML, CSS e JavaScript pré-construídos diretamente ao navegador. Não há PHP, nenhum runtime Node.js e nenhuma consulta ao banco de dados a cada carregamento de página. Essa simplicidade é exatamente o que torna a hospedagem de páginas estáticas gratuita tão confiável: não há nada que possa travar, precisar de patch ou demandar escalabilidade.

Para pequenas empresas, portfólios, landing pages de SaaS e sites de documentação, a hospedagem estática atende a todos os requisitos:

• Velocidade: Os arquivos são servidos a partir de um edge node de CDN, geralmente em menos de 100ms globalmente.
• Segurança: A ausência de runtime no servidor reduz drasticamente a superfície de ataque.
• Custo: Tanto GitHub Pages quanto Cloudflare Pages são gratuitos para projetos públicos e muitos projetos privados.
• Simplicidade: Faça push do código para um repositório e o site é publicado automaticamente.

A única limitação real é a funcionalidade dinâmica. Qualquer coisa que exija lógica no servidor, como autenticação de usuários, carrinho de compras ou processamento de formulários, precisa de um serviço externo. Tenha isso em mente enquanto percorremos as etapas de configuração.

Comparativo de plataformas: GitHub Pages vs Cloudflare Pages

Resumindo: Se o seu público é global e você quer o carregamento mais rápido possível, Cloudflare Pages é a melhor escolha. Se o seu time já vive dentro do GitHub e você quer a configuração mais simples possível, GitHub Pages funciona perfeitamente.

Passo a passo: como publicar no GitHub Pages

Este exemplo assume que você tem um site simples em HTML/CSS pronto para publicar. Se você estiver usando um gerador de sites estáticos como Hugo ou Jekyll, o processo é praticamente idêntico.

1. Crie um repositório no GitHub. Acesse github.com/new e crie um repositório público. Nomeie-o como seu-usuario.github.io se quiser que ele seja servido no domínio raiz, ou use qualquer outro nome se quiser que fique em um subdiretório.
2. Faça push dos arquivos do site. Na pasta local do seu projeto, execute:
   Copiar

   git init
   git remote add origin https://github.com/seu-usuario/seu-repositorio.git
   git add .
   git commit -m "Initial deploy"
   git push -u origin main

3. Ative o GitHub Pages. No repositório, vá em Configurações > Pages. Em "Fonte", selecione o branch main e a pasta /root (ou /docs se o seu output de build for para lá). Clique em Salvar.
4. Aguarde a publicação. O GitHub vai fazer o build e publicar em 1 a 3 minutos. A URL do site (por exemplo, https://seu-usuario.github.io) aparecerá no painel de configurações do Pages.
5. Conecte um domínio personalizado (opcional). Adicione um arquivo CNAME na raiz do seu repositório contendo o nome do seu domínio (por exemplo, www.seusite.com.br). Em seguida, atualize seu provedor de DNS para apontar um registro CNAME para seu-usuario.github.io. O GitHub vai provisionar o certificado SSL automaticamente em alguns minutos.

Passo a passo: como publicar no Cloudflare Pages

1. Crie uma conta ou faça login no Cloudflare. Acesse pages.cloudflare.com e conecte sua conta do GitHub ou GitLab.
2. Crie um novo projeto. Clique em "Criar um projeto" e depois em "Conectar ao Git". Selecione seu repositório na lista.
3. Configure as opções de build. Se o seu site é HTML puro, deixe o comando de build em branco e defina o diretório de saída como / ou onde estiver o seu index.html. Para Hugo, defina o comando de build como hugo e a saída como public. Para Jekyll, use jekyll build e a saída como _site.
4. Publique. Clique em "Salvar e publicar". O Cloudflare vai clonar o repositório, executar o build e publicar na rede de edge global. Seu site recebe imediatamente um subdomínio *.pages.dev.
5. Adicione um domínio personalizado. No painel do projeto, vá em "Domínios personalizados" e informe o seu domínio. Se ele já for gerenciado pelo Cloudflare DNS, a configuração é feita com um clique. Caso contrário, você precisará adicionar um registro CNAME no seu registrador apontando para o endereço *.pages.dev.

Cada git push subsequente para o branch principal vai acionar uma republicação automática. O Cloudflare também cria publicações de pré-visualização para pull requests, o que é útil para revisar mudanças antes de colocá-las em produção.

Como adicionar um formulário de contato ao seu site estático

É aqui que a maioria dos guias para, e onde a maioria das pessoas trava. Um formulário de contato em um site estático não consegue enviar dados para si mesmo - não há servidor ouvindo as requisições. Você tem três opções realistas:

• Um serviço de backend para formulários (recomendado): você aponta o atributo action do seu formulário para um endpoint de terceiros que recebe o envio, valida os dados e os encaminha para o seu e-mail.
• Uma função serverless: você escreve uma pequena função (Cloudflare Workers, AWS Lambda) que processa o formulário. Funciona, mas exige código e manutenção contínua.
• JavaScript fetch(): você usa a fetch API do navegador para enviar os dados do formulário para um endpoint de backend. Veja nosso guia sobre como enviar dados de formulário HTML com JavaScript fetch() para os detalhes técnicos.

O caminho mais rápido para um formulário funcional é usar um serviço dedicado. Veja um exemplo concreto usando o Sendform:

Exemplo prático: um formulário de contato funcionando em 5 minutos

Imagine que você tem um site de portfólio publicado no GitHub Pages. Você quer que os visitantes possam enviar uma mensagem, e quer que essas mensagens cheguem na sua caixa de entrada. Veja o HTML completo:

<form action="https://sendform.io/f/SEU_FORM_ID" method="POST">
  <label for="name">Seu nome</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Seu e-mail</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Mensagem</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Enviar mensagem</button>
</form>

É só isso. Você substitui SEU_FORM_ID pelo ID do seu painel no Sendform, e cada envio é encaminhado por e-mail para o endereço que você cadastrou. Sem código de backend, sem servidor, sem cobrança mensal de infraestrutura. Para padrões de UX mais avançados, incluindo páginas de redirecionamento após o envio e e-mails de confirmação, leia nosso guia sobre boas práticas para formulários em sites estáticos.

Se você estiver usando um construtor de sites junto com o seu site estático, também cobrimos o processo de integração em detalhes no nosso artigo sobre como integrar o Sendform com construtores de sites.

Erros comuns que você deve evitar

Depois de ajudar milhares de usuários a configurar hospedagem gratuita de sites estáticos, estes são os erros que causam mais frustração:

1. Esquecer a página 404

Tanto GitHub Pages quanto Cloudflare Pages exibem uma página de erro genérica quando uma rota não é encontrada. Crie um arquivo 404.html personalizado no diretório raiz. Isso mantém os usuários no seu site e preserva a experiência da sua marca.

2. Fazer commit de segredos em um repositório público

Chaves de API, segredos de endpoints de formulários e endereços de e-mail jamais devem ficar em um repositório público do GitHub. Use variáveis de ambiente no Cloudflare Pages, ou referencie um arquivo de configuração privado listado no .gitignore.

3. Criar um formulário sem um plano de backend

Este é o erro mais comum. Desenvolvedores criam um formulário de contato bonito, fazem push para o GitHub Pages e descobrem no dia do lançamento que o formulário falha silenciosamente. Defina o backend do formulário antes de escrever uma única tag <input>. Ferramentas como o Sendform permitem que você configure um formulário de contato que envia direto para o e-mail sem nenhum código, eliminando completamente o problema do backend.

4. Ignorar problemas de cache do build

Se o seu site não está atualizando após um push, o cache do CDN pode estar servindo arquivos desatualizados. O Cloudflare Pages limpa o cache automaticamente a cada publicação. O GitHub Pages é mais lento para propagar mudanças; aguarde até 10 minutos, ou adicione uma query string nas URLs dos seus assets durante os testes.

5. Usar caminhos relativos de forma incorreta

Se o seu site no GitHub Pages fica em usuario.github.io/nome-do-projeto/ (um subdiretório), todos os caminhos de assets precisam considerar esse prefixo. Um link para /styles.css vai quebrar. Use caminhos relativos (./styles.css) ou configure o parâmetro baseURL do seu gerador de sites estáticos para corresponder ao subdiretório.

6. Ignorar a automação do fluxo de trabalho dos formulários

Depois que seu formulário começar a receber envios, você pode fazer muito mais do que simplesmente receber e-mails. O Sendform suporta webhooks e integrações que permitem rotear envios automaticamente para o Slack, um CRM ou uma planilha. Nosso guia sobre como automatizar fluxos de trabalho de formulários com webhooks e APIs mostra exatamente como fazer isso sem escrever código de backend.

Conclusão

A hospedagem gratuita de sites estáticos nunca foi tão poderosa. GitHub Pages é ideal para equipes já integradas ao ecossistema do GitHub, enquanto Cloudflare Pages oferece melhor desempenho global e um plano gratuito mais generoso. O verdadeiro desafio não é a hospedagem em si - são os recursos dinâmicos, especialmente os formulários de contato, que costumam travar as pessoas. Ao combinar qualquer uma das plataformas com um serviço dedicado de formulários, você obtém um site profissional e totalmente funcional com custo zero de infraestrutura. Comece com um dos guias de plataforma acima, coloque seu site no ar e depois conecte seu formulário de contato usando o Sendform para receber envios de forma confiável desde o primeiro dia.

Adicione um formulário de contato ao seu site estático em minutos

Use o Sendform para coletar envios de formulários em qualquer site estático hospedado no GitHub Pages ou Cloudflare Pages. Sem código de backend, sem configuração de servidor, sem complicação. Basta apontar o atributo action do seu formulário para o seu endpoint e pronto.

Comece gratuitamente no Sendform.net →

Perguntas frequentes