Desplegar tu primera app estática en Cloudflare Pages
Diseño Web
1

Qué es Cloudflare Pages

Cloudflare Pages es el servicio de hosting para sitios estáticos y aplicaciones web JAMstack que ofrece Cloudflare. Está pensado para alojar todo lo que se pueda compilar a HTML, CSS y JavaScript: blogs con Hugo, landings con Astro, SPAs con React o Vue, documentación con Docusaurus, tiendas con Next estático, etc. Lo más atractivo para alguien que está empezando es que el plan gratis incluye ancho de banda ilimitado, 500 builds al mes y despliegues ilimitados.

Cómo funciona el flujo con Git

La forma estándar de usar Pages es conectar un repositorio de GitHub o GitLab. Una vez autorizada la conexión, eliges el repo, indicas la rama principal (por ejemplo main) y Pages se encarga del resto: detecta el framework, sugiere el comando de build y la carpeta de salida, y lanza el primer despliegue. A partir de ese momento, cada push a producción dispara un build nuevo, y cada pull request genera un preview deploy con su propia URL para que puedas revisarlo antes de mergear.

Detección automática de framework

Pages reconoce los frameworks más populares del ecosistema JavaScript y Ruby:

  • Next.js (modo estático o con funciones)
  • Nuxt y Vue
  • React (Create React App, Vite)
  • Astro y SvelteKit
  • Hugo, Jekyll y Eleventy
  • Gatsby, Docusaurus, VuePress

Si usas alguno de ellos, normalmente solo hay que confirmar los valores por defecto. Si tu proyecto no encaja con ningún preset, puedes escribir el comando de build a mano (por ejemplo npm run build) e indicar el directorio que contiene el resultado final (dist, public, build...).

Variables de entorno y secretos

En la configuración del proyecto tienes una sección para añadir variables que estarán disponibles durante el build: claves de APIs, tokens de CMS headless (Strapi, Contentful, Sanity), URLs de endpoints. Pages distingue entre variables de producción y de preview, lo que te permite apuntar los deploys de PR a una base de datos de staging sin tocar nada más.

Dominios personalizados

Cada proyecto recibe automáticamente una URL del estilo tu-proyecto.pages.dev, pero lo habitual es conectar tu dominio real. Si el dominio ya está gestionado en Cloudflare, añadirlo desde la pestaña de dominios custom es cuestión de un par de clicks: Cloudflare crea el registro, emite el certificado SSL gratuito y activa HTTPS. Si el dominio está en otro registrador, solo tienes que apuntar un CNAME al subdominio que Pages te indica.

Consejos para empezar bien

  • Empieza con un proyecto pequeño (un blog Hugo o una landing Astro) para familiarizarte con el flujo antes de mover un sitio importante.
  • Activa siempre los preview deploys: te ahorran sorpresas en producción.
  • Si tu sitio depende de datos en tiempo de build, configura un webhook para que Pages reconstruya cuando cambie el contenido en tu CMS.
  • Combina Pages con Workers si necesitas lógica dinámica: puedes añadir funciones a tu sitio estático sin cambiar de proveedor.

Para quien quiere una experiencia parecida a Vercel o Netlify pero con la red de Cloudflare detrás, Pages es una alternativa muy sólida y gratis en la gran mayoría de casos reales.