DEV Community

Jhony Walker
Jhony Walker

Posted on

Hacks do Github - Hospedando seu site no Github

Hospedando

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 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Fontes onde pesquisei esse conteúdo:

Discussion (0)