Aug 6, 2021
GitHub Pages — o que não te ensinaram na escola
Algumas dicas bacanas sobre o GitHub Pages que só se aprendem na prática
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-nameOnde:
- 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.ioe 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.
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.
