Como hostear seu site gratuitamente com GitHub Pages
Tags: githubbrasil, braziliandevs, webdev, tutorial
Published: 2023-06-07 19:41:20


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.

  


![IMAGEM 71](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/erz8flyi4gfguzhzl4b4.png)
  

  

- Agora na coluna esquerda, procure e clique em Pages

  


![IMAGEM 72](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpshowzx4g4tbvxu125i.png)

  

- 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.

  


![IMAGEM 73](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldkjody36fklgsz81ekm.png)

  

- 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.

  



![IMAGEM74](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23yr9f30ch3iihp74vpb.png)

  

- 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.

  


![IMAGEM 75](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9porlar7k39hfuv2vji.png)

  

- Se tudo deu certo, seu site vai estar hospedado em uma URL nesse formato: [https:/SEU_USERNAME.github.io/NOME_DO_REPOSITORIO/](https://pachicodes.github.io/talks/)

Exemplo: [https://pachicodes.github.io/talks/](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?