Desplegando Astro en Cloudflare Pages

Resumen

Llevar un proyecto Astro a producción en Cloudflare Pages es el paso que convierte tu código en un sitio público, rápido y compartible. Aquí verás cómo conectar tu repositorio de GitHub, configurar el despliegue, enlazar un dominio propio y aprovechar la integración nativa entre Astro y Cloudflare para servir contenido estático con caché optimizado.

¿Qué necesito antes de desplegar un proyecto Astro?

Antes de mover un solo archivo a Cloudflare, asegúrate de tener tu repositorio actualizado con todos los cambios locales. Si saltas este paso, el build remoto no incluirá tus últimas modificaciones.

  • Repositorio en GitHub con el último commit subido.
  • Cuenta activa en Cloudflare para acceder a Pages.
  • Build local validado con npm run build para detectar errores antes del despliegue [3:53].

¿Qué es Cloudflare Pages? Es un servicio de Cloudflare que permite alojar sitios web estáticos con integración directa a frameworks como Astro, soporte para server side render y un sistema de caché que acelera la entrega del contenido.

Ejecutar el build localmente es tu red de seguridad. Si TypeScript, ESLint o Prettier rompen la compilación, lo verás en tu terminal antes de que el servidor remoto falle.

¿Cómo conecto mi repositorio de GitHub a Cloudflare Pages?

Dentro del panel de Cloudflare, navega a la sección de Pages y crea un nuevo proyecto con la opción Connect to Git. Si manejas varias cuentas de GitHub, puedes autorizar una organización específica, como en el caso del repositorio astrobuild.tips alojado en la cuenta de Platzi.

Al autorizar la conexión, GitHub pedirá permisos de lectura sobre los repositorios y, en algunos flujos, escritura para pull requests y deployments. Si tienes activada la autenticación de dos factores, presta atención a la confirmación.

¿Qué configuración usa Astro en el panel de Pages?

Al seleccionar el repositorio, Cloudflare detecta el framework y propone valores por defecto. Selecciona Astro en la lista y mantén los comandos sugeridos a menos que hayas modificado la estructura del proyecto.

  • Framework preset: Astro.
  • Build command: el comando por defecto que entrega Cloudflare.
  • Output directory: la carpeta generada por Astro tras el build.

La integración nativa entre Astro y Cloudflare evita configuraciones manuales y aprovecha el sistema de caché del proveedor para mejorar la velocidad de carga.

¿Por qué necesito la variable de entorno NODE_VERSION?

Este es el detalle que más se pasa por alto. Antes de hacer clic en Save and Deploy, debes agregar una variable de entorno llamada NODE_VERSION con la versión que recomienda la documentación oficial de Astro para Cloudflare Pages [4:53]. Sin esta variable, el build remoto fallará aunque tu código esté impecable.

¿Qué pasa si no configuro NODE_VERSION? El proceso de build se detiene porque Cloudflare usa una versión de Node incompatible con Astro. Define la variable antes del primer despliegue para evitar errores silenciosos.

Una vez guardada la configuración, Cloudflare clona el repositorio, instala dependencias, ejecuta el build y publica el resultado. El log en vivo te muestra cada paso, desde la clonación hasta el mensaje de Operación exitosa [6:18].

¿Cómo conecto un dominio propio comprado en Namecheap?

La URL que entrega Cloudflare es funcional, pero un dominio personalizado le da identidad a tu proyecto. Para astrobuild.tips se usó Namecheap, un registrador con extensiones desde un dólar al año.

El dominio personalizado no es obligatorio. Si prefieres compartir la URL temporal de Cloudflare, puedes saltarte esta sección.

¿Qué pasos sigo para vincular el dominio con Cloudflare?

El flujo combina tu cuenta de Namecheap con el panel de Cloudflare para mover la administración de DNS al mismo ecosistema donde está el sitio.

  1. En Namecheap, entra a Manage y localiza la sección Name Servers.
  2. En Cloudflare, agrega el sitio nuevo con la opción Add site y elige el plan gratuito.
  3. Cloudflare te entrega dos name servers personalizados; cópialos en Namecheap usando Custom DNS.
  4. Activa Always Use HTTPS y la compresión para optimizar la entrega.

La propagación puede tardar entre dos y 48 horas, aunque suele resolverse en un par de horas cuando todo el ecosistema vive dentro de Cloudflare.

¿Cómo asigno el dominio al proyecto en Pages?

Vuelve al panel de Pages, selecciona tu proyecto y entra a la pestaña de Custom Domains. Escribe el dominio (por ejemplo, astrobuild.tips) y Cloudflare configurará automáticamente el registro necesario.

Si gestionas el DNS fuera de Cloudflare, el sistema te dará las instrucciones manuales: crear un registro CNAME con @ como nombre y la URL del proyecto como contenido, dejando el TTL en automático [10:31].

Cuando el dominio vive dentro de Cloudflare, la integración es casi inmediata e incluye un certificado SSL emitido por la misma plataforma, lo que activa HTTPS sin pasos adicionales.

¿Qué sigue después del despliegue?

Tu sitio ya es público y compartible, pero el trabajo editorial apenas empieza. Hay textos por refinar, contenido por crear y detalles que diferencian un proyecto funcional de uno realmente terminado. ¿Cuál será el primer recurso que vas a publicar en tu sitio? Cuéntalo en los comentarios.