Como hospedar um site: guia para iniciantes

Um site na sua máquina só existe para você. Hospedar é colocar os arquivos dele em um computador conectado à internet o tempo todo, chamado servidor, que responde quando alguém digita o endereço. O resto (domínio, HTTPS, deploy) são camadas em volta dessa ideia.

O caminho mais curto para quem está começando tem cinco etapas: criar o site, gerar os arquivos finais, publicar, ligar um domínio e conferir. Os exemplos usam um site estático, que cobre portfólio, blog, documentação e páginas de empresa.

O que você precisa para hospedar um site?#

Três peças, todas separadas:

1. Os arquivos do site. HTML, CSS, JavaScript e imagens.
2. Um servidor que os entrega. É a hospedagem. Ele precisa ficar ligado e conectado.
3. Um endereço. Pode ser o subdomínio que a hospedagem fornece ou um domínio seu. O domínio é o nome legível que aponta para o servidor, em vez do endereço IP, difícil de lembrar (MDN).

Pelo lado do navegador, o fluxo é simples: ele pede uma URL e o servidor responde com um arquivo. Quando o servidor só lê e devolve arquivos prontos, o site é estático. Quando ele roda código e consulta banco a cada visita, é dinâmico. A diferença está explicada em o que é um site estático.

Que tipo de hospedagem escolher?#

• Site estático: só precisa de um servidor de arquivos. É o mais simples e rápido de colocar no ar. Serve para a maioria dos sites que não têm login nem banco de dados no servidor.
• Site dinâmico (Node.js, Python, PHP): precisa de um servidor que execute seu código, com RAM e, muitas vezes, um banco de dados.
• Construtores de site (Wix, WordPress.com): você não lida com arquivos nem servidor, mas aceita os limites da ferramenta.

Se você está começando e não tem motivo para o contrário, comece pelo estático. Você pode migrar depois. Para comparar preços, veja quanto custa hospedar um site.

Como criar e gerar os arquivos do site?#

Você pode escrever um index.html à mão. Ele já é um site completo:

<!doctype html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Meu primeiro site</title>
  </head>
  <body>
    <h1>Olá, mundo!</h1>
  </body>
</html>

Se preferir uma ferramenta moderna, o Vite cria um projeto base. Ele pede uma versão recente do Node.js, com o mínimo indicado na documentação do Vite:

npm create vite@latest meu-site -- --template vanilla --no-immediate
cd meu-site
npm install
npm run build
npm run preview

O --template vanilla escolhe o modelo com HTML, CSS e JavaScript puros, e o --no-immediate impede a ferramenta de instalar e iniciar o servidor de desenvolvimento sozinha, para você rodar cada passo. Sem essas flags, o create vite faz as mesmas perguntas no terminal.

O build gera a pasta dist com os arquivos finais, prontos para publicar (build do Vite). O preview serve essa pasta localmente para você conferir antes de enviar. Publique o conteúdo de dist, não a pasta do código-fonte.

Como publicar os arquivos?#

Os caminhos mais comuns:

• Upload manual (ZIP ou painel): envie a pasta pelo painel da hospedagem. Bom para o primeiro site.
• Git: você conecta o repositório e cada push faz um novo deploy. É o fluxo ideal quando o site muda com frequência. Veja o que é deploy.
• FTP/SFTP: comum em hospedagem compartilhada tradicional.

Quando terminar, a hospedagem mostra uma URL provisória. Abra no navegador e confirme que a página carrega antes de mexer em domínio.

Como conectar um domínio ao site?#

1. Registre o domínio em um registrador. Você paga pelo direito de uso por um ou mais anos e renova quando vencer (MDN).
2. Crie os registros DNS que a hospedagem indicar, no painel do registrador. Em geral é um registro CNAME para subdomínios (www) ou A/ALIAS para o domínio raiz.
3. Espere a propagação. Pode levar de minutos a algumas horas.

O passo a passo detalhado está em como apontar um domínio para sua aplicação.

E o HTTPS?#

Sem HTTPS, os navegadores costumam avisar que o site não é seguro e o tráfego viaja sem criptografia. Hoje a maioria das hospedagens emite o certificado sozinha depois que o domínio aponta corretamente. Se a sua não faz isso, use um certificado do Let's Encrypt (veja como o Let's Encrypt funciona). Não deixe o site só em HTTP.

Como verificar que o site está no ar?#

Teste no terminal, para ver o que o servidor realmente devolve:

curl -I https://meusite.com.br

Procure um status 200 na primeira linha (por exemplo HTTP/2 200; HTTP/1.1 200 também vale). Depois confira no celular, fora do seu Wi-Fi, e abra uma página inexistente para ver se o erro 404 aparece de forma correta.

Quais são os erros comuns?#

• 404 na página inicial: você publicou a pasta errada. O index.html precisa estar na raiz do que foi enviado.
• CSS e imagens quebrados: caminhos absolutos (/img/foto.png) em um site que roda em subpasta, ou arquivos que não foram enviados.
• Domínio não abre: o registro DNS está errado ou ainda não propagou. Confira o valor exato que a hospedagem pediu.
• Aviso de certificado: o domínio ainda não aponta para o servidor, então o certificado não foi emitido.
• Alterou o código e nada mudou: você esqueceu de rodar o build de novo ou de fazer novo deploy, ou o navegador está com cache.

Como fazer isso na Square Cloud#

A Square Cloud é hospedagem self-service: você faz o deploy e controla tudo. Entre diversos runtimes, como Node.js, Python e Go, há um para sites estáticos: o nginx fica sempre no ar servindo os seus arquivos, nenhum código seu roda no servidor, e cada atualização entra no ar na hora. Veja os runtimes disponíveis hoje em Runtimes. Você envia o conteúdo do site (a pasta dist) por ZIP no painel, pela CLI, pelo GitHub ou pela extensão do VS Code. O arquivo squarecloud.app é opcional: o painel gera a configuração no deploy, ou você pode escrevê-lo na raiz do projeto.

Toda aplicação web ganha um subdomínio *.squareweb.app com HTTPS em qualquer plano. Domínio personalizado está disponível a partir do plano Standard: você cria no seu registrador os registros DNS mostrados no painel e o TLS é automático. O domínio continua registrado em seu nome, no seu registrador.

O Hobby custa a partir de R$ 12,49 por mês, e uma aplicação web precisa de pelo menos 512 MB da RAM do plano. Todos os planos incluem CDN global, tráfego ilimitado (política de uso justo) e analytics web sem cookies. Os detalhes estão na página de sites.