Si tenemos un sitio web estático tipo blog o similar en GitHub, podemos desplegarlo fácilmente a Cloudflare mediante los hooks que este proporciona. Pero también es posible usar la api de Cloudflare y desplegar desde GitHub Actions si queremos tener más control del flujo o añadir procesos personalizados (por ejemplo tratamiento de imágenes, etc).Vamos a ver cómo hacer que cada push genere un despliegue automáticamente con todos los cambios.

Vamos a ver cómo funciona esto con un ejemplo, entenderemos qué hace cada paso y cómo adaptarlo a nuestras necesidades.

1. Definición del workflow y triggers

name: Build and deploy to Cloudflare Pages

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

• Le damos un nombre al workflow: esto es opcional, pero útil si tenemos varios workflows.
• El bloque on define cuándo se ejecuta:
  • Cada vez que hacemos un push a la rama main.
  • También cuando se crea un pull request hacia main.
  • Y manualmente, desde la interfaz de GitHub, gracias a workflow_dispatch.

Automatización por defecto, pero también control manual si lo necesitamos.

2. Configuración del job y sistema operativo

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

• Creamos un job llamado build-and-deploy.
• Se ejecuta en la última versión de Ubuntu que ofrece GitHub. Podríamos usar otro sistema, pero Ubuntu funciona bien en la mayoría de los casos y es rápido.

3. Pasos del workflow

a. Descargar el código

- name: Checkout code
  uses: actions/checkout@v4

Este paso clona el repositorio en la máquina virtual donde se ejecuta el workflow. Sin esto, no hay código que compilar o desplegar.

b. Instalar PNPM

- name: Install PNPM
  uses: pnpm/action-setup@v4
  with:
    version: '10'

• Si nuestro proyecto usa PNPM en lugar de NPM o Yarn, necesitamos instalarlo primero.
• Aquí fijamos la versión para evitar sorpresas por cambios futuros.

c. Configurar Node.js

- name: Set up Node.js
  uses: actions/setup-node@v4
  with:
    node-version: '20'
    cache: 'pnpm'

• Indicamos qué versión de Node.js queremos (en este caso, la 20).
• Activamos caché para PNPM, lo que puede acelerar las instalaciones en ejecuciones futuras.

d. Instalar dependencias

- name: Install dependencies
  run: pnpm install

Nada especial aquí, simplemente instalamos lo que necesitamos para construir el proyecto.

e. Construir el proyecto

- name: Build Astro project
  run: pnpm run build

• Llamamos al script de build definido en package.json.
• Si estamos usando Astro, este script probablemente genera la carpeta dist con los archivos listos para desplegar.

f. Desplegar a Cloudflare Pages

- name: Deploy to Cloudflare Pages
  uses: cloudflare/wrangler-action@v3
  with:
    apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
    accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
    command: pages deploy dist --project-name=${{ secrets.PROJECT_NAME }}

• Usamos la acción oficial de Cloudflare Wrangler.
• Autenticamos usando secretos que debemos definir en GitHub (Settings > Secrets and variables > Actions).
• El comando que se ejecuta es pages deploy dist, donde dist es la carpeta que se generó con el build.

Pequeño detalle: también podríamos especificar la rama si estamos desplegando previews, pero en este caso usamos el valor por defecto.

Cómo adaptar esto a nuestro proyecto

Algunas cosas que podemos ajustar:

• Cambiar la rama en el bloque on si no usamos main.
• Usar otro gestor de paquetes (por ejemplo, Yarn) cambiando los pasos correspondientes.
• Agregar más pasos, como pruebas automáticas antes del build.

Código completo

Aquí tienes el código completo en un archivo yml que debes guardar en la carpeta raíz de tu proyecto dentro de .github/workflows:

name: Build and deploy to Cloudflare Pages

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

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

      - name: Install PNPM
        uses: pnpm/action-setup@v4
        with:
          version: '10'

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install

      - name: Build Astro project
        run: pnpm run build

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy dist --project-name=${{ secrets.PROJECT_NAME }}
          # Optional: Explicitly set the branch (defaults to github.ref_name)
          # branch: ${{ github.ref_name }}

Resumen

Con este workflow, cada vez que subimos cambios a main, GitHub se encarga de compilar y desplegar automáticamente nuestro sitio en Cloudflare Pages. Solo necesitamos configurar los secretos una vez y ya tenemos un proceso que se ejecuta solo.

No tenemos que reinventar nada. Solo entender qué hace cada parte para poder ajustarla cuando lo necesitemos. Si algo falla, el historial de ejecuciones nos ayuda a ver dónde y por qué.

Al final, lo que buscamos es esto: escribir código, hacer push y olvidarnos del resto.