El laberinto de las redirecciones en Cloudflare Pages y Jekyll: Solución definitiva

Al migrar un blog a Cloudflare Pages con un generador de sitios estáticos como Jekyll, uno de los primeros retos técnicos es la gestión de las redirecciones. Parece sencillo sobre el papel, pero cuando entran en juego subdominios técnicos (como *.pages.dev) y subdominios de staging (como beta.becommerce.es), la cosa se complica.

En este artículo detallo el camino que seguimos para conseguir una redirección perfecta y por qué las soluciones “estándar” fallaron.

Contenidos

El Problema: El caos de los subdominios
Intento 1: Cloudflare Dashboard (Redirect Rules) - FAILED ❌
Intento 2: El archivo _redirects - FAILED ❌
La Solución Definitiva: Cloudflare Pages Middleware (_middleware.js) - SUCCESS ✅
Conclusión

El Problema: El caos de los subdominios

Queríamos que cualquier petición que llegara a:

becommerce-es.pages.dev (el dominio por defecto de Cloudflare)
beta.becommerce.es (nuestro entorno de pruebas)
www.becommerce.es

Fuese redirigida de forma automática y permanente (301) a la URL canónica: https://becommerce.es.

Intento 1: Cloudflare Dashboard (Redirect Rules) - FAILED ❌

La primera opción lógica es usar las Redirect Rules (o Single Redirects) desde el panel de Cloudflare.

¿Por qué falló? Las reglas del dashboard son específicas para la Zona configurada (en este caso, becommerce.es). Sin embargo, el dominio pages.dev es gestionado por Cloudflare a un nivel superior. Una regla en la zona del dominio principal nunca ve el tráfico que llega a pages.dev, por lo que la redirección simplemente no ocurre.

Intento 2: El archivo `_redirects` - FAILED ❌

Cloudflare Pages soporta un archivo llamado _redirects en la raíz del proyecto. Intentamos configurarlo así:

https://becommerce-es.pages.dev/* https://becommerce.es/:splat 301
https://beta.becommerce.es/* https://becommerce.es/:splat 301

¿Por qué falló? Hubo dos problemas:

Jekyll y los archivos ocultos: Jekyll, por defecto, ignora archivos que empiezan por guión bajo a menos que se fuerce su inclusión en _config.yml.
Prioridad de assets: Incluso con el archivo presente, Cloudflare Pages a veces da prioridad a servir el contenido estático existente antes que procesar la regla de redirección, lo que resultaba en un código 200 OK (sirviendo la página directamente) en lugar del 301 esperado.

La Solución Definitiva: Cloudflare Pages Middleware (`_middleware.js`) - SUCCESS ✅

La forma más profesional y robusta de manejar esto es mediante una Cloudflare Function de Middleware. Este código se ejecuta en el “Edge” (la red global de Cloudflare) antes de que cualquier petición llegue a los archivos estáticos.

Creamos un archivo en la carpeta /functions/_middleware.js del repositorio:

export async function onRequest(context) {
  const url = new URL(context.request.url);
  const hostname = url.hostname;

  // OPTIMIZACIÓN: Si ya estamos en el dominio de producción, salimos inmediatamente.
  if (hostname === 'becommerce.es') {
    return context.next();
  }

  // Lista de dominios que deben redirigir a producción
  const redirects = [
    'beta.becommerce.es',
    'becommerce-es.pages.dev',
    'www.becommerce.es'
  ];

  if (redirects.includes(hostname)) {
    // Realizamos la redirección 301 (Permanente)
    return Response.redirect(`https://becommerce.es${url.pathname}${url.search}`, 301);
  }

  // De lo contrario, continuamos con la petición normal
  return context.next();
}

¿Por qué esta solución es superior?

Latencia Cero: Se ejecuta en microsegundos usando V8 Isolates de Cloudflare. La optimización al inicio asegura que el tráfico normal del blog no sufra ningún retraso.
Control Total: Puedes redirigir cualquier dominio, incluso los que no están en tu zona de DNS, como pages.dev.
Configuración como Código: La lógica de redirección vive en tu repositorio Git, no escondida en una interfaz web. Es fácil de testear, versionar y mantener.
Prioridad Absoluta: Al ser un middleware, se garantiza que la redirección ocurra antes de que se intente servir cualquier archivo, evitando el contenido duplicado que tanto odia Google (SEO).

Conclusión

Si estás usando Cloudflare Pages, deja de pelearte con las reglas del panel o los archivos de texto planos para redirecciones complejas. Un pequeño script de middleware es la solución más limpia, rápida y profesional para mantener tu SEO intacto y a tus usuarios en el dominio correcto.

Categorías: Web Servidor

Etiquetas: cloudflare jekyll redirecciones middleware devops