Hacks do Github - Hospedando seu site no Github
Tags: braziliandevs, github, beginners, programming
Published: 2022-06-17 02:18:36

![Hospedando](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dc608d8m4p5evxpnotlj.png)

O Github é cheio de funcionalidades e o mais utilizado isso vocês já sabem e vamos continuar a série de "hacks" da plataforma que vão otimizar e melhorar sua experiência.

⚠️ Importante: Os prints que serão exibidos para exemplificar podem estar diferentes da interface do seu GitHub, por que sou muito adepto a extensões que melhoram a usabilidade e que ajudam no meu dia a dia. Partindo desse ponto peço que dê uma olhada [nesse artigo](https://dev.to/jhonywalkeer/extensoes-para-navegador-turbinando-sua-experiencia-no-github-538) antes.

Sabemos que eu podemos usar o Github para versionar nossos sites porém, existe também a possibilidade de nosso site poder ficar hospedado no Github (for free), e ser executado diretamente de lá, sem a necessidade de um servidor! 

Uma ponto importante que precisamos frizar antes de começar e que o Github só aceita arquivos estáticos. Não adianta querer usar o Github para hospedar um site em PHP ou aquela API Node que não vai funcionar. Ele só vai funcionar com os arquivos estáticos gerados - HTML, CSS e JS, imagens, fontes, etc.

Para se aproveitar dessa feature, podemos cair em duas situações:

1ª) Tenho um site pessoal que quero hospedar no Github
2ª) Tenho um projeto Open Source, em um repositório dentro da minha conta, e quero criar um site para ele.

## Site Pessoal

Para a situação do site pessoal, devemos fazer o seguinte:

Primeiro de tudo criaremos um novo repositório na nossa conta, com o seguinte padrão:

```
username.github.io
```
Obviamente, trocando `username` pelo seu nome de usuário no Github. Fazendo isso, você pode subir seus arquivos estáticos para a branch master normalmente, e acessá-los pelo endereço:

```
https://username.github.io
```
## Site para projeto open source

Se temos um projeto open source no Github, e queremos criar um site para ele, precisaremos fazer o seguinte:

- Criar uma branch em branco chamada `gh-pages`. Para criar uma nova branch em branco, usaremos o seguinte comando:

```
git checkout --orphan gh-pages
```
- Depois subir os arquivos para essa branch.

Só lembre de **NUNCA** fazer merge dessa branch na master. Os arquivos das duas branches serão completamente diferentes! Na master, ficarão os arquivos do seu projeto. Na `gh-pages`, somente os estáticos do site do projeto. Vamos conseguir acessar pelo seguinte endereço:

```
https://username.github.io/repositoryname
```

Além de trocar o `username` para o nome do seu usuário deveremos trocar o `repositoryname` pelo nome do nosso repositório.

## Usando um domínio personalizado

Para usar um domínio personalizado, você só precisa criar um arquivo chamado `CNAME` na branch onde estão os estáticos do seus site e o conteúdo dele deve ser o seu domínio. Por exemplo: 

```
blog.test.com.br
```

Não precisa do `http(s)` pode ficar tranquilo. Depois você só precisa configurar para que o seu domínio aponte para os DNS do Github. Para fazer isso, siga [esse tutorial](https://docs.github.com/pt/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-an-apex-domain).

Fontes onde pesquisei esse conteúdo:

- https://docs.github.com/pt/pages
- https://docs.github.com/pt/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-an-apex-domain