Como Fazer Deploy de um Site do Zero: Passo a Passo
Quer aprender como fazer deploy de um site do zero? Neste guia, você aprenderá o passo a passo para publicar seu site usando o Netlify!
Para fazer o deploy de um site em HTML e CSS, junte todos os arquivos (com um index.html na raiz) em uma única pasta, crie uma conta gratuita no Netlify e use a opção de deploy manual, arrastando a pasta para a área indicada. Em poucos segundos o site fica no ar em um endereço próprio, pronto para ser compartilhado.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Resumo do vídeo: a aula pega um projeto pronto de HTML e CSS (a réplica da página do Google, do curso gratuito) e coloca no ar do começo ao fim. Você organiza os arquivos em uma pasta, cria a conta gratuita no Netlify, escolhe o deploy manual, arrasta a pasta e recebe o link público do site, já funcionando para qualquer pessoa acessar.
Neste vídeo você aprende:
- o que é deploy e por que ele é necessário para o site sair do seu computador;
- como organizar os arquivos do projeto (HTML, CSS e imagens) em uma única pasta;
- como criar a conta gratuita no Netlify e chegar ao painel;
- como usar a opção de deploy manual, arrastando e soltando a pasta do projeto;
- onde encontrar o link público gerado para visualizar e compartilhar o site;
- quando vale a pena migrar para o deploy automático integrado ao GitHub.
Para receber o(s) arquivo(s) utilizados na aula, preencha seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
O que você vai ver hoje?
Como Fazer Deploy de um Site do Zero: Passo a Passo
No desenvolvimento web, publicar um site, ou fazer o deploy, é uma etapa essencial para tornar seus projetos acessíveis na internet.
Na aula de hoje, vou mostrar como fazer deploy de um site criado com HTML e CSS utilizando o serviço Netlify, uma plataforma gratuita ideal para iniciantes e projetos de pequeno porte.
Para este exemplo, usaremos o projeto da Réplica da Página do Google, desenvolvido ao longo do Curso Gratuito de HTML e CSS. Você pode acompanhar o curso para criar o projeto ou fazer o download do material disponibilizado.
O Que é o Deploy? – Netlify
O deploy, de forma simples, é o processo de transferir seu site ou aplicação de um ambiente local para um servidor online.
Isso permite que o site, antes acessível apenas no computador do desenvolvedor, seja hospedado em um servidor na web, de modo que qualquer pessoa possa acessá-lo ao digitar a URL no navegador.
Existem várias plataformas para realizar o deploy, e o Netlify é uma das opções mais práticas e acessíveis, especialmente recomendada para desenvolvedores iniciantes ou para projetos menores.
O Netlify é uma ferramenta muito popular por sua praticidade e custo zero, ideal para quem está começando e deseja rapidez e simplicidade no deploy de sites.
Passo a Passo para Realizar o Deploy no Netlify
Com o projeto em mãos, precisaremos seguir algumas etapas importantes para realizar o deploy no Netlify:
- Preparar os Arquivos
- Acessar o Netlify
- Iniciar o Deploy
- Upload dos Arquivos
- Visualizar e Compartilhar o Link
A seguir, vamos detalhar cada uma dessas etapas para que você consiga publicar seus sites facilmente.
Preparação dos Arquivos do Projeto
O primeiro passo antes de fazer o deploy de qualquer projeto é garantir que todos os arquivos do site (HTML, CSS, imagens, etc.) estejam organizados em uma única pasta.
No nosso exemplo, o site é composto por arquivos HTML e CSS, além de imagens e outros recursos necessários.
- Arquivos HTML: Documentos principais que estruturam o conteúdo do site.
- Arquivos CSS: Arquivos que definem o layout e o design visual do site.
- Imagens e Outros Recursos: Elementos adicionais que completam a aparência e a funcionalidade do site.
Certifique-se de que todos esses arquivos estão na mesma pasta para facilitar o upload.
Acessando e Criando Conta no Netlify
O próximo passo é acessar o site do Netlify e, se ainda não tiver uma conta, criar uma gratuitamente.
Acesse o Netlify: Netlify.com
O Netlify oferece várias opções de login, como e-mail, GitHub e outras contas sociais. Escolha a opção de sua preferência e faça login.
Full Stack ImpressionadorEssa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.
Começar agora
Assim que estiver logado, você será direcionado ao painel principal do Netlify.
A conta gratuita permite que você faça o deploy do site sem restrições.
Iniciar o Deploy
Após fazer login, é hora de criar um novo site. O Netlify oferece várias formas de deploy, mas o método manual é o mais simples para este tipo de projeto.
Clique em Add New Site e selecione a opção Deploy manually.
Esse método permite que você arraste e solte os arquivos da pasta diretamente para a plataforma. Um atalho útil: o endereço app.netlify.com/drop já abre direto nessa área de arrastar e soltar.
Realizando o Upload Manual dos Arquivos
Na página aberta, arraste a pasta com todos os arquivos do projeto (HTML, CSS, imagens) para a área indicada.
Dois detalhes que costumam dar dor de cabeça aqui: o arquivo principal precisa se chamar index.html e ficar na raiz da pasta que você arrastou — se ele estiver dentro de uma subpasta, o endereço abre como página não encontrada. E, no servidor, os caminhos diferenciam maiúsculas de minúsculas: Imagens/Logo.PNG e imagens/logo.png são arquivos diferentes, mesmo que no Windows funcione dos dois jeitos.
O Netlify processará os arquivos, e, em poucos instantes, seu site estará publicado.
Essa facilidade faz do Netlify uma das plataformas mais populares entre desenvolvedores que buscam rapidez e simplicidade no deploy.
Visualizar e Compartilhar o Link
Após o deploy ser concluído, o Netlify exibirá um resumo do processo com a mensagem Published deploy. Além disso, ele gera um link único para o seu site, acessível ao clicar na opção Open production deploy.
Agora que o site está no ar, qualquer pessoa com o link pode acessá-lo. Por exemplo, você pode conferir a nossa réplica do Google por este link: https://ubiquitous-kulfi-f02e69.netlify.app/
Opções de Deploy Automático e Integrações
Embora o foco desta aula seja ensinar você a realizar o deploy manual no Netlify, a plataforma também oferece a opção de deploys automáticos, como a partir de repositórios no GitHub.
Essa opção é interessante para desenvolvedores que fazem atualizações frequentes, pois permite que o site seja atualizado automaticamente sempre que mudanças são enviadas para o repositório.
Benefícios do Netlify e Considerações Importantes
O Netlify é uma das ferramentas mais recomendadas para deploy de sites simples, devido à sua praticidade e custo zero. Entre seus principais benefícios, destacam-se:
- Gratuito: O Netlify oferece uma opção gratuita para deploy de sites, ideal para desenvolvedores iniciantes.
- Interface Intuitiva: A plataforma possui uma interface fácil de usar, permitindo o deploy em poucos cliques.
- Integrações com GitHub: Para projetos mais avançados, o Netlify permite deploy automático através de integrações com GitHub.
É importante avaliar o que você precisa para o seu site, pois o plano gratuito pode não atender a todas as demandas de projetos maiores. Nesse caso, vale a pena considerar os benefícios dos planos pagos.
Lembre-se de que o Netlify não é a única plataforma para fazer o deploy do seu site. Como um site de HTML e CSS é estático, ele roda em qualquer serviço de hospedagem estática — Vercel, GitHub Pages e Cloudflare Pages também têm plano gratuito e seguem a mesma lógica. O Netlify se destaca pela praticidade do arrastar e soltar, sem exigir repositório nem linha de comando.
Perguntas Frequentes sobre Deploy de um Site
1. O que é fazer o deploy de um site?
É publicar o site: levar os arquivos que estão no seu computador para um servidor online, de modo que qualquer pessoa possa digitar o endereço no navegador e ver a página.
2. Como publicar um site em HTML e CSS de graça?
Sites feitos com HTML, CSS e JavaScript são estáticos e cabem em serviços gratuitos como Netlify, Vercel, GitHub Pages e Cloudflare Pages. No Netlify, o caminho mais rápido é o deploy manual: você arrasta a pasta do projeto e o site vai ao ar em segundos.
3. Preciso saber Git ou GitHub para fazer o deploy?
Para o deploy manual, não: basta arrastar a pasta com os arquivos. O GitHub entra quando você quer deploy automático, com o site se atualizando sozinho a cada alteração enviada para o repositório.
4. Publiquei o site e aparece página não encontrada. O que fazer?
Confira se existe um arquivo index.html na raiz da pasta que você enviou e se não arrastou uma pasta com outra pasta dentro. Vale checar também os caminhos de CSS e imagens, que diferenciam maiúsculas de minúsculas no servidor.
5. Como usar um domínio próprio no lugar do endereço gerado?
Depois do deploy, a plataforma cria um endereço automático para o projeto. Para trocar por um domínio seu, registre o domínio e aponte os DNS para a plataforma nas configurações de domínio do projeto.
Conclusão – Como Fazer Deploy de um Site do Zero: Passo a Passo
Fazer o deploy de um site no Netlify é um processo direto e acessível. Com poucos passos, você transforma seus projetos locais em sites online, prontos para serem acessados e compartilhados.
Hoje, você aprendeu como realizar o deploy de um site de forma manual, partindo do zero. Essa é uma opção prática e rápida para projetos em HTML e CSS, dispensando configurações complicadas e custos adicionais.
O Netlify é uma excelente plataforma para iniciantes, oferecendo simplicidade no deploy e automação para projetos mais complexos.
Para se aprofundar ainda mais no HTML e CSS e aprender a desenvolver projetos completos, passando por cada etapa até o deploy, confira o nosso Curso Completo de HTML e CSS Impressionador!
Hashtag Treinamentos
Para acessar publicações de JavaScript, clique aqui!
Posts mais recentes de HTML e CSS
- LESS CSS: Guia Completo do Pré-processador (2026)
LESS CSS é um pré-processador que adiciona variáveis, mixins, nesting e operações matemáticas ao CSS. Aprenda a configurar e usar com projeto prático. - Variáveis no CSS (CSS Variables): Como Usar de Forma Profissional
Você sabe o que são Variáveis no CSS (CSS Variables)? Aprenda como usar técnicas que vão transformar a forma como você escreve variáveis CSS. - Display CSS: Nova Sintaxe e Como Usar
Aprenda a usar a propriedade display CSS com a nova sintaxe de múltiplos valores. Veja exemplos práticos e descubra como combinar estilos em um único comando.
Posts mais recentes da Hashtag Treinamentos
- Planilha de Controle de Notas Fiscais no Excel [Grátis]
Baixe a planilha de controle de notas fiscais no Excel grátis: calcule ISS e retenções, veja o que está em aberto e gere a cobrança de cada nota de serviço. - Qual IA usar na empresa: ChatGPT, Claude ou Perplexity?
Qual IA usar na empresa: veja as diferenças entre ChatGPT, Claude e Perplexity e quando cada um rende mais em cada área da sua equipe. - Apostilas Gratuitas em PDF: Excel, Power BI, Python e IA
Baixe apostilas gratuitas em PDF de Excel, Power BI, Python, Claude e agentes de IA, com exercícios e gabarito. Escolha a sua e comece hoje.
