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. As opções de plano gratuito evoluíram 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 integração de um formulário de contato funcional, com exemplos concretos e as limitações reais que você precisa conhecer antes de decidir.

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

Um site estático serve arquivos HTML, CSS e JavaScript pré-compilados diretamente ao navegador. Não há PHP, nenhum runtime Node.js e nenhuma consulta a 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 para travar, corrigir ou escalar.

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 nó de edge CDN, frequentemente em menos de 100ms globalmente.
• Segurança: Sem runtime no servidor, a superfície de ataque é drasticamente reduzida.
• 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 o 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 seguimos os passos de configuração.

Comparativo de plataformas: GitHub Pages vs Cloudflare Pages

Resumindo: Se o seu público é global e você quer o menor tempo de carregamento 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: publicar no GitHub Pages

Este exemplo assume que você tem um site HTML/CSS simples 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 your-username.github.io se quiser que ele seja servido no domínio raiz, ou qualquer outro nome se preferir um caminho de subdiretório.
2. Faça push dos arquivos do seu site. Na pasta local do seu projeto, execute:

   git init
   git remote add origin https://github.com/your-username/your-repo.git
   git add .
   git commit -m "Initial deploy"
   git push -u origin main

3. Ative o GitHub Pages. No repositório, vá em Settings > Pages. Em "Source", selecione o branch main e a pasta /root (ou /docs se o seu output de build for gerado lá). Clique em Save.
4. Aguarde o deploy. O GitHub vai compilar e publicar o site em 1 a 3 minutos. A URL do site (por exemplo, https://your-username.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.yoursite.com). Em seguida, atualize seu provedor de DNS para apontar um registro CNAME para your-username.github.io. O GitHub provisionará o certificado SSL automaticamente em poucos minutos.

Passo a passo: 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 "Create a project" e depois em "Connect to 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. Faça o deploy. Clique em "Save and Deploy". O Cloudflare vai clonar seu 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 seu projeto, vá em "Custom domains" e insira 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 aciona um novo deploy automático. O Cloudflare também cria deploys de pré-visualização para pull requests, o que é muito útil para revisar alterações 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 escutando. 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 envia por e-mail para você.
• 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 API fetch 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 concreto: um formulário de contato funcionando em 5 minutos

Antes de adicionar qualquer código ao seu site, você precisa criar uma conta no Sendform e configurar um endpoint de formulário. O processo leva cerca de dois minutos:

1. Cadastre-se no Sendform.net. Crie uma conta gratuita - sem necessidade de cartão de crédito. Após o cadastro, você terá um projeto padrão pronto para uso.
2. Crie um formulário. No seu painel, clique em "New Form". Dê um nome, selecione um projeto e insira o endereço de e-mail onde deseja receber os envios. O Sendform verificará esse endereço antes de ativar o endpoint.
3. Copie a URL do seu endpoint. Após criar o formulário, você verá uma URL de endpoint única no formato https://sendform.net/!your-form-id. Copie-a - é ela que você vai colar no seu HTML.

Com o endpoint em mãos, adicione o seguinte HTML ao seu site estático:

<form action="https://sendform.net/!your-form-id" method="POST">
  <label for="name">Your Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Your Email</label>
  <input type="email" id="email" name="email" required>

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

  <button type="submit">Send Message</button>
</form>

Substitua your-form-id pelo ID exibido no seu painel do Sendform. Cada envio será encaminhado por e-mail para o endereço que você confirmou durante a configuração. Sem código no backend, sem servidor, sem mensalidade 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 abordamos o processo de integração em detalhes no nosso artigo sobre como integrar o Sendform com seu construtor 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 exibirão uma página de erro genérica se uma rota não for encontrada. Crie um arquivo 404.html personalizado no seu diretório raiz. Isso mantém os usuários no seu site e preserva a experiência deles.

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

Chaves de API, segredos de endpoint de formulários e endereços de e-mail nunca 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 seu backend de formulários antes de escrever uma única tag <input>. Ferramentas como o Sendform permitem configurar um formulário de contato que envia direto para o e-mail sem nenhum código, o que elimina completamente o problema do backend.

4. Ignorar problemas de cache de 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 automaticamente o cache a cada deploy. O GitHub Pages é mais lento para propagar as alterações; aguarde até 10 minutos, ou adicione uma query string às URLs dos seus assets durante os testes.

5. Usar caminhos relativos de forma incorreta

Se o seu site no GitHub Pages estiver em username.github.io/project-name/ (um subdiretório), todos os caminhos de assets devem levar em conta esse prefixo. Um link para /styles.css vai quebrar. Use caminhos relativos (./styles.css) ou configure a opção 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 estiver coletando envios, você pode fazer muito mais do que apenas 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 no backend.

Conclusão

A hospedagem gratuita de sites estáticos nunca foi tão poderosa. GitHub Pages é ideal para equipes que já estão integradas ao ecossistema 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 complicar as coisas. Ao combinar qualquer uma dessas 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 integre seu formulário de contato usando o Sendform para receber os 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 no 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