Quer colocar um site no ar de graça e receber um endereço que qualquer pessoa possa acessar? Neste tutorial você vai aprender como publicar um projeto HTML, CSS e JavaScript, React ou Vite usando GitHub + Vercel, mesmo que nunca tenha feito um deploy. Também mostramos como resolver o famoso erro 404 Not Found, conectar domínio próprio e atualizar o site sem reenviar arquivos manualmente.
Resposta rápida: coloque os arquivos no GitHub, entre na Vercel, escolha Add New → Project (ou New Project), importe o repositório, confira as configurações e clique em Deploy. A plataforma gera uma URL *.vercel.app. A opção gratuita Hobby é destinada a projetos pessoais e não comerciais.
O que você precisa para colocar um site no ar?
Para começar com o método deste artigo, você precisa apenas de um projeto com arquivos funcionais, uma conta gratuita no GitHub e outra na Vercel. Não é necessário contratar hospedagem tradicional para testar um site estático pessoal.
- Projeto: uma página em HTML/CSS/JS ou uma aplicação criada com React, Vue, Vite, Next.js e ferramentas semelhantes.
- GitHub: serviço para guardar seu código em um repositório e registrar as alterações.
- Vercel: serviço que recebe o repositório, prepara a publicação quando necessário e disponibiliza o endereço na internet.
Atenção à gratuidade: o plano Hobby da Vercel é gratuito para uso pessoal e não comercial; projetos empresariais ou usados com finalidade de ganho financeiro exigem verificar um plano apropriado, como o Pro. Hospedar um site grátis não significa que qualquer uso comercial seja autorizado.
Como publicar um site na Vercel pelo GitHub: passo a passo
1. Organize os arquivos e envie para o GitHub
Se você usa apenas HTML, CSS e JavaScript, organize o projeto com um arquivo principal chamado index.html na raiz, além das pastas para estilos, scripts e imagens. Um exemplo simples:
meu-site/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── script.js
└── images/
└── logo.pngEntre em github.com/new, escolha um nome de repositório e crie o projeto. Se os arquivos estão no seu computador, envie-os usando a opção de upload do GitHub ou um cliente Git. Confirme que o index.html está onde a configuração de deploy vai procurá-lo.
2. Crie sua conta na Vercel
Abra vercel.com/signup e cadastre-se usando sua conta do GitHub. Autorize a integração quando solicitado. Você também pode conectar um provedor Git depois, pelo painel.
3. Abra o painel e adicione um novo projeto
Após o login, no painel da Vercel, encontre Add New ou New Project e selecione Project. O nome e a posição dos controles variam conforme a versão do painel.
4. Importe o repositório do GitHub
Na tela Import Git Repository, escolha sua conta ou organização GitHub, localize o repositório e clique em Import. Se ele não aparece, confira se a integração da Vercel tem acesso àquele repositório e se você selecionou a conta correta.
5. Configure e clique em Deploy
Na tela Configure Project, revise Project Name, Framework Preset e Root Directory. Para um projeto HTML simples na raiz, normalmente é possível usar a detecção padrão e seguir. Para Vite ou outros frameworks, confira o comando de build e a pasta de saída, conforme veremos abaixo.
Se a aplicação exigir chaves de API no servidor, cadastre-as em Environment Variables; não coloque segredos diretamente no GitHub nem em variáveis expostas ao navegador.
6. Abra o site publicado e teste
Quando a implantação terminar, a Vercel mostrará o resultado e um endereço público https://nome-do-projeto.vercel.app (o formato exato depende da disponibilidade e das configurações do projeto). Clique no endereço para abrir seu site em outra aba.
Checklist rápido: abra a página no computador e no celular, teste menus e links, confira as imagens e tente acessar diretamente uma URL interna, se houver navegação por rotas.
Publicar HTML, CSS, React ou Vite: o que muda?
| Tipo de projeto | Configuração comum | O que conferir |
|---|---|---|
| HTML, CSS e JavaScript | Projeto estático sem build | index.html na pasta de publicação e caminhos corretos dos arquivos. |
| Vite / React + Vite | Build npm run build; saída dist |
package.json, dependências, comando de build e pasta de saída. |
| Next.js | Preset detectado automaticamente na maioria dos casos | Variáveis de ambiente, build e rotas conforme a estrutura Next.js. |
| Monorepo | Root Directory ajustado ao subprojeto | Selecionar a pasta correta, especialmente se o projeto estiver dentro de apps/. |
A Vercel detecta muitos frameworks e sugere configurações automaticamente, mas isso não garante que todo projeto esteja correto. Se o deploy falhar, abra a aba Deployments e examine os build logs antes de trocar configurações sem diagnóstico.
Vercel 404 Not Found: como corrigir depois do deploy
O erro 404: NOT_FOUND significa que a URL solicitada não correspondeu a uma página ou rota atendida pelo deploy. Não existe uma correção única; o diagnóstico depende do tipo de projeto.
Site HTML simples abre em 404
Verifique se o arquivo inicial se chama exatamente index.html, com letras minúsculas. Confirme se ele está no diretório que a Vercel publica, e não dentro de uma subpasta que ficou fora do Root Directory. Corrija caminhos absolutos que apontam para arquivos inexistentes.
React ou Vite abre a home, mas dá 404 ao atualizar outra página
Se for uma SPA com roteamento no navegador — por exemplo, uma aplicação React Router que gerencia /sobre sem arquivo físico nessa rota — uma rewrite pode enviar as requisições para index.html. Crie vercel.json na raiz:
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}Não aplique essa regra indiscriminadamente. Em sites multipágina, aplicações com rotas de API ou renderização no servidor, uma rewrite global pode esconder erros ou afetar rotas válidas. Use-a apenas quando o framework e o roteamento realmente exigirem esse comportamento.
O deploy não conclui o build
- Confira se
package.jsonpossui scripts corretos. - Verifique erros de importação e diferenças entre letras maiúsculas/minúsculas em nomes de arquivos.
- Confirme que a pasta de saída configurada é a gerada pelo build (no Vite costuma ser
dist). - Confira dependências e versão do Node.js conforme os logs.
Para mais detalhes, consulte o guia oficial da Vercel para erros 404.
Como colocar domínio próprio na Vercel
Você não precisa comprar um domínio para começar: o endereço .vercel.app já permite compartilhar o projeto. Se tiver um domínio próprio, abra seu projeto em Settings → Domains, adicione o domínio desejado e siga as instruções de DNS mostradas para aquela configuração.
- Adicione o domínio em Settings → Domains.
- Confira o tipo de registro DNS solicitado: pode ser A, CNAME ou uma verificação de propriedade.
- Crie ou ajuste os registros no local onde você gerencia o DNS (por exemplo, a empresa de registro ou serviço de DNS).
- Volte à Vercel para verificar o domínio e aguarde a disponibilização do HTTPS.
Os registros exatos dependem do domínio e da configuração do projeto; use os valores fornecidos no painel, sem copiá-los de tutoriais antigos. Veja a documentação oficial de domínio personalizado.
Como atualizar o site depois de publicar?
Esse é um dos principais benefícios de conectar o GitHub: depois da configuração inicial, novos commits na branch de produção normalmente geram novas implantações automaticamente. Alterações em outras branches podem gerar versões de prévia, permitindo testar antes de colocar a mudança no ar.
Na prática, basta editar os arquivos, salvar um novo commit no repositório e acompanhar o processamento na aba Deployments. Para entender o fluxo de criação de projetos assistidos por IA, confira também nosso guia de vibe coding em 2026. Se quiser personalizar páginas já criadas, veja como transformar sites feitos com IA em páginas editáveis.
Vercel, GitHub Pages ou hospedagem tradicional: qual escolher?
Vercel: prática para aplicações front-end modernas, prévias de deploy e integração com Git. GitHub Pages: boa alternativa para sites estáticos sem necessidade de execução de backend. Hospedagem tradicional: costuma ser mais apropriada para WordPress com PHP, bancos de dados e determinados sistemas que não cabem em uma implantação estática.
Antes de escolher, considere se o site é pessoal ou comercial, quais tecnologias utiliza, quanto tráfego espera e se precisa de banco de dados ou serviços no servidor.
Perguntas frequentes
Como hospedar um site grátis com GitHub?
Crie um repositório com seu projeto, conecte-o a uma plataforma de hospedagem como Vercel ou use GitHub Pages para projetos estáticos compatíveis. O GitHub guarda o código; o serviço de hospedagem disponibiliza o site para os visitantes.
Preciso saber programar para publicar na Vercel?
Você não precisa dominar programação para seguir um passo a passo e publicar um projeto simples já pronto, mas deve conseguir identificar os arquivos do projeto e compreender erros básicos de configuração caso apareçam.
A Vercel é grátis para sempre?
O plano Hobby é gratuito enquanto o uso respeita suas condições e limites, mas é voltado a projetos pessoais, não comerciais. Recursos, limites e preços podem mudar. Consulte sempre a página oficial do Hobby.
Posso hospedar um site profissional ou de cliente no Hobby?
Não presuma que pode. A Vercel restringe o Hobby a usos pessoais e não comerciais. Para projetos de clientes ou com finalidade comercial, avalie um plano compatível com as regras atuais da plataforma.
O que fazer quando o site aparece como “Deployment Ready”, mas não abre?
Confira o endereço correto do deploy, o Root Directory, o arquivo inicial, a pasta de saída e possíveis regras de rewrite. Em projetos SPA, teste uma URL interna acessada diretamente e use o diagnóstico específico de 404.
Como colocar um domínio .com.br no meu site?
Abra as configurações do projeto na Vercel, adicione o domínio e configure os registros DNS exigidos no provedor responsável. Depois verifique o HTTPS e defina se prefere o domínio com ou sem www.
Conclusão: qual é o caminho mais simples?
Para colocar um site pessoal no ar, o fluxo GitHub → Vercel → Deploy → URL pública elimina boa parte da configuração manual de servidores. Se você usa HTML simples, confira principalmente o index.html; em Vite e React, revise build e roteamento. Antes de usar a versão gratuita em qualquer projeto comercial, leia as regras do Hobby.
Este tutorial foi preparado para a interface e documentação disponíveis em outubro de 2026. As capturas de tela ilustram as etapas e podem mostrar versões anteriores do painel.
Crédito das capturas de interface: imagens do tutorial de Angela Caldas no DEV Community. As telas representam versões da plataforma e podem diferir da interface atual.
Fontes oficiais: Deploy Git, Hobby, domínios e 404.
