Se você criou um site simples usando HTML, CSS e JavaScript e quer disponibilizá-lo na internet, o GitHub Pages é uma excelente opção! Neste guia, você aprenderá como hospedar seu site diretamente do seu repositório do GitHub, de forma rápida, e além disso, totalmente gratuita.
O que é o GitHub Pages?
Antes de mais nada, vamos entender o que é o GitHub Pages. Ele é um serviço gratuito do GitHub que permite hospedar páginas web diretamente de um repositório. Ele é ideal para projetos estáticos, como portfólios, documentações, blogs, sites institucionais e até mesmo pequenas lojas virtuais sem backend.
Além disso, seu principal benefício é a integração direta com o controle de versão do GitHub. Isso significa que cada alteração no seu código pode ser automaticamente refletida no site publicado, tornando o processo de manutenção muito mais simples e eficiente.
Passo a passo para publicar seu site
1. Criar um repositório no GitHub
Se você ainda não tem uma conta no GitHub, o primeiro passo é criar uma em github.com. Depois disso:
- Primeiramente, acesse seu perfil e clique no botão New Repository (Novo Repositório).
- Agora, escolha um nome para o repositório (exemplo:
meu-site). - Em seguida, defina como público (o GitHub Pages não funciona com repositórios privados no plano gratuito).
- Logo após isso, marque a opção Add a README file se desejar.
- Por fim, clique em Create repository.
2. Enviar os arquivos do seu site
Agora, é necessário adicionar os arquivos do seu site ao repositório. Para isso, você pode escolher entre duas opções:
- Se já tem os arquivos no seu computador, clique em Add file > Upload files e envie os arquivos.
- Se preferir usar o terminal, clone o repositório, adicione os arquivos e envie as alterações:
git clone https://github.com/seu-usuario/meu-site.gitgit add .git commit -m "First Commit" git push origin mainImportante: Para que o GitHub Pages funcione corretamente, o arquivo principal do site precisa estar na raiz do repositório e deve se chamar
index.html. Sem esse arquivo, o site não será exibido corretamente.
Se quiser, você pode estruturar seu site com pastas para organizar melhor seus arquivos, como css/, js/ e images/, tornando-o mais fácil de manter e escalar.
3. Ativar o GitHub Pages
Agora que seu site está no repositório, siga estas etapas para ativar o GitHub Pages:
- Acesse as Configurações do repositório.
- No menu lateral, clique em Pages.
- Em “Branch”, selecione main e clique em Save.
- Por fim, aguarde alguns minutos e seu site estará disponível em:
https://seu-usuario.github.io/meu-site/
Se o site não aparecer imediatamente, tente limpar o cache do navegador ou acessar em uma janela anônima.
4. Personalizar o domínio (opcional)
Caso queira usar um domínio personalizado, siga estes passos:
- Primeiramente, crie um arquivo
CNAMEna raiz do seu repositório. - Em seguida, dentro desse arquivo, adicione o domínio que deseja usar (exemplo:
www.meusite.com). - Vá até o painel de controle do seu provedor de domínio e adicione um registro CNAME apontando para
seu-usuario.github.io. - Aguarde a propagação do DNS, o que pode levar algumas horas.
Se necessário, você pode configurar registros A e AAAA para habilitar suporte a IPv4 e IPv6, garantindo um melhor desempenho e acessibilidade para seu site.
5. Atualizar seu site com novas versões
Cada vez que você fizer alterações no seu site e quiser publicá-las, basta fazer um novo commit e enviá-lo para o GitHub:
git add .git commit -m "Atualizando conteúdo do site"git push origin mainO GitHub Pages atualizará seu site automaticamente após alguns segundos.
Aqui está o tutorial completo passo a passo:
Conclusão
Em suma, o GitHub Pages é uma solução simples e eficiente para hospedar sites estáticos gratuitamente. Com poucos passos, você pode publicar seu site e compartilhá-lo com o mundo! Além disso, ele permite manter um histórico de versões e facilita atualizações constantes.
Gostou deste tutorial? Compartilhe com seus amigos e ajude mais pessoas a colocarem seus sites no ar!