Logotipo de Bitdoze

Cómo Desplegar un Blog Astro.JS en Cloudflare

Despliega un blog o sitio web Astro.JS en Cloudflare Pages gratis.

Dragos

Actualizado Publicado 7 min de lectura

Cómo Desplegar un Blog Astro.JS en Cloudflare

Cloudflare Pages es una forma sólida (y gratuita) de alojar un blog estático en Astro. Obtienes 500 builds al mes, ancho de banda ilimitado y tu sitio corre sobre la CDN global de Cloudflare. Para un blog, es más que suficiente.

Cloudflare también adquirió el equipo de Astro en enero de 2026, así que la integración entre ambos no hará más que estrecharse. Si despliegas un sitio Astro estático — sin SSR, sin server islands — no necesitas ningún adaptador especial. Solo compila y haz push.

Esta guía te lleva paso a paso por el despliegue de un blog Astro en Cloudflare Pages desde cero. Usaremos uno de los temas de blog para Astro más populares como punto de partida.

Antes de empezar, asegúrate de tener esto configurado:

Si vienes de WordPress, mira cómo migramos un sitio WordPress a Astro.

También puedes autoalojar Astro en tu propio VPS con Coolify o EasyPanel si prefieres más control.

Videoguía

Paso 1: Elige un tema y clónalo

Necesitas un proyecto Astro para desplegar. Puedes empezar desde cero con npm create astro@latest, pero para un blog es más rápido partir de un tema.

Dos buenas opciones:

  • Bitdoze Astro Theme — un tema enfocado a blogs con etiquetas, categorías, soporte de series, búsqueda y RSS. Construido con Tailwind CSS v4.
  • AstroWind — una plantilla de propósito general con Astro + Tailwind CSS v4. Bien mantenida, es el tema de Astro con más estrellas en GitHub.

En GitHub, haz clic en Use this template para crear tu propio repo:

Botón Use this template de GitHub

Después clónalo en local:

bash
git clone [email protected]:your-username/your-repo.git
cd your-repo
npm install

Paso 2: Configura el tema

Los archivos de configuración exactos dependen del tema que hayas elegido. Esto es lo que debes cambiar en cada uno.

Bitdoze Astro Theme

La configuración vive en archivos separados dentro de src/config/:

src/config/site.ts — metadatos del sitio:

ts
export const site = {
  title: "Your Blog Name",
  description: "What your blog is about",
  author: "Your Name",
  logoText: "YourBlog",
  postsPerPage: 6,
  // ...
};

astro.config.mjs — define tu URL de producción:

js
export default defineConfig({
  site: "https://your-domain.com",
  // ...
});

src/config/menu.json — enlaces de navegación del header y el footer.

src/config/social.json — URLs de tus perfiles en redes sociales.

AstroWind

AstroWind usa un único archivo src/config.yaml:

yaml
site:
  name: "Your Blog Name"
  site: "https://your-domain.com"
  base: "/"

metadata:
  title:
    default: "Your Blog Name"
    template: "%s — Your Blog Name"
  description: "What your blog is about"

apps:
  blog:
    isEnabled: true
    postsPerPage: 6

Los colores y las fuentes se personalizan mediante CSS en src/components/CustomStyles.astro y src/assets/styles/tailwind.css (Tailwind CSS v4 usa un enfoque de configuración CSS-first — no hace falta tailwind.config.js para cambios básicos).

Paso 3: Añade tu contenido

Ambos temas guardan los posts del blog como archivos Markdown o MDX:

  • Tema Bitdoze: src/content/posts/
  • AstroWind: src/data/post/

Crea un archivo .md o .mdx nuevo con frontmatter:

md
---
title: "Your First Post"
description: "What this post is about"
date: 2026-06-29T00:00:00Z
image: "../../assets/images/your-image.jpg"
categories: ["blog"]
tags: ["astro", "tutorial"]
---

Your content here.

Borra los posts de demostración que vienen con el tema y añade los tuyos.

Paso 4: Prueba en local

Arranca el servidor de desarrollo para asegurarte de que todo se ve bien:

bash
npm run dev

Abre http://localhost:4321 en tu navegador. Comprueba que el título del sitio, la navegación, los posts y los estilos se ven correctamente.

Cuando estés satisfecho, compila la versión de producción para detectar posibles errores:

bash
npm run build

Si el build tiene éxito, sube los cambios a GitHub:

bash
git add .
git commit -m "configured my website"
git push

Paso 5: Despliega en Cloudflare Pages

  1. Inicia sesión en el dashboard de Cloudflare.
  2. Ve a Workers & Pages > Create application > pestaña Pages.
  3. Haz clic en Import an existing Git repository y conecta tu repo de GitHub.
  4. Configura los ajustes de build:
Ajuste Valor
Production branch main
Build command npm run build
Build output directory dist
Ajustes de build de Cloudflare Pages para Astro
  1. Haz clic en Save and Deploy.

Cloudflare instalará tus dependencias, ejecutará el build y desplegará tu sitio. Obtendrás una URL *.pages.dev en un par de minutos.

A partir de ahora, cada push a tu rama main dispara un rebuild y deploy automáticos. El plan gratuito te da 500 builds al mes — unos 16 deploys al día, más que suficiente para un blog.

Dominio personalizado

Para usar tu propio dominio:

  1. En tu proyecto de Pages, ve a Custom domains.
  2. Añade tu dominio. Si tu dominio ya está en Cloudflare, los registros DNS se configuran automáticamente.
  3. Si no, tendrás que añadir un registro CNAME que apunte tu dominio a <your-project>.pages.dev.

Configurar la versión de Node.js

Cloudflare Pages te permite controlar la versión de Node.js usada durante los builds. Como Astro requiere v22.12.0+, añade una variable de entorno si tu build falla con un error de versión de Node:

  1. En tu proyecto de Pages, ve a Settings > Environment variables.
  2. Añade NODE_VERSION con el valor 22.

Alternativamente, añade un archivo .node-version o .nvmrc en la raíz de tu proyecto:

text
22

Paso 6: Configura rebuilds automáticos con webhooks (opcional)

Si quieres que Cloudflare recompile cuando actualizas contenido desde un CMS (no solo con pushes de Git), puedes usar los Deploy Hooks de Cloudflare:

  1. En tu proyecto de Pages, ve a Settings > Builds > Deploy hooks.
  2. Crea una URL de webhook. Obtendrás una URL única a la que puedes hacer POST para disparar un build.
  3. Configura tu CMS para que haga POST a esa URL cuando el contenido cambie.

Qué ha cambiado desde que se publicó este artículo

La versión original de este artículo se escribió en 2022, cuando Astro era más joven y Cloudflare Pages más nuevo. Algunas cosas han cambiado:

  • Cloudflare adquirió el equipo de Astro en enero de 2026. Astro sigue siendo open-source y agnóstico de plataforma, pero Cloudflare es ahora la empresa que está detrás.
  • El adaptador @astrojs/cloudflare (v13+) abandonó el soporte para Cloudflare Pages y ahora solo apunta a Cloudflare Workers. Esto no afecta a los sitios estáticos — no necesitas el adaptador para un blog estático desplegado en Pages.
  • AstroWind se movió de onwidget/astrowind a arthelokyo/astrowind y se actualizó a Astro v6 + Tailwind CSS v4.
  • El tema de Bitdoze fue reescrito y ahora está en github.com/bitdoze/bitdoze-astro-theme con una nueva estructura de configuración.
  • El requisito de Node.js subió a v22.12.0+ (era v16 en el artículo original).

Próximos pasos

#Astro

Artículos relacionados