Executando verificação de segurança...
13
Kadu
5 min de leitura ·

Automatização Inteligente no GitHub: Mantendo seu README Sempre Atualizado

🔍 Introdução

Olá, eu sou o Kadu. Recentemente, decidi aprimorar minhas habilidades em front-end e, para isso, pesquisei algumas páginas e layouts no Figma para criar usando HTML, CSS, JavaScript, ou até mesmo React. Mas não queria criar um repositório separado para cada página/landing page, foi que eu tive a ideia de criar um único repositório, onde cada landing page estaria separada em branches. A branch main teria apenas um README contendo os links para cada uma dessas branches.

No entanto, a ideia de atualizar manualmente o README com os links de cada nova página me pareceu trabalhosa. Então, lembrei-me do poder das GitHub Actions e resolvi criar uma ação que atualizasse o README automaticamente sempre que eu criasse uma nova branch.

🎯 Objetivo

O objetivo deste repositório é manter todas as minhas landing pages em um único lugar, separadas por branches. A branch principal (main) conterá apenas um README.md com uma breve descrição do repositório e links para cada branch individual. A atualização do README.md na branch main será feita automaticamente toda vez que uma nova branch for criada.

🛠️ Passos para Chegar à Solução

  1. Busca na Documentação das GitHub Actions: Primeiramente, fui em busca da documentação oficial das GitHub Actions no GitHub. A documentação é uma excelente fonte de informações e exemplos sobre como configurar e usar actions.

  2. Pesquisa de Vídeos e Repositórios: Em seguida, procurei vídeos tutoriais e repositórios de exemplo para entender melhor como outras pessoas estavam usando GitHub Actions para automatizar tarefas similares.

  3. Colocando em Prática: Criei um repositório e comecei a escrever meu primeiro arquivo .yml. Após algumas tentativas e erros, e cerca de duas horas de trabalho, consegui chegar a uma versão funcional da action.

📂 Estrutura do Repositório

  • Branch main: Contém apenas o arquivo README.md.
  • Branches de projetos: Cada landing page terá sua própria branch.

📝 Criando a Pasta de Workflow

Para que a GitHub Action funcione, é necessário criar uma pasta específica no repositório para armazenar o arquivo de configuração da action. Siga os passos abaixo:

  1. No seu repositório, crie a pasta .github/workflows.
  2. Dentro dessa pasta, crie um arquivo chamado update-readme.yml (ou qualquer outro nome que desejar).

🚀 GitHub Action para Atualização Automática do README.md

Para automatizar a atualização do README.md na branch main, criei uma GitHub Action que executa os seguintes passos:

  1. Checkout do Repositório: Clona o repositório para o runner do GitHub Actions.
  2. Configuração do Git: Configura o Git para commits feitos pela ação.
  3. Obtenção da Lista de Branches: Obtém uma lista de todas as branches remotas, excluindo a branch main e outras branches específicas.
  4. Atualização do README.md: Gera um novo README.md com links para cada branch.
  5. Commit e Push das Mudanças: Comita e faz o push das mudanças para a branch main.

📄Aqui está o código da GitHub Action que criei ⬇️

name: Update README

on:
  push:
    branches:
      - main
    paths-ignore:
      - README.md
  schedule:
    - cron: '0 */6 * * *'

jobs:
  update-readme:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout Repository
      uses: actions/checkout@v3
      with:
        token: ${{ secrets.PAT }}
    
    - name: Set up Git
      run: |
        git config --global user.name 'github-actions[bot]'
        git config --global user.email 'github-actions[bot]@users.noreply.github.com'

    - name: Pull changes
      run: git pull origin main --rebase

    - name: Fetch all branches
      run: git fetch --all

    - name: Get list of branches
      id: get_branches
      run: |
        branches=$(git branch -r | grep -v '\->' | grep -v 'main' | awk -F/ '{print $2}' | grep -v 'branch-base')
        branches=$(echo $branches | tr ' ' '\n' | sort -u | tr '\n' ' ')
        echo "branches=$branches" >> $GITHUB_ENV
        echo "::set-output name=branches::$branches"

    - name: Update README.md
      run: |
          git pull origin main
          echo "# Landing Pages Repository" > README.md
          echo "" >> README.md
          echo "Bem-vindo ao repositório de Landing Pages! Este repositório foi criado para armazenar todas as landing pages que eu desenvolver como forma de estudo de front-end. Cada landing page estará em uma branch separada, e você encontrará versões diferentes da mesma landing page utilizando tecnologias distintas." >> README.md
          echo "" >> README.md
          echo "## Índice de Landing Pages" >> README.md
          echo "" >> README.md
          for branch in ${{ steps.get_branches.outputs.branches }}; do
            echo "- [$branch](https://github.com/Kaduh15/landing-pages/tree/$branch)" >> README.md
          done
          echo "" >> README.md
          echo "## Como Navegar no Repositório" >> README.md
          echo "" >> README.md
          echo "1. **Branches:** Cada landing page tem sua própria branch principal. Navegue entre as branches para ver os diferentes projetos." >> README.md
          echo "2. **Versões:** Dentro de cada branch, você encontrará diferentes versões da landing page, cada uma utilizando uma tecnologia diferente." >> README.md
          echo "## Contribuições" >> README.md
          echo "" >> README.md
          echo "Se você deseja contribuir com este repositório, sinta-se à vontade para criar um pull request. Toda contribuição é bem-vinda!" >> README.md
          echo "" >> README.md
          echo "---" >> README.md
          echo "" >> README.md
          echo "Happy coding! 😊" >> README.md
    
    - name: Commit changes
      run: |
        git add README.md
        git diff-index --quiet HEAD || git commit -m 'Update README.md with branch links'
        git push origin main

    - name: Debugging
      run: |
        echo "Branches: ${{ steps.get_branches.outputs.branches }}"
        cat README.md
    

📘 Explicação dos Principais Pontos do Arquivo .yml

  • name: Update README: Define o nome da ação.
  • on: Especifica quando a ação deve ser executada.
    • push: A ação será executada quando houver um push para a branch main, exceto quando o arquivo README.md for alterado.
    • schedule: A ação também será executada a cada 6 horas.
  • jobs: Define os trabalhos que serão executados.
    • update-readme: Nome do job.
      • runs-on: Especifica o ambiente em que o job será executado, neste caso, ubuntu-latest.
      • steps: Define os passos do job.
        • Checkout Repository: Usa a action actions/checkout@v3 para fazer o checkout do repositório.
        • Set up Git: Configura o Git para fazer commits com o usuário e email do bot do GitHub Actions.
        • Pull changes: Faz o pull das mudanças mais recentes da branch main.
        • Fetch all branches: Faz o fetch de todas as branches do repositório.
        • Get list of branches: Obtém a lista de todas as branches remotas, excluindo a branch main e outras branches específicas.
        • Update README.md: Atualiza o arquivo README.md com links para cada branch.
        • Commit changes: Adiciona, comita e faz push das mudanças para a branch main.
        • Debugging: Passo para depuração, mostrando as branches e o conteúdo do README.md.

🔗 Rescursos Úteis

Explicar tudo detalhadamente deixaria o post maior do que já está. Por isso, vou deixar alguns links que me ajudaram durante o desenvolvimento.

caso queiram fazer igual, pode copiar o arquivo ou fazer um fork do meu repositório.

🎉 Conclusão

Com esta GitHub Action, consegui automatizar a atualização do README.md na branch main do meu repositório de landing pages, garantindo que os links para cada branch individual estejam sempre atualizados sem a necessidade de intervenção manual. Este é um exemplo prático de como as GitHub Actions podem ser usadas para automatizar tarefas repetitivas e melhorar a eficiência no gerenciamento de repositórios.

Espero que este artigo tenha sido útil para você que também está buscando maneiras de automatizar suas tarefas no GitHub. Sinta-se à vontade para adaptar este exemplo para suas próprias necessidades e contribuir com melhorias!

1
1
0
1
2

Obrigado você por esse comentário.

pra mim foi muito difícil tirar o que tava na minha cabeça e transformar em texto.