linuxlab.
CI/CD con GitHub Pages / 0315 min

Tu pipeline de CI/CD

Prueba cada cambio y despliega únicamente desde main.

Tu guía paso a paso

  1. 01

    Abre .github/workflows/pages.yml. Los push a main y los pull requests ejecutan la integración continua: instalación reproducible, pruebas y construcción. Una prueba fallida impide el despliegue.

  2. 02

    El trabajo deploy depende de check y solo se ejecuta desde main, nunca desde un pull request. workflow_dispatch permite iniciarlo manualmente desde Actions. Si tu rama principal tiene otro nombre, actualiza branches y refs/heads/main juntos.

  3. 03

    configure-pages lee la configuración, npm run build ejecuta scripts/build-pages.mjs y upload-pages-artifact empaqueta dist. deploy-pages publica ese artefacto en el entorno github-pages. No necesitas crear una rama gh-pages.

  4. 04

    contents: read permite descargar el código; pages: write e id-token: write permiten el despliegue autenticado. Estos dos últimos se limitan al trabajo deploy. No agregues un token personal ni claves de AWS.

  5. 05

    Las acciones están fijadas a un commit para que el workflow sea reproducible. Revisa futuras actualizaciones antes de cambiar esas versiones. El lockfile se confirma en Git y npm ci lo respeta.

  6. 06

    Después de configurar Pages, ejecuta git push -u origin main. Abre Actions, selecciona el workflow y sigue check y deploy. El entorno muestra el enlace real de tu publicación.

Tu propio repositorio

Realiza esta ruta en tu computadora con internet y GitHub. El laboratorio Linux permanece aislado. Descarga el starter, revisa el código y publica desde tu cuenta.

Descargar starter ReactDescargar workflow de PagesGuía oficial de GitHub Pages
yaml
name: Check and deploy to GitHub Pages
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
  workflow_dispatch:
permissions:
  contents: read
concurrency:
  group: pages-${{ github.ref }}
  cancel-in-progress: true
jobs:
  check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7
      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7
        with:
          node-version: '24'
          cache: npm
      - run: npm ci
      - run: npm test
      - run: npm run build
  deploy:
    if: github.event_name != 'pull_request' && github.ref == 'refs/heads/main'
    needs: check
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7
      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7
        with:
          node-version: '24'
          cache: npm
      - run: npm ci
      - uses: actions/configure-pages@45bfe0192ca1faeb007ade9deae92b16b8254a0d # v6
        id: pages
      - run: npm run build
        env:
          PAGES_BASE_PATH: ${{ steps.pages.outputs.base_path }}
      - uses: actions/upload-pages-artifact@fc324d3547104276b827a68afc52ff2a11cc49c9 # v5
        with:
          path: dist
      - uses: actions/deploy-pages@368f82528645a54fb793d4d04e342629a3f51346 # v5
        id: deployment

Marcar lectura completada

La lectura completada no verifica la ejecución del ejercicio.

AnteriorSiguiente lección