Você já conhece o GitHub Pages? Esse serviço oferece hospedagem gratuita para websites estáticos. Essa ferramenta usa Fluxos de trabalho personalizáveis do GitHub Action para criar e implantar seu código.
O GitHub Pages é uma opção poderosa para armazenar conteúdo estático pelos seguintes motivos:
É grátis.
Facilita a colaboração. Qualquer um pode abrir um pull request para atualizar o site.
Seu repositório sincroniza com todas as alterações feitas em seu site.
Embora o GitHub Pages venha com um nome de domínio padrão como https://SEU-USERNAME.github.io/ , ele oferece suporte a domínios personalizados.
Ele usa fluxos de trabalho personalizáveis do GitHub Action para compilações e implantações.
Vamos aprender como hospedar sites estáticos criados com HTML no GitHub Pages!
- Escolha algum repositório seu que contenha código HTML, navegue até a aba de configurações desse repositório.
- Agora na coluna esquerda, procure e clique em Pages
- Aqui você pode escolher entre fazer Deploy por um branch ou com GitHub Actions. Para usar a primeira opção você só tem que escolher o o branch main e clicar em Save.
- Nesse tutorial vamos escolher a opção GitHub Actions. Essa opção irá sugerir alguns fluxos de trabalho para você com base no código em seu repositório. Você pode escolher HTML estático e clicar em configurar.
Clicar em configurar levará você a um fluxo de trabalho pré-criado. Sinta-se à vontade para revisar o YAML, ajustá-lo de acordo com sua preferência e confirmar o código. Eu não vou mudar nada no template para esse tutorial e vou fazer o commit.
Em alguns segundos, a Action começará a ser executada. Ela gerará um URL e implantará seu site estático no GitHub Pages se for bem-sucedido. Você pode ver o status da sua Action, clicando na aba actions.
- Se tudo deu certo, seu site vai estar hospedado em uma URL nesse formato: https:/SEU_USERNAME.github.io/NOME_DO_REPOSITORIO/
Exemplo: https://pachicodes.github.io/talks/ - Onde pachicodes é meu username e talks é o nome do repositório.
E ta dã, seu site está no ar! Lembrando que isso só vale para páginas em HTML estático e GitHub Pages em Jekyll.
Dica:
Se você tiver imagens no seu site, pode ser que elas não carreguem no seu site, e isso é por uma mudança de PATHs que o GitHub Pages cria. Para corrigir isso precisamos mudar o endereço da imagem da seguinte maneira:
Se o endereço da imagem é assets/imagens/foto.jpg
, quando hospedado no GitHub Pages, mude o endereço para {“NOME DO REPOSITORIO”}/assets/imagens/foto.jpg
e assim que for feito de deploy, suas imagens devem aparecer.
Isso também serve para PDFs.
Conclusão
Eu adoro o GitHub pages, quase todos meus repos tem um site, porque é super prático!
Você já conhecia o GitHub pages?
Comenta aí com um site que você tem hospedado esse serviço!
E se você não tem um ainda, o que está esperando?
Top comments (9)
Realmente, o Github Pages é uma ferramenta incrível, e com a adição das actions para fazer deploy, ela se tornou ainda melhor.
No artigo, tu mostrou o deploy de um site estático, mas essa semana eu fiz o deploy de um projeto usando o framework Next.js. Foi só pesquisar por uma action para fazer o deploy de um projeto com esse framework e colocar ela pra rodar. Achei isso incrível. Sem estresse, sem necessidade de configurações (claro que é possível personalizar a action, mas a forma padrão funcionou direitinho pra mim), sem precisar ter uma conta em um outro site pra fazer o deploy, enfim, só sucesso.
Com certeza o Github vai hostear alguns dos meus projetos daqui pra frente.
Instrutivo, direto ao ponto e facil de entender!
Tudo para mim!
Uma sugestão, tenta fazer um desse só que pra hospedagem com suporte pra backend e gratuito.
Confere o "back4app.com/". Eles tem serviço de hospedagem para back-end e containers com plano free para projetos pessoais.
Gostaria que ele suportasse frameworks como Next.js e React. Caso haja uma forma, poderia me informar?
A forma mais tradicional é você usar uma tecnologia de "Static Site Generator"
Não conhecia, mas site HTML estático sem graça.
A forma mais tradicional de se dar "graça" é você usar uma tecnologia de "Static Site Generator"
Confira vitejs.dev/guide/#trying-vite-online
Essa isso que eu precisava. Obrigado!