GitHub Pages — o que não te ensinaram na escola

Algumas dicas bacanas sobre o GitHub Pages que só se aprendem na prática

“Colorful balloons on a string against a blue sky” by Andreas Weiland on Unsplash

Todo mundo sabe que o GitHub é um serviço fantástico e indispensável para muitos desenvolvedores ao redor do mundo. Mas pouca gente sabe que, além de ser um serviço para versionamento de código, ele oferece diversos outras ferramentas. Uma delas é o GitHub Pages, da qual vou falar um pouquinho.

GitHub Pages — você com certeza já ouviu esse nome em algum lugar. Caso você ainda não sabe o que é isso, segue uma explicação básica:

O GitHub Pages é um serviço gratuito, oferecido pelo GitHub, para que você possa hospedar e renderizar sites a partir dos seus repositórios.

É um serviço amplamente utilizado e seguro, e feito para desenvolvedores. Se você conhece um pouco de HTML, CSS e JavaScript pode criar um site estático do zero; se você não tem essa habilidade, pode selecionar um lindo template e alterar apenas os conteúdos (utilizando Markdown).

O principal objetivo do GitHub Pages é te proporcionar praticidade na hora de colocar um site no ar.

Geralmente um fluxo normal para hospedar um site é:

• registrar o domínio;
• comprar uma hospedagem;
• associar domínio + servidor (DNS);
• subir arquivos no servidor (FTP) ou criar alguma esteira de CI/CD para atualizar os arquivos do site.

Você pode simplificar algumas etapas desse processo utilizando ferramentas como o WordPress; mesmo assim o fluxo vai ser meio parecido com o que descrevemos na lista acima.

Já quando você utiliza o GitHub Pages, pode subir todos os códigos em um repositório e, nas configurações desse repositório, seleciona que irá utilizar o serviço e escolhe o código de qual branch será renderizado como o seu site.

Pronto! Em menos de 5 minutos o seu site já estará no ar.

É importante ressaltar que o GitHub Pages apenas hospeda e renderiza sites estáticos — aqueles sites que apenas possuem HTML, CSS e JS, e que não necessitam de um servidor para rodar uma linguagem back-end.

Sites feitos com WordPress ou aplicações que são renderizadas pelo back-end (SSR) não funcionam no GitHub Pages — estas aplicações dependem de um servidor para funcionar, e o serviço não oferece suporte para esse tipo de aplicação. Para esses casos você precisaria de uma máquina para hospedar e rodar a sua aplicação — e quem oferece esse tipo de serviço, por exemplo, é a Heroku, Digital Ocean, Linode…

Vários geradores de sites estáticos podem te ajudar no processo da criação do site. Entre essas ferramentas podemos citar o Gatsby (React), Gridsome (Vue), Jekyll, Hugo…

E você pode combinar o seu site estático, criado a partir dessas ferramentas, com um CMS headless — um CMS que não irá renderizar o seu site, apenas hospedar o seu conteúdo. Entre essas ferramentas podemos citar o GraphCMS, Strapi, Forestry, Netlify…

Assim você poderá ter o seu blog com conteúdo dinâmico hospedado pelo GitHub Pages; mesmo com o conteúdo dinâmico, o seu site ainda será estático.

Domínios

O esquema de domínios do GitHub Pages é bem simples. O serviço irá utilizar a seguinte estrutura:

username.github.io/repository-name

Onde:

• username é o seu user no GitHub;
• repository-name é o nome do seu repositório.

Todos os sites hospedados por ele estarão sob o domínio github.io, e sempre serão servidos com HTTPS.

Se você quer criar um site que fique que seja hospedado em username.github.io , você deverá criar um repositório com esse nome. Considerando meu exemplo pessoal:

Para que o meu site pessoal utilizasse o GitHub Pages, eu criei um repositório chamado jlozovei.github.io e selecionei que iria utilizar o serviço. Assim, com esse nome de repositório, o GitHub sabe que deverá renderizar o site na raiz do domínio, não criando um novo caminho com o nome do repositório (como no exemplo acima).

Com o GitHub Pages você também pode adicionar domínios customizados aos seus sites. Quando você utiliza os custom domains, o seu site dentro do GitHub Pages irá ser mostrado sob o novo domínio informado.

Para isso você precisará comprar um domínio (de preferência sem um plano de hospedagem) em um serviço como o Google Domains, NameCheap ou até mesmo no Registro.br. Depois de comprar o domínio, você precisará associar o DNS do GitHub Pages ao seu domínio e voilà, seu site estará hospeado pelo serviço com um domínio customizado.

Link oficial da documentação do serviço, na sessão sobre domínios customizados: https://docs.github.com/pt/pages/configuring-a-custom-domain-for-your-github-pages-site

Versionamento por branches

Quando você utiliza esse serviço, pode informar em qual branch está o código que será renderizado — seja na master (ou main), ou em qualquer outra que você criar.

Em muitos casos o conteúdo da branch principal são os seus códigos de desenvolvimento e as documentações. O mais certo para esses casos é criar uma branch específica que apenas irá conter o código do site que será renderizado (código de distribuição).

Você pode fazer isso manualmente ou então utilizar ferramentas para automatizar esse processo. Um bom exemplo é o gh-pages, um pacote disponível no npm/yarn que automatiza a criação de uma branch específica (gh-pages) e faz o commit/push dos códigos do seu site direto pelo terminal.

Ou você também pode utilizar o novo GitHub Actions como plataforma de CI/CD, configurar um workflow e realizar o deploy do seu site a cada novo commit ou PR mergeado de forma automática.

O GitHub Actions é outro serviço muito bom oferecido pela plataforma, é gratuito para repositórios abertos e possui várias receitas prontas.

Como essa action que faz justamente o que falamos acima — o deploy automático do seu site para o GitHub Pages.

Temas

Se você não tem a oportunidade ou tempo de criar um site do zero o GitHub Pages também oferece diversos templates (chamados de themes) prontos para que você posssa utilizar.

https://pages.github.com/themes/

Com eles, você só precisa trocar o conteúdo. Esse conteúdo pode estar dentro de arquivos markdown (.md) como o README do projeto.

Esse serviço possui algumas limitações, claro, e não deve ser utilizado como a hospedagem principal do seu site comercial. O objetivo do serviço é oferecer uma forma muito mais prática, segura e barata para que desenvolvedores possam vender seu peixe sem se preocupar com todo o fluxo comercial de colocar um site no ar.

Vários projetos utilizam o serviço como base e tenho certeza que ele irá quebrar alguns galhos para você. A documentação é ampla, o serviço é muito bem mantido e suportado pela comunidade, e tenho certeza que de agora em diante você terá uma carta na manga muito boa quando o assunto for colocar um site no ar para você e seus projetos.