Rubén Albiach ⚡️
De Cero a Producción: Tu Web con Astro y Cloudflare Pages (Gratis)

De Cero a Producción: Tu Web con Astro y Cloudflare Pages (Gratis)


Tutorial
astro cloudflare frontend devops

Introducción: La mejor infraestructura es la que no mantienes

En un artículo anterior desglosé la arquitectura de mi portfolio usando Docker, Nginx y pipelines personalizados. Esa es la vía “pesada” y corporativa. Pero como Technical Lead, también sé que la eficiencia a menudo significa elegir la herramienta más simple que resuelva el problema.

Si quieres levantar un blog, una landing page o un portfolio hoy en día, no necesitas un VPS, ni abrir puertos, ni lidiar con certificados SSL a mano. El ecosistema ha evolucionado hacia el Edge Computing.

En este tutorial te voy a enseñar cómo montar un proyecto base con Astro y desplegarlo en Cloudflare Pages de forma totalmente gratuita y automatizada. Una arquitectura de nivel empresarial al alcance de cualquiera.

1. El Stack: ¿Por qué Astro + Cloudflare?

Antes de picar código, hablemos de decisiones de arquitectura:

  • Astro: Genera HTML estático por defecto, enviando CERO JavaScript al cliente a menos que se lo pidas expresamente (Arquitectura de Islas). Es el rey del rendimiento web actual.
  • Cloudflare Pages: No es solo un hosting. Es una red de entrega de contenido (CDN) global. Tu web no vivirá en un servidor en Alemania; estará replicada en cientos de ciudades en todo el mundo, a milisegundos de tu usuario final.

La combinación de ambos te da una web inhackeable (no hay base de datos expuesta) y con tiempos de carga casi instantáneos.

2. Creando el proyecto base (El “Hola Mundo”)

Abre tu terminal. Solo necesitas tener Node.js instalado. Vamos a utilizar el CLI (Command Line Interface) de Astro, que tiene una de las mejores Developer Experiences (DX) del mercado.

Ejecuta este comando:

npm create astro@latest

El asistente te hará unas preguntas rápidas. Te recomiendo esta configuración para empezar limpio:

  1. Directorio: mi-proyecto-astro
  2. Plantilla: Empty o Blog (según lo que busques).
  3. Dependencias: Sí, instálalas.
  4. TypeScript: Sí (siempre es buena práctica tipar tu código).

Entra en la carpeta y levanta el entorno de desarrollo local:

cd mi-proyecto-astro
npm run dev

Visita http://localhost:4321 y verás tu web funcionando a la velocidad de la luz.

3. El Repositorio: Git como fuente de la verdad

Para que el despliegue automático (CI/CD) de Cloudflare funcione, tu código debe vivir en un repositorio remoto. Nada de subir archivos por FTP, eso quedó en la década de los 2000.

  1. Crea un repositorio vacío en tu cuenta de GitHub.
  2. Enlaza tu proyecto local y súbelo:
git init
git add .
git commit -m "feat: init astro project"
git branch -M main
git remote add origin [https://github.com/tu-usuario/mi-proyecto-astro.git](https://github.com/tu-usuario/mi-proyecto-astro.git)
git push -u origin main

4. Despliegue en Cloudflare Pages: Magia en 3 clics

Aquí es donde la infraestructura moderna brilla. Vamos a conectar Cloudflare a tu GitHub para que cada vez que guardes un cambio, se despliegue solo.

  1. Entra en tu panel de Cloudflare.
  2. En el menú lateral, ve a Workers & Pages.
  3. Haz clic en el botón azul “Create” y luego selecciona la pestaña Pages.
  4. Elige “Connect to Git”.
  5. Selecciona tu repositorio de GitHub (mi-proyecto-astro) y dale a Begin setup.

La configuración clave del Build: Cloudflare suele detectar automáticamente que es un proyecto de Astro, pero asegúrate de que estos valores estén correctos:

  • Framework preset: Astro
  • Build command: npm run build
  • Build output directory: dist

Dale a “Save and Deploy”.

En menos de un minuto, Cloudflare descargará tu código, instalará las dependencias, compilará el HTML estático y lo distribuirá por todo el planeta. Te dará una URL pública del tipo tu-proyecto.pages.dev.

Conclusión

Acabas de montar un pipeline de Integración y Despliegue Continuo (CI/CD) profesional de coste cero.

A partir de ahora, tu único trabajo es escribir código o contenido. Cada vez que hagas un git push a tu rama principal, Cloudflare detectará el cambio y actualizará tu web en segundos. Has eliminado el mantenimiento de la ecuación, permitiéndote centrarte exclusivamente en el producto.

🛠 Ficha Técnica

  • Frontend Framework: Astro
  • Hosting / CDN: Cloudflare Pages
  • Control de Versiones: Git + GitHub
  • Pipeline CI/CD: Integrado (Cloudflare Build)
  • Coste Mensual: 0,00 €