Cloudflare Pages

Cloudflare Pages es la plataforma de Cloudflare para alojar sitios estáticos conectados a un repositorio de Git: cada commit en la rama de producción dispara un build y un despliegue.

En esta guía vamos a desplegar un sitio estático que lee el contenido de Content Island en tiempo de build, y vamos a automatizar el rebuild con el Custom HTTP Webhook de Content Island: cuando publiques contenido, Content Island llamará al deploy hook de Cloudflare y la web se regenerará sola.

Qué vamos a montar

El flujo completo tiene cuatro piezas:

1. Publicas contenido en Content Island.
2. Content Island llama al Custom HTTP Webhook que vamos a configurar.
3. Esa URL es un Deploy Hook de Cloudflare Pages, que lanza un nuevo build.
4. El build vuelve a leer el contenido y despliega la versión nueva.

¿Estático con rebuild o snapshot dinámico?

Aquí reconstruimos el sitio entero en cada publicación: es el modelo clásico de SSG, simple y con el mejor rendimiento posible, a cambio de esperar el build. Si prefieres que el contenido se actualice sin rebuild, echa un vistazo a los Dynamic Snapshots, donde el mismo Custom HTTP Webhook llama a un endpoint de tu aplicación en lugar de a un deploy hook.

Antes de empezar

• Tu proyecto en un repositorio de Git (GitHub o GitLab), con un comando de build que genere el sitio estático y que lea el contenido mediante alguna de las formas de snapshot estático de Content Island: exportar el snapshot con content-island export como paso previo al build, o leerlo desde snapshotPath si lo versionas en el repositorio.
• Una cuenta de Cloudflare.
• El access token de tu proyecto de Content Island, que el build necesita para exportar o leer el contenido.

Paso 1 · Crear el proyecto en Cloudflare Pages

1. En el panel de Cloudflare, ve a Compute → Workers & Pages y pulsa Create application.

   

2. En la pantalla Make something new, baja hasta el final y pulsa Continue to Pages. Es el flujo clásico de Pages, que es el que trae los deploy hooks que vamos a usar después.

   

3. En Get started, elige Import an existing Git repository.

   

   Consejo

   La otra opción, Drag and drop your files, sube una carpeta ya construida desde tu equipo. No nos sirve aquí: sin repositorio no hay build en Cloudflare y, por tanto, tampoco hay nada que un deploy hook pueda relanzar.

4. Selecciona tu cuenta de GitHub, marca el repositorio del proyecto y pulsa Begin setup. Si no ves tu repositorio en la lista, usa el enlace Cloudflare Pages app on GitHub para darle acceso.

   

Paso 2 · Configurar el build

1. Cloudflare te muestra la sección Build settings vacía. Deja Framework preset en None si prefieres controlar tú los comandos, o elige tu framework para que los rellene por ti.

   

2. Rellena el comando y el directorio de salida de tu proyecto:

   • Build command: npm run build
   • Build output directory: dist
   

   Precaución

   dist es el valor de la captura, la salida por defecto de Astro y Vite. Ajústalo al de tu proyecto: Next.js estático exporta a out y Nuxt a .output/public. Un directorio equivocado se traduce en un despliegue vacío o en un 404.

3. Despliega Environment variables (advanced) y añade las variables que tu build necesita. Como mínimo, el access token con el que el cliente lee el contenido de Content Island.

   

   En la captura se ven dos: CONTENT_ISLAND_ACCESS_TOKEN, que necesita cualquier proyecto, y SNAPSHOT_REFRESH_SECRET, que es propia del proyecto de ejemplo. Usa los nombres que espere tu código.

4. Pulsa Save and Deploy. Cloudflare clona el repositorio, ejecuta el build y publica el sitio en una URL *.pages.dev.

Paso 3 · Crear el Deploy Hook en Cloudflare

Un deploy hook es una URL secreta que, al recibir un POST, lanza un nuevo build de una rama concreta. Es la pieza que vamos a darle a Content Island.

1. En tu proyecto de Pages, entra en la pestaña Settings, busca el bloque Build y, en Deploy Hooks, pulsa el botón +.

   

2. Dale un nombre que te diga de dónde viene la llamada — por ejemplo content-island-webhook — y elige la rama que quieres construir, normalmente main. Pulsa Save.

   

3. Cloudflare te muestra la URL del hook. Cópiala con Click to copy: la vas a pegar en Content Island en el siguiente paso.

   

   Trata la URL como una contraseña

   La URL del deploy hook no lleva más autenticación que ella misma: cualquiera que la tenga puede lanzar builds en tu proyecto. No la subas al repositorio ni la pegues en un issue. Si se te escapa, borra el hook y crea otro.

Paso 4 · Conectar el Custom HTTP Webhook en Content Island

1. Abre tu proyecto en Content Island, ve a la pestaña Webhook, pulsa Add New Webhook y elige Custom HTTP.

   

2. Rellena el formulario:

   • Name: un alias para reconocerlo, por ejemplo Custom Webhook Cloudflare.
   • Destination URL: la URL del deploy hook que copiaste en el paso anterior.
   • Headers: déjalos vacíos. El deploy hook de Cloudflare se autentica con la propia URL y Content Island envía un POST sin cuerpo, que es exactamente lo que espera.

   Pulsa Save.

   

Paso 5 · Probar que funciona

1. Sin salir del webhook, pulsa Send Test. Content Island lanza la petición en ese momento, así que puedes comprobar el resultado sin publicar nada.

   

2. Vuelve a tu proyecto de Cloudflare Pages, a la pestaña Deployments: verás un despliegue nuevo, recién empezado y marcado con el icono de nube que indica que lo ha lanzado un deploy hook en lugar de un commit.

   

3. La prueba definitiva es la real: cambia cualquier cosa en la pestaña Content y publícala. Content Island llamará al hook, Cloudflare reconstruirá el sitio y, cuando termine el build, tu web mostrará el contenido nuevo sin que hayas tocado nada.

Evita llamadas a la API en cada petición con el modo snapshot

Exporta el contenido de tu proyecto a un snapshot y haz que el cliente lo lea en modo snapshot: el build resuelve todas las lecturas desde el fichero local, sin una llamada a la API por cada una.

Por qué el Custom HTTP Webhook y no el de GitHub

Puedes conseguir lo mismo con el webhook de GitHub, pero das un rodeo: Content Island lanza un repository_dispatch, una GitHub Action escucha ese evento y esa Action hace un curl contra el deploy hook. Tres saltos, un token de GitHub con permisos de escritura y un workflow que mantener, para acabar haciendo una única petición HTTP.

El Custom HTTP Webhook llama directamente a la URL de Cloudflare. Sin intermediarios y sin tokens de por medio.

Referencias

• Tab Webhook de Content Island · Modo snapshot · Dynamic Snapshots
• Cloudflare Pages · Deploy hooks
• Cloudflare Pages · Build configuration