ReTabNews

🔍 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

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.
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.
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:

No seu repositório, crie a pasta .github/workflows.
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:

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

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.

Vídeo da Fernanda Kipper: Link do vídeo
Repositório do projeto: Link do repositório

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!

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