</> HTML5Advent
ENFRESDEITPT

// hosting · Web Platform Advent #12

Hospedagem de site estático: como fazer deploy de um site Astro, Vite ou HTML puro

O que é hospedagem estática, como uma CDN serve sua build e como fazer deploy de um site Astro, Vite ou JAMstack com domínio personalizado e HTTPS gratuito.

A mão de um técnico fazendo manutenção em um servidor iluminado de azul em um rack de data center

Um site estático é um conjunto de arquivos pré-compilados — HTML, CSS, JavaScript e ativos — que um servidor pode entregar ao navegador como estão, sem código sendo executado por requisição. Ferramentas como Astro, Vite, Eleventy ou uma pasta HTML escrita à mão produzem todas esse tipo de saída. Hospedá-lo é mais simples, mais barato e mais rápido do que hospedar um app dinâmico, porque não há nada para executar no lado do servidor.

O que "hospedagem estática" realmente significa

Com a hospedagem estática, você executa uma etapa de build localmente ou em CI, e ela emite uma pasta de arquivos simples (muitas vezes chamada de dist ou _site). A única tarefa do host é armazenar esses arquivos e servi-los por HTTP. Não há PHP, nem processo Node, nem banco de dados — apenas arquivos. Isso tem três consequências diretas:

  • Velocidade — os arquivos podem ser cacheados de forma agressiva e servidos a partir da edge, perto do visitante.
  • Custo — nenhum servidor sempre ligado para pagar; muitos provedores oferecem um plano gratuito generoso.
  • Confiabilidade — menos partes móveis significam menos coisas que podem quebrar sob carga.

Construindo sua pasta de saída

Todo framework estático expõe um comando de build. O resultado é a pasta que você envia ou para a qual aponta seu host:

# Astro
npm run build        # outputs to ./dist

# Vite
npm run build        # outputs to ./dist

# Plain HTML
# no build step — your folder of .html files is already the output

Para um site HTML puro, a "build" é apenas a pasta que você já tem. Para Astro ou Vite, é o diretório dist que é servido.

Uma fileira de servidores pretos montados em rack em um data center
Por trás de todo site estático há uma infraestrutura física — racks de servidores e nós de edge da CDN que armazenam e distribuem seus arquivos compilados.

Onde hospedar: CDN vs hospedagem estática clássica

Você tem duas grandes famílias de opções:

Plataformas de edge / CDN

Essas compilam seu projeto a partir de um repositório Git e distribuem a saída por uma content delivery network. Uma CDN armazena cópias dos seus arquivos em muitos locais ao redor do mundo, para que um visitante seja atendido a partir de um nó próximo a ele. Isso minimiza a latência e absorve picos de tráfego. Os deploys costumam ser disparados por um git push.

Hospedagem clássica / por object storage

Você também pode servir um site estático a partir de um host web tradicional ou de object storage com uma CDN na frente. É uma boa opção quando você já tem hospedagem para outros projetos, ou quando prefere gerenciar você mesmo o envio via FTP/SSH ou um script de deploy.

Conectando um domínio personalizado

Qualquer que seja o host escolhido, a configuração do domínio é, em princípio, a mesma. Você aponta os registros DNS do seu domínio para o host:

  • Um registro A (ou AAAA) apontando o domínio apex (example.com) para o IP do host, ou
  • Um registro CNAME apontando um subdomínio (www.example.com) para o hostname fornecido pelo host.

Muitas plataformas também suportam delegação de nameservers, onde você entrega o gerenciamento de DNS inteiramente ao host. Após a propagação dos registros, o host serve seu site no seu próprio domínio.

HTTPS de graça

O HTTPS não é mais opcional — os navegadores sinalizam o HTTP simples como "não seguro", e muitas APIs da plataforma web só funcionam em um contexto seguro. A boa notícia: praticamente todo host estático moderno emite e renova certificados TLS para você automaticamente, geralmente via Let's Encrypt. Uma vez conectado o seu domínio, o certificado é provisionado sem nenhuma etapa manual, e as renovações acontecem por conta própria.

Referência rápida

EtapaO que você faz
BuildExecute npm run build (Astro/Vite) ou use sua pasta HTML
SaídaSirva a pasta dist / _site
HostEscolha uma plataforma edge/CDN ou um host web compatível com estático
DomínioAponte os registros A/AAAA ou CNAME para o host
HTTPSCertificado TLS automático, sem configuração manual

O propósito da hospedagem estática é justamente sair do seu caminho: você compila uma vez, faz push, e os arquivos são servidos rapidamente a partir da edge. Reserve a hospedagem dinâmica para as partes do seu projeto que realmente precisam de lógica no lado do servidor — e mantenha o frontend estático em uma infraestrutura construída para entregar arquivos rapidamente.