Site estático pode ter formulário, login ou carrinho?

Pode, se essa parte for feita por JavaScript no navegador chamando uma API externa (sua ou de terceiros). O site em si continua sendo arquivos; quem guarda dados e valida senha é a API.

Site estático é a mesma coisa que site feito só com HTML?

Não. Estático descreve como o site é entregue: arquivos prontos, sem processamento por visitante. Esses arquivos podem ser escritos à mão ou gerados por React, Astro, Hugo, Next.js e outras ferramentas.

Um site estático é mais rápido que um dinâmico?

Costuma ser, porque o servidor só lê e devolve um arquivo, sem consultar banco nem montar a página. Ainda assim, o tamanho dos arquivos e das imagens pesa muito para o usuário.

Como atualizo o conteúdo de um site estático?

Você altera a fonte (texto, Markdown, dados), roda o build de novo e publica os arquivos gerados. Assim que os arquivos novos chegam ao servidor, o próximo visitante já recebe a versão nova, sem reiniciar nada.

O que é um site estático e onde hospedar

Quando você abre uma página, o navegador pede um arquivo e o servidor responde. A diferença entre site estático e dinâmico está no que o servidor faz entre o pedido e a resposta. No estático, ele só lê um arquivo do disco e devolve. No dinâmico, ele roda código, consulta um banco e monta a página na hora.

Essa diferença muda custo, velocidade, segurança e o tipo de hospedagem que você precisa. Para portfólio, blog, documentação e página institucional, o estático costuma ser a escolha mais simples.

Como um site estático funciona por dentro?#

Segundo a documentação da MDN, o servidor de um site estático recebe um GET, busca o documento no sistema de arquivos e devolve com status 200 OK. Se o arquivo não existe, responde 404. Ele não muda a resposta conforme dados do pedido, como parâmetros de URL ou cookies, e não guarda estado entre um pedido e outro.

Na prática, o site é uma pasta:

text

dist/
  index.html
  sobre/index.html
  assets/app.3f9c1a.js
  assets/style.82b7d0.css
  imagens/logo.svg

O pedido para /sobre/ vira a leitura de sobre/index.html. Um servidor web (como o nginx) fica no ar e só entrega o arquivo. Nenhum código seu roda no servidor, então não há linguagem de back-end, banco de dados ou processo da sua aplicação para manter.

Qual a diferença para um site dinâmico?#

Um site dinâmico gera a resposta conforme o pedido: quem é o usuário, qual produto, que horas são. O servidor busca dados num banco e preenche um template.

	Estático	Dinâmico
Resposta	Arquivo pronto, igual para todos	Gerada a cada pedido
Precisa de back-end e banco	Não	Sim
Conteúdo muda	Só com novo build e deploy	A qualquer momento
Superfície de ataque	Pequena (sem código no servidor)	Maior (código, banco, sessões)
Exemplos	Blog, docs, landing page	Loja, rede social, painel

CSS, JavaScript e imagens são servidos do mesmo jeito nos dois. Um site dinâmico também tem arquivos estáticos; o que o define é a página gerada por pedido.

Estático quer dizer sem interatividade?#

Não. "Estático" é sobre o servidor, não sobre o navegador. O JavaScript que roda no navegador pode animar, filtrar listas, abrir modais e chamar APIs. Um formulário de contato, por exemplo, pode enviar os dados com fetch para uma API sua ou de um serviço de terceiros.

Muitos frameworks também exportam o projeto como arquivos estáticos. O Next.js, com output: 'export' no next.config.js, gera uma pasta out com HTML, CSS e JS (documentação). Nesse modo, recursos que dependem de servidor não funcionam: Server Actions, cookies, redirects e headers do next.config, Incremental Static Regeneration e rotas dinâmicas sem generateStaticParams(). O Vite, com vite build, gera a pasta dist (documentação).

Como gerar e publicar um site estático?#

Você pode escrever HTML e CSS à mão ou usar um gerador (Astro, Hugo, Eleventy, Vite, Next.js e outros). O fluxo é o mesmo:

Escreva o conteúdo e o código-fonte.
Rode o build, que produz a pasta final (dist, out, public, dependendo da ferramenta).
Publique o conteúdo dessa pasta num servidor que sirva arquivos. Isso é o deploy.

Com Vite, por exemplo:

bash

npm create vite@latest meu-site -- --template vanilla --no-immediate
cd meu-site
npm install
npm run build        # gera a pasta dist/
npx vite preview     # serve dist/ localmente para conferir

Antes de publicar, abra o preview e teste os links. Caminhos absolutos como /assets/app.js quebram se o site for servido de uma subpasta; nesse caso ajuste a opção base do Vite.

Como o cache funciona num site estático?#

Como os arquivos mudam só no deploy, o cache é o grande ganho de velocidade. A MDN descreve o padrão de "cache busting" (Cache-Control): colocar um hash no nome do arquivo (app.3f9c1a.js), nunca alterar esse arquivo e publicar mudanças com um nome novo. Assim dá para guardar por um ano:

http

Cache-Control: max-age=31536000, immutable

Esse header vale para os arquivos de /assets/. O index.html fica com Cache-Control: no-cache, para que o visitante sempre receba a versão nova, que aponta para os arquivos com hash novo.

Geradores como o Vite já colocam o hash no nome dos arquivos de assets. Os headers, você configura no servidor ou na hospedagem.

Quando um site estático não basta?#

Você precisa de um servidor com código quando o conteúdo depende de cada visitante ou muda o tempo todo e precisa aparecer na hora:

login com sessão e páginas personalizadas por usuário;
carrinho, pagamento e painel administrativo;
páginas geradas a partir de uma busca livre;
recursos em tempo real, como chat com WebSocket.

Um meio-termo comum: site estático no front-end e uma API separada para a parte dinâmica. O site continua leve e a API cuida de dados e autenticação. Se essa API crescer, vale distribuir a carga com um load balancer.

Quais termos aparecem junto com "site estático"?#

SSG (static site generation): gerar os HTML no build, não a cada pedido.
SPA: aplicação de página única que carrega JavaScript e monta telas no navegador; pode ser servida como arquivos estáticos.
Jamstack: nome de mercado para sites estáticos que usam APIs para o que é dinâmico.
CDN: rede que guarda cópias dos arquivos em vários lugares, perto do visitante.

Para ter HTTPS e um endereço próprio, você precisa de um certificado (como o Let's Encrypt funciona) e de um registro no DNS (como apontar um domínio).

Como fazer isso na Square Cloud#

Um site estático só precisa de um servidor web que fique no ar e entregue a pasta do build. Na Square Cloud, entre diversos runtimes, como Node.js, Python e Go, há um para sites estáticos: nele o nginx fica sempre rodando e servindo os seus arquivos, e nenhum código seu executa no servidor. Você envia a pasta (dist, out) por ZIP no painel, pela CLI, pelo GitHub ou pela extensão do VS Code. O arquivo squarecloud.app é opcional: o painel o gera no deploy, ou você o escreve na raiz do projeto. Veja os runtimes disponíveis hoje em Runtimes.

Atualizar o site é trocar arquivos. Um novo commit, um upload ou uma edição no gerenciador de arquivos entram no ar na hora, sem rebuild nem restart. Numa SPA, renomeie o index.html do build para vite.html: o runtime responde com ele a todo caminho que não é arquivo, e sem ele os caminhos desconhecidos recebem o seu 404.html.

Sem código seu para executar, o site costuma caber no mínimo de uma aplicação web, 512 MB da RAM do plano. O Hobby, a partir de R$ 12,49 por mês, já atende sites e traz subdomínio *.squareweb.app com HTTPS, CDN global e tráfego ilimitado (política de uso justo). Domínio próprio começa no Standard: você cria no seu registrador os registros DNS indicados no painel, e o TLS é automático. Comece pelo runtime de sites estáticos.