Se você costuma navegar por perfis de desenvolvedores no GitHub, provavelmente já cruzou com um README customizado onde uma cobrinha (no estilo do clássico jogo Snake) sai andando e "comendo" os quadradinhos verdes que representam os dias de commits.
Esse recurso visual incrível vem de um projeto de código aberto muito famoso na comunidade, desenvolvido pelo Arthur Platane. O projeto Platane/snk usa os dados públicos da API do GitHub para calcular uma rota dinâmica e gerar uma imagem animada baseada nos seus commits.
Recentemente, a minha animação parou de funcionar devido a mudanças nas políticas de cache e caminhos de arquivos do GitHub. Em vez de apenas procurar uma solução pronta, decidi entender o que estava quebrado. Isso me levou a ter meu primeiro contato prático com o GitHub Actions.
Se você nunca mexeu com ferramentas de CI/CD (Integração e Entrega Contínuas) ou acha que automação é um bicho de sete cabeças, deixa eu explicar como funciona da forma mais simples possível.
O que é o GitHub Actions? (Explicado para leigos)
Imagine que o GitHub é um grande escritório virtual onde você armazena o seu código. O GitHub Actions é um robô assistente altamente eficiente que você pode configurar para trabalhar nesse escritório.
Você programa esse robô por meio de regras simples: "Toda vez que o evento X acontecer, eu quero que você execute a tarefa Y automaticamente".
Por exemplo:
- O Gatilho (X): Pode ser um commit novo enviado para a produção ou um horário agendado no relógio.
- A Tarefa (Y): O robô pode compilar o seu código, rodar testes de segurança para garantir que nada quebrou, ou disparar um alerta.
No caso do jogo da cobrinha, nós programamos esse robô para funcionar como um despertador. A cada 12 horas, ele acorda sozinho, acessa a ferramenta open source do Platane, lê os meus quadradinhos verdes de commits, desenha a animação atualizada em um formato de imagem (SVG) e salva esse arquivo em uma pasta isolada do meu repositório.
Toda essa instrução para o robô é escrita em um arquivo de texto simples no formato YAML (com a extensão .yml), que fica guardado em uma pasta padrão do sistema chamada .github/workflows/.
A Saga da Imagem Quebrada: Entendendo a Web por Trás dos Panos
Colocar o robô para rodar a biblioteca do Platane foi rápido. O verdadeiro aprendizado aconteceu quando a imagem final insistia em aparecer quebrada no meu perfil. Investigando o problema, aprendi três conceitos fundamentais sobre como o ecossistema do GitHub e a renderização web lidam com segurança e cache:
-
A restrição de repositórios privados: O servidor que renderiza as imagens do seu perfil (
://githubusercontent.com) precisa acessar o arquivo para exibi-lo aos visitantes. Se o repositório do seu perfil estiver configurado como privado, o servidor de imagens é bloqueado. Para que recursos dinâmicos funcionem, o repositório do perfil deve ser público. -
A armadilha dos tokens expirados (URLs Absolutas): Se você linkar a imagem usando a URL completa da internet (como
https://raw.githubusercontent...), o GitHub gera uma trava de segurança temporária (token) no link. A imagem funciona na sua tela por alguns minutos, mas quebra logo em seguida para outros usuários. -
A Solução Definitive (Caminho Relativo entre Branches): O script de automação gera as imagens e as salva em uma ramificação ("branch") separada e isolada, chamada
output. Para o arquivo principal do meu perfil (README.md) conseguir enxergar essa imagem sem se perder e sem usar links estáticos, a melhor prática é usar a navegação relativa de diretórios usando dois pontos (../).
Ao usar <img src="../output/github-snake.svg">, instruímos o renderizador do GitHub a: "Saia da branch atual (main), entre na branch ao lado (output) e renderize o arquivo direto da fonte".
O resultado final no markdown ficou assim, garantindo compatibilidade com o Modo Escuro e Claro:
<picture>
<source media="(prefers-color-scheme: dark)" srcset="../output/github-snake-dark.svg">
<source media="(prefers-color-scheme: light)" srcset="../output/github-snake.svg">
<img alt="GitHub Snake Animation" src="../output/github-snake.svg">
</picture>
Conclusão
Resolver problemas técnicos nunca é uma linha reta. O que começou como uma simples correção de um ícone quebrado no meu perfil se transformou na oportunidade perfeita para abrir a caixa de ferramentas, aprender como funciona o ecossistema de automação do GitHub Actions e, de quebra, entender melhor as nuances de infraestrutura e entrega que afetam a plataforma que uso diariamente como desenvolvedor.
E no seu perfil, você já utiliza o GitHub Actions para automatizar alguma rotina?
Top comments (0)