← Nível 6 – Chefe de projeto

Lição 5 de 8 ⏱ 35 minutos Premium

Deployment automático

Configura GitHub Actions: envias uma alteração e o site atualiza-se sozinho. Como os profissionais.

Os robots fazem o trabalho por ti

Agora funciona assim: mudas o código → commit → push → GitHub Pages atualiza. Isso já é automação! Mas os profissionais vão mais longe – GitHub Actions é um robot que, após cada push, faz o que lhe disseres: construir o site, verificar erros, fazer deploy.

Isto chama-se CI/CD (continuous integration / continuous deployment). Parece complicado, mas é mesmo: «Robots verificam e fazem deploy de tudo após cada alteração.»

Vou mostrar-te: o teu primeiro workflow

As tarefas para robots escrevem-se num ficheiro dentro da pasta .github/workflows/. Por exemplo, deploy.yml:

name: Check and deploy

on:
  push:
    branches: [main]   # run after every push to main

jobs:
  check:
    runs-on: ubuntu-latest   # the robot gets a clean Linux computer
    steps:
      - uses: actions/checkout@v4      # download my code
      - name: Check HTML
        run: |
          echo "Checking that index.html exists…"
          test -f index.html && echo "OK ✅"

Após um push, aparece um robot a correr no GitHub no separador Actions. Um visto verde significa que passou tudo; um X vermelho significa que algo está errado e o robot diz-te o quê.

💡

O GitHub Pages já usa Actions! Se olhares para o separador Actions, vês que o deploy do Pages corre através de um workflow chamado «pages build and deployment». Agora estás a acrescentar as tuas verificações extra – como um chefe a sério que não deixa uma versão partida ir para o ar.

Agora és tu 💪

  1. Cria .github/workflows/deploy.yml seguindo o exemplo, faz push e observa o separador Actions.
  2. Estraga algo de propósito: renomeia index.html para index2.html, faz push – o workflow fica vermelho. Corrige e vê ficar verde. (Esta é a experiência mais importante desta lição!)
  3. Adiciona um segundo passo ao workflow – verificar que não ficou localhost no HTML:
      - name: No localhost in the code
        run: |
          if grep -r "localhost:3000" *.html; then
            echo "WARNING: localhost was left in the code!" && exit 1
          fi
          echo "OK ✅"
  1. Escreve no LAUNCH.md: «O site faz deploy automaticamente, um robot verifica cada push.»

Verifica: O teu workflow corre no separador Actions após cada push. Viste vermelho (partido) e verde (corrigido). O site atualiza sem um único passo manual.

O que ficas a saber desta lição