Despliegue Continuo en Cloudflare Pages: Dominio Propio, DNS y Redirección WWW

Más allá del FTP: despliegue moderno con Cloudflare Pages

Concepto previo: Registro del Dominio vs. Gestión de DNS

Es fundamental distinguir entre dos cosas diferentes que a menudo se confunden:

1. El Registro del Dominio (La Propiedad): Es la empresa a la que le pagas la renovación anual (tu registrador). Ellos mantienen el nombre tudominio.com a tu nombre y aparecen en el registro público WHOIS. Aunque cambiemos la configuración técnica, el dominio sigue siendo 100% de tu propiedad.
2. La Gestión DNS (La “Guía Telefónica”): Es el sistema que le dice a Internet a dónde ir cuando alguien escribe tu dominio. Al delegar los DNS a Cloudflare, le decimos a Internet: “Cuando alguien busque tudominio.com, pregúntale a Cloudflare qué configuraciones tiene”.

---

FASE 1: Delegar el control DNS a Cloudflare

El primer paso es hacer que Cloudflare se convierta en el gestor de los DNS de tu dominio.

Paso 1: Añadir tu dominio a Cloudflare

1. Accede a tu panel de control de Cloudflare.
2. Haz clic en el botón “Add a site” (Añadir un sitio).
3. Introduce tu nombre de dominio (ejemplo: tudominio.com).
4. Selecciona el plan gratuito —es más que suficiente para Pages y la mayoría de proyectos— y haz clic en continuar.
5. Cloudflare escaneará automáticamente tus registros DNS actuales. Revisa que estén todos y pulsa continuar.

Paso 2: El cambio de Nameservers

En la siguiente pantalla, Cloudflare te dará dos direcciones llamadas Nameservers (por ejemplo: ns1.cloudflare.com y ns2.cloudflare.com).

1. Abre una nueva pestaña en tu navegador y entra en el panel de control de la empresa donde compraste tu dominio.
2. Busca la sección de Gestión de DNS o Servidores de Nombres (Nameservers).
3. Borra los servidores de nombres que vienen por defecto y reemplázalos por los dos que te ha proporcionado Cloudflare.
4. Guarda los cambios.

¿Qué ocurre internamente? Al cambiar los Nameservers has delegado la autoridad total del DNS a Cloudflare. Ahora, cuando alguien pregunte por tu dominio, el sistema le preguntará a Cloudflare. El panel de la empresa donde compraste el dominio es ahora solo una “cáscara vacía” para el DNS; todo el control de tráfico pasa a estar en la pestaña DNS de Cloudflare.

Paso 3: Verificación

La propagación de este cambio por todo el mundo puede tardar desde unos minutos hasta unas horas. Puedes monitorizar el estado en DNSChecker buscando tu dominio con el filtro NS. Cuando veas que los resultados devuelven los nombres de los servidores de Cloudflare en verde por todo el mundo, la delegación está completa. En Cloudflare verás que el estado de tu dominio pasa a ser “Active”.

---

FASE 2: Conectar Cloudflare Pages con tu Dominio

Una vez que Cloudflare tiene el control de tu dominio, vincularlo a tu proyecto web es automático. Para que tu web funcione perfectamente, registra tanto la versión sin “www” como la versión con “www”.

1. En el panel principal de Cloudflare, ve a la sección “Workers & Pages” (en el menú lateral).
2. Selecciona tu proyecto de Pages.
3. Navega hasta la pestaña “Custom domains” (Dominios personalizados).
4. Haz clic en “Set up a custom domain”.
5. Introduce tu dominio principal (ejemplo: tudominio.com) y haz clic en “Activate domain”.
6. Repite el proceso: vuelve a hacer clic en “Set up a custom domain”, pero esta vez introduce la versión con “www” (www.tudominio.com) y actívalo.

La ventaja de Cloudflare: Como le diste autoridad total en la Fase 1, Cloudflare tiene permiso para editar tu zona DNS. Al activar el dominio, Cloudflare crea automáticamente los registros CNAME necesarios para apuntar el tráfico hacia tu proyecto de Pages. No necesitas tocar la pestaña DNS manualmente.

---

FASE 3: Redirigir “www” al dominio principal (Recomendado para SEO)

Tener tu web disponible tanto en www.tudominio.com como en tudominio.com puede generar contenido duplicado a ojos de Google. La mejor práctica es elegir uno como principal y redirigir el otro con un 301 Permanent Redirect.

1. En el panel principal de Cloudflare, entra en tu dominio.
2. Ve al menú de la izquierda y selecciona “Rules” > “Page Rules”.
3. Haz clic en “Create Page Rule”.
4. En el campo “If the URL matches”, escribe: www.tudominio.com/*
5. En el menú desplegable “Pick a setting”, selecciona “Forwarding URL”.
6. En “Select status code”, elige “301 - Permanent Redirect”.
7. En “Enter destination URL”, escribe: https://tudominio.com/$1

El $1 es un comodín que preserva la ruta completa: si alguien entra a www.tudominio.com/contacto, será redirigido a tudominio.com/contacto. Haz clic en “Save and Deploy”.

---

FASE 4 (Opcional): Despliega y automatiza con Wrangler

Hasta ahora has conectado el proyecto y configurado el dominio desde el panel de Cloudflare. Si prefieres trabajar desde la terminal —o quieres que tu CI despliegue sin tocar el panel— Wrangler es la herramienta que buscas: la CLI oficial de Cloudflare que te permite crear proyectos, desplegar y gestionar Pages con un solo comando.

¿Qué es Wrangler?

Wrangler es la interfaz de línea de comandos de Cloudflare. Para Pages actúa como un “desplegador” inteligente: empaqueta la carpeta de salida de tu build (por ejemplo _site/ o dist/, según tu generador) y la publica en la edge network, creando el proyecto automáticamente la primera vez. Es la forma más rápida de pasar de “tengo mi web compilada” a “está online”.

Instalación y login

1. Instálalo globalmente con Node.js:

   npm install -g wrangler
   

   (También puedes usar npx wrangler sin instalarlo de forma permanente.)

2. Autentícate enlazando tu cuenta:

   wrangler login
   

   Se abrirá el navegador para confirmar el acceso. A partir de ahí, Wrangler ya sabe a qué cuenta de Cloudflare enviar los despliegues.

Despliega tu sitio

Compila tu proyecto y sube la carpeta resultante con un solo comando:

npx wrangler pages deploy _site --project-name=ml-book

Donde _site es la carpeta de salida de tu build (ajústala a la de tu generador, p. ej. dist/) y --project-name indica el nombre del proyecto en Cloudflare Pages (sustituye ml-book por el tuyo). Cada ejecución genera una previsualización única (URL tipo https://<hash>.tudominio.pages.dev) y actualiza la URL de producción tudominio.pages.dev. No necesitas configurar nada en el panel para que el despliegue funcione.

Resumen: Wrangler no sustituye la delegación de DNS (eso sigue en tu registrador y en la FASE 1), pero sí te ahorra ir al panel para cada despliegue. Combinado con el despliegue continuo desde Git, es la forma más ágil de mantener tu sitio en Cloudflare Pages.

---

ANEXO: Entendiendo los registros DNS

Si alguna vez revisas la pestaña DNS de Cloudflare, verás varios tipos de registros:

• Registros NS (Name Servers): Confirman quién gestiona tu dominio. Son la clave para que Cloudflare tenga autoridad sobre tu tráfico.
• Registros A: Apuntan tu dominio hacia una dirección IP numérica de un servidor físico.
• Registros CNAME: Funcionan como un alias. Permiten que un nombre apunte a otro nombre. Por ejemplo, es lo que permite que www.tudominio.com apunte al dominio principal, o que tu dominio apunte a la URL interna de tu proyecto en Pages (miproyecto.pages.dev).

Conclusión

A partir de este momento, nunca más tendrás que entrar al panel de la empresa donde compraste el dominio para temas técnicos —solo entrarás una vez al año para pagar la renovación—. Si en el futuro quieres añadir un subdominio (ej. blog.tudominio.com), configurar un correo corporativo o conectar otra herramienta, todo lo harás exclusivamente desde la pestaña DNS de Cloudflare.