CI/CD con Cloudflare Pages y GitHub Actions en 2026

¿Qué es CI/CD y por qué lo necesitas?

CI/CD significa Continuous Integration / Continuous Deployment. Es el proceso de automatizar todo lo que ocurre entre hacer push a tu código y que aparezca en producción.

Sin CI/CD, tenías que:

• ❌ Descargar el repo, instalar dependencias manualmente
• ❌ Ejecutar tests a mano y esperar a que terminen
• ❌ Hacer build manualmente y esperar
• ❌ Deployar manualmente a Cloudflare (o SSH a un servidor)
• ❌ Rezar para que no haya roto nada

Con CI/CD, todo es automático. Haces push → GitHub Actions ejecuta todo → tu web está desplegada. Sin intervención manual.

Cloudflare Pages: el setup más simple

Cloudflare Pages ya incluye CI/CD integrado. No necesitas nada más:

1. 1. Conectas tu repo de GitHub a Cloudflare Pages
2. 2. Cloudflare detecta el framework (Astro, Next.js, Hugo, etc.)
3. 3. Cada push a main se despliega automáticamente
4. 4. Cada PR genera un deploy de preview único

GitHub Actions: workflows personalizados

Si necesitas tests, lint, o steps personalizados ANTES de desplegar, usas GitHub Actions. Un workflow es un archivo YAML que describe los pasos del pipeline.

Estructura básica:

name: CI/CD Pipeline
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run lint
      - run: npm run test
      - run: npm run build
      # Deploy a Cloudflare Pages
      - uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: mi-proyecto
          directory: dist

Este workflow: instala Node, ejecuta lint y tests, hace build, y despliega a Cloudflare Pages.

Preview Deploys: revisar PRs en vivo

Cada PR en GitHub genera un deploy único en Cloudflare Pages:

• ✓ Tu compañero de equipo hace PR → automáticamente tiene URL de preview
• ✓ Tú haces review en una URL en vivo, no en local
• ✓ Si todo está bien, merge a main y se despliega automáticamente
• ✓ Si hay issue, rechazas la PR sin mergear

Testing en el pipeline

Ejecutar tests automáticos antes de desplegar garantiza que no rompiste nada:

- run: npm run test -- --run
  # En package.json:
  # "test": "vitest"

- run: npm run build
- run: npx playwright install
- run: npm run test:e2e
  # En playwright.config.ts:
  # webServer: { command: 'npm run preview', port: 4173 }

- name: Lighthouse CI
  uses: treosh/lighthouse-ci-action@v10
  with:
    configPath: ./lighthouserc.json
    uploadArtifacts: true

Secrets Management: tokens seguros

Jamás commits API tokens o credenciales al repositorio. Los guardas en GitHub Secrets:

1. 1. Ve a tu repo en GitHub → Settings → Secrets and variables → Actions
2. 2. Crea un secret: CLOUDFLARE_API_TOKEN
3. 3. Pega tu token (desde Cloudflare Dashboard)
4. 4. En tu workflow, accede con ${{ secrets.CLOUDFLARE_API_TOKEN }}

Rollbacks y versionado en Cloudflare Pages

Si algo sale mal en producción, vuelves atrás en segundos:

• ✓ Rollback automático: Haz revert del commit en GitHub → GitHub Actions vuelve a buildear → nuevo deploy
• ✓ Rollback manual: Cloudflare Pages guarda todo el historial. En Dashboard → Deployments, selecciona uno anterior y haz click en "Rollback"
• ✓ Branch staging: Crea rama staging. Los pushs a staging se despliegan a una URL diferente. Tú tiendes sin riesgo.

Cloudflare mantiene 25 deployments automáticamente. Si necesitas versiones más antiguas, configura retención manual en Settings.

Ejemplo completo: Astro + GitHub Actions + Cloudflare Pages

Aquí va el workflow real que usaría para desplegar un sitio Astro:

name: Deploy Astro to Cloudflare Pages

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: npm

      - name: Install dependencies
        run: npm ci

      - name: Lint code
        run: npm run lint

      - name: Run tests
        run: npm run test -- --run

      - name: Build Astro
        run: npm run build

      - name: Run Lighthouse CI
        uses: treosh/lighthouse-ci-action@v10
        with:
          configPath: ./lighthouserc.json
          uploadArtifacts: true
          temporaryPublicStorage: true

  deploy:
    needs: build
    runs-on: ubuntu-latest
    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: npm

      - name: Install dependencies
        run: npm ci

      - name: Build Astro
        run: npm run build

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: hostingrecomendado
          directory: dist
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

¿Qué hace?

• → En TODA PR: lint + tests + build + Lighthouse (sin desplegar)
• → Solo en merge a main: deploy a producción
• → Si algún paso falla, el pipeline se detiene

Configuración: variables de entorno

Necesitas 2 tokens de Cloudflare. Los encuentras aquí:

1. 1. CLOUDFLARE_API_TOKEN: Cloudflare Dashboard → User → Tokens API → Create token → "Edit Cloudflare Workers" template
2. 2. CLOUDFLARE_ACCOUNT_ID: En Cloudflare Dashboard → Pages → tu proyecto → Settings, verás "Account ID"

Una vez obtengas los tokens, los agregas como GitHub Secrets (Settings → Secrets and variables → Actions → New repository secret).

Arquitectura: cómo fluye todo

Mejores prácticas

Preguntas frecuentes

Stack recomendado para 2026

Artículos relacionados