Como criar sites modernos sem WordPress: HTML puro, GitHub e Cloudflare

Por que repensar o jeito tradicional de criar sites

O jeito tradicional de criar site no Brasil passou a ser instalar o WordPress numa hospedagem e escolher um tema com plugins. Funciona, e milhões de sites rodam assim, como a própria página oficial do WordPress diz. O problema aparece depois, na manutenção.

O WordPress roda em PHP e guarda o conteúdo num banco de dados. A página de requisitos do WordPress.org recomenda PHP 8.3 ou mais novo e MySQL 8.0 ou MariaDB 10.11 ou mais novos. Cada uma dessas peças precisa de atualização. Some a isso o núcleo do WordPress, o tema e cada plugin.

A documentação de proteção do WordPress é clara: versões antigas não recebem correção de segurança, e plugins desatualizados estão entre os alvos comuns de ataque. Ela recomenda manter tudo atualizado e apagar plugins que você não usa. Para uma padaria, um consultório ou um eletricista, essa rotina pesa.

O site de um pequeno negócio costuma mudar pouco: telefone, serviços, endereço, fotos e algumas páginas. Para esse perfil, montar a página a cada visita no servidor é trabalho que não precisa ser feito. É aqui que entra o site estático.

O que é criar um site sem WordPress

Criar sem WordPress significa entregar ao navegador arquivos prontos, sem um sistema montando a página na hora. A MDN explica que os sites são feitos principalmente de HTML, CSS e JavaScript, que o navegador interpreta e monta na tela. Um site estático é exatamente isso, sem camada extra.

Você escreve os arquivos no computador, testa no navegador e envia para um serviço que entrega esses arquivos ao visitante. Não há painel de administração para invadir nem banco de dados para vazar. O guia sobre o que são sites estáticos explica a arquitetura com calma.

Isso não quer dizer site parado. Você pode ter formulário, mapa, agenda e botão de WhatsApp. A diferença é que as partes dinâmicas ficam em serviços pequenos e separados, e não num sistema único que faz tudo.

HTML, CSS e JavaScript: o papel de cada um

Cada linguagem tem uma função clara no site. Entender essa divisão ajuda a organizar o projeto desde o primeiro arquivo.

Um site de empresa pode começar com um único arquivo index.html. Veja um modelo mínimo:

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Padaria do Bairro | Pães artesanais</title>
  <meta name="description" content="Pães artesanais feitos todo dia.">
  <link rel="stylesheet" href="estilo.css">
</head>
<body>
  <header><h1>Padaria do Bairro</h1></header>
  <main>
    <p>Pães artesanais saindo do forno às 6h.</p>
    <a href="contato.html">Fale com a gente</a>
  </main>
</body>
</html>

A linha do viewport faz o site se ajustar ao celular. O title e a description aparecem no Google. O guia de site responsivo e acessível com HTML e CSS mostra como cuidar do layout em telas pequenas.

A arquitetura GitHub + Cloudflare

A arquitetura do Web livre tem três peças: o código, o repositório e a rede que entrega o site. Cada uma faz uma coisa só.

O GitHub Docs define o Git como um sistema de controle de versões que acompanha as mudanças em arquivos. O repositório é o projeto guardado no GitHub. Cada commit é um registro de alteração, com data e descrição, que você pode desfazer depois.

A Cloudflare Pages se liga ao repositório. Segundo a documentação da Cloudflare, a integração com Git faz builds e deploys automáticos a cada envio de mudança. Deploy é o nome da publicação de uma versão nova.

A Cloudflare funciona como uma CDN, rede de entrega de conteúdo: ela guarda cópias do site em servidores espalhados e entrega a partir do mais próximo do visitante. O guia como usar o GitHub para criar sites detalha o lado do repositório.

Como criar um site do zero em 7 passos

Você pode montar o primeiro site em uma tarde, mesmo sem experiência. Siga a ordem abaixo.

1. Defina as páginas: início, serviços, sobre e contato costumam bastar para um negócio local.
2. Crie uma pasta no computador com index.html, estilo.css e uma pasta img.
3. Escreva o HTML de cada página, com título e descrição próprios.
4. Escreva o CSS, pensando primeiro na tela do celular.
5. Abra os arquivos no navegador e confira links, imagens e textos.
6. Crie um repositório no GitHub e envie a pasta com o primeiro commit.
7. Conecte o repositório à Cloudflare Pages e faça o primeiro deploy.

O passo a passo detalhado, com o código de cada página, está em como criar um site em HTML puro do zero. Se você quer entender o que mais precisa antes de começar, veja o que é preciso para criar um site.

Como publicar na Cloudflare Pages

A publicação na Cloudflare Pages começa no painel da Cloudflare, em Workers & Pages. Você escolhe conectar ao Git, autoriza o GitHub e seleciona o repositório. A documentação diz que repositórios públicos e privados funcionam.

Para um site em HTML puro, sem framework, a Cloudflare recomenda usar exit 0 como comando de build. No diretório de saída, você informa a pasta onde está o index.html. Se o endereço pages.dev der erro 404, confira se existe um index.html na raiz.

Depois do primeiro deploy, o site ganha um endereço próprio no subdomínio pages.dev. A cada commit no ramo principal, a versão nova vai ao ar. Os outros ramos viram prévias, úteis para testar uma mudança antes de publicar.

O plano Free tem limites, segundo a página oficial de limites do Pages:

Para um site institucional, esses números costumam sobrar. O guia Cloudflare Pages: como hospedar e publicar um site grátis mostra as telas e as configurações. Quem está em dúvida entre as duas opções gratuitas mais conhecidas pode ler GitHub Pages ou Cloudflare Pages.

Domínio, DNS e HTTPS

O domínio é o endereço que as pessoas digitam, como padariadobairro.com.br. A MDN explica que você não compra o domínio para sempre: paga pelo direito de uso por um ou mais anos, com prioridade na renovação. Domínios .br são registrados pelo Registro.br ou por empresas parceiras.

O DNS, sistema de nomes de domínio, funciona como uma agenda que troca o nome pelo endereço IP do servidor. Ligar o domínio à Cloudflare Pages depende do tipo de endereço:

1. Subdomínio (como loja.seudominio.com.br): você cria um registro CNAME apontando para o endereço pages.dev do projeto.
2. Domínio raiz (como seudominio.com.br): o domínio precisa virar uma zona na Cloudflare, com os servidores de nome trocados no registrador.
3. Ordem certa: a documentação pede para adicionar o domínio no painel do Pages antes de criar o CNAME, para evitar erro 522.

O HTTPS, que coloca o cadeado no navegador, vem do certificado SSL. A Cloudflare oferece o Universal SSL, certificado gratuito para domínios ativos na plataforma, disponível também no plano Free. O guia como configurar um domínio próprio na Cloudflare mostra cada tela. Para entender o certificado em si, leia certificado SSL: o que é e para que serve.

Por que o site estático é rápido e seguro

O site estático é rápido porque o arquivo já está pronto quando o visitante pede. Não há consulta ao banco nem processamento de PHP no caminho. Com a CDN, o arquivo sai de um servidor perto da pessoa.

O Google mede a experiência da página com os Core Web Vitals, descritos no web.dev:

O web.dev recomenda medir no percentil 75 das visitas, separando celular e computador. HTML puro facilita chegar nesses números, mas não faz milagre: imagem pesada e fonte demais atrasam qualquer site. O guia como criar sites rápidos com HTML, CSS e Cloudflare mostra os ajustes.

Na segurança, a vantagem vem da superfície menor. Sem painel de login, sem plugin e sem banco, sobram menos portas. Mas o site estático também exige cuidado: chave de API exposta no código, formulário sem proteção contra spam e dependência desatualizada são riscos reais. O guia site em HTML puro é mais seguro? separa o que é vantagem do que ainda é responsabilidade sua.

Sem banco de dados: o que muda

Sem banco de dados, o conteúdo mora nos próprios arquivos. Um texto novo é um arquivo novo ou uma edição num arquivo existente, registrada num commit.

Isso muda três coisas no dia a dia. O backup passa a ser o próprio repositório, com todo o histórico. A edição acontece no código ou num editor de Markdown, e não num painel. E a escala fica mais simples, porque entregar arquivo pronto exige pouco do servidor.

A troca tem custo: quem não conhece código precisa de ajuda para editar. Para sites que mudam pouco, isso raramente pesa. O guia como criar sites profissionais sem banco de dados mostra como organizar conteúdo, cardápio e catálogo em arquivos.

Quando usar APIs, Pages Functions e Workers

As partes dinâmicas de um site estático ficam em funções pequenas na nuvem. A documentação da Cloudflare descreve o Pages Functions como uma forma de publicar código de servidor para ter funções dinâmicas sem manter um servidor dedicado. As funções rodam na rede da Cloudflare com o Cloudflare Workers.

Usos comuns citados pela própria documentação:

1. Receber e processar formulário de contato.
2. Conferir login para uma área restrita.
3. Aplicar regras antes de entregar a página, como redirecionamentos.

O plano gratuito do Workers permite 100 mil requisições por dia e 10 milissegundos de CPU por requisição, segundo a página de limites. Um formulário de contato de pequeno negócio fica longe disso. O guia funções dinâmicas com APIs e Cloudflare Workers traz exemplos de código.

Como migrar do WordPress

Migrar do WordPress para HTML puro vale quando o site tem conteúdo estável e a manutenção virou dor de cabeça. O cuidado central é não perder o que o site já tem no Google.

1. Liste todas as URLs atuais, inclusive as que recebem visitas e links de fora.
2. Exporte textos e imagens do WordPress.
3. Recrie as páginas em HTML, de preferência com um gerador de sites estáticos.
4. Mantenha os mesmos endereços ou crie redirecionamentos 301 para os novos.
5. Substitua formulários e funções de plugin por serviços equivalentes.
6. Publique na Cloudflare e aponte o domínio só depois de testar tudo.

Loja virtual e área de membros pedem análise antes, porque dependem de sistema. O passo a passo completo está em como migrar um site WordPress para HTML puro.

HTML puro ou WordPress: comparação honesta

Os dois caminhos funcionam. A escolha depende de quem edita, de quanto o site muda e de quais funções você precisa.

O WordPress faz sentido quando uma equipe sem conhecimento técnico publica todo dia, ou quando você precisa de uma função que só existe como plugin. É um software livre, sob licença GPL, e pode ser rápido e seguro quando bem cuidado.

Para site institucional, portfólio, cardápio e página de serviço, o HTML puro costuma entregar mais com menos manutenção. A comparação por critério está em WordPress ou HTML puro, e as outras opções estão em alternativas ao WordPress. Se a dúvida é com construtores visuais, veja Wix ou WordPress.

Como escalar: geradores estáticos e Eleventy

Escrever HTML à mão funciona bem até algumas dezenas de páginas. Depois, repetir o cabeçalho e o rodapé em cada arquivo vira trabalho. O gerador de sites estáticos resolve isso.

A MDN define o gerador de sites estáticos como um software que gera sites estáticos, formados por arquivos HTML, CSS e JavaScript. Você escreve o conteúdo em Markdown e o layout uma vez, e o gerador monta as páginas.

O Eleventy é um desses geradores. A documentação oficial lista suporte a HTML, Markdown, Nunjucks, Liquid, JavaScript e outros formatos. O resultado do build é uma pasta de arquivos estáticos, publicada na Cloudflare Pages do mesmo jeito que um site feito à mão. O guia geradores de sites estáticos e o Eleventy mostra a instalação.

Escalar também é cuidar de SEO desde a estrutura: títulos, descrições, sitemap, dados estruturados e links internos. Isso está em SEO para sites em HTML puro.

Quanto custa criar e manter

O custo de um site em HTML puro se concentra no domínio e no seu tempo. O GitHub tem conta gratuita e a Cloudflare Pages tem plano Free com os limites da tabela acima.

Compare com o WordPress, que precisa de hospedagem com PHP e banco de dados, e às vezes de tema e plugins pagos. A conta completa, item por item, está em quanto custa criar e manter um site com HTML, GitHub e Cloudflare.

O caminho mais fácil: a gente cria o seu site grátis

Nem todo mundo quer escrever HTML. Para isso existe a oferta do MundoBlá: a criação do site não é cobrada. A condição é contratar uma hospedagem de sites da HostGator em ciclo anual pelo link do MundoBlá e depois chamar a equipe no WhatsApp.

1. Contrate a hospedagem de sites da HostGator em ciclo anual, pelo link do MundoBlá.
2. Escolha o domínio do seu negócio na contratação. Os termos de serviço da HostGator dizem que o domínio grátis vale para os planos a partir do ciclo anual.
3. Chame no WhatsApp e conte como é o seu negócio.
4. A equipe cria o site em HTML puro, com o código guardado no GitHub.

O escopo do site é combinado no WhatsApp antes de começar. Onde ele vai ser publicado, na hospedagem contratada ou com a Cloudflare na frente, também se combina na conversa. Hospedagem e domínio são pagos por você direto à HostGator; confira o preço do dia no site dela, lembrando que a renovação costuma ter valor diferente do promocional.

Transparência: a gente ganha uma comissão da HostGator quando você contrata pelo link, sem custo extra para você. É por isso que a criação grátis só vale com a compra pelo link. Os detalhes estão em como funciona a oferta do site grátis.

Os 17 guias do Web livre

Cada guia abaixo aprofunda uma parte deste pilar. Use a tabela como índice.

Se você chegou aqui procurando a resposta para outra dúvida do dia a dia, o MundoBlá tem guias sobre quase tudo. A resposta completa sobre criação de sites reúne todas as páginas do Mundo, e a resposta passo a passo para publicar está no guia da Cloudflare Pages.

Em outros Mundos

Para aprender a linguagem por trás das páginas, visite o Mundo Programação. Para fazer o site aparecer no Google, o Mundo SEO tem os guias de otimização.