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!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
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.
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.
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.
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; existem outras opções igualmente eficazes, mas o Netlify se destaca pela praticidade.
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
- Aprenda Tailwind CSS com apenas uma aula!
Descubra como o Tailwind CSS pode revolucionar o seu desenvolvimento web. Aprenda a usar essa ferramenta que vai elevar o nível do seu front-end. - Configure seu VS Code para HTML e CSS, e conheça outras Tecnologias Full Stack! Aprenda como baixar e configurar o VS Code para HTML e CSS e deixe-o pronto para iniciar o seu desenvolvimento web!
- Guia rápido – Aprenda como usar Bootstrap do Zero Quer criar sites bonitos e responsivos sem complicação? Aprenda como usar Bootstrap, uma ferramenta que te permite criar páginas completas com o mínimo de dificuldade e esforço!
Posts mais recentes da Hashtag Treinamentos
- 5 Boas Práticas de SQL para Iniciantes: Otimize Suas Consultas e Organize Seu Código
Se você está começando com MySQL ou busca melhorar suas habilidades em SQL, este post traz cinco boas práticas de escrita de SQL para iniciantes. - Função SE Excel: Exemplos e Dicas para Uso [Guia] A função SE Excel é muito útil para definir condições e criar uma planilha mais completa e funcional. Confira nesta aula!
- Exercícios de Listening em Inglês – Como Melhorar sua Compreensão Faça estes exercícios de listening em inglês e melhore sua compreensão! Descubra técnicas e estratégias para praticar e evoluir no aprendizado do idioma!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.