Crea un tema de blog para Astro desde cero con IA (2026)

Originalmente construí este tema de blog para Astro en marzo de 2025 usando WindSurf AI y Astro 5.4. El objetivo era simple: crear un tema de blog para Astro desde cero (responsive, rápido, con modo oscuro, búsqueda y paginación) y dejar que un IDE de programación con IA se encargara del scaffolding. Funcionó lo suficientemente bien como para que publicara el tema como un repositorio de código abierto. Este artículo es la versión actualizada, reescrita para Astro 7 y Tailwind CSS 4.3. El flujo de trabajo de scaffolding no ha cambiado mucho, pero las herramientas sí.

¿Qué es Devin Desktop (antes Windsurf)?

Devin Desktop es un IDE potenciado por IA que te permite describir lo que quieres en lenguaje natural y genera el código. Empezó como Codeium, se renombró a Windsurf en abril de 2025 y se lanzó como Devin Desktop en junio de 2026, después de que Cognition adquiriera el producto. Yo lo usé (bajo el nombre de Windsurf en aquel momento) para generar el esqueleto de todo este tema de blog simplemente chateando con él: cabecera, pie de página, paginación, modo oscuro, búsqueda y una docena de componentes más.

El mercado de los IDE de programación con IA ha cambiado mucho desde 2025. Cursor, Claude Code, los agentes de GitHub Copilot y varios más son opciones viables ahora. Cualquiera de ellos puede replicar el flujo de trabajo que describo a continuación. Si estás decidiendo entre ellos, consulta las mejores herramientas y agentes de programación con IA en 2026 para ver una comparación.

De Windsurf a Devin Desktop: qué cambió en 2026

• Abril de 2025: Codeium se renombró oficialmente a Windsurf.
• Julio de 2025: Cognition adquirió la propiedad intelectual, el producto y a ~210 empleados de Windsurf por ~250 M$ (después de que expirara una oferta de 3.000 M$ de OpenAI y de que Google cerrara un «reverse-acquihire» de 2.400 M$ para fichar a ejecutivos clave).
• 2 de junio de 2026: Cognition lanzó Windsurf como «Devin Desktop» mediante una actualización over-the-air. Los ajustes, las extensiones y los atajos de teclado se trasladaron automáticamente.
• 1 de julio de 2026: El agente Cascade (el antiguo backend de IA) llegó a su fin de vida y fue reemplazado por Devin Local, una reescritura en Rust que añade subagentes en paralelo.
• El modelo por defecto ahora es SWE-1.6 en los planes de pago (gratis en Pro y superiores). El plan gratuito tiene disponibilidad de modelos limitada. Los modelos frontera de Anthropic, OpenAI y Google están disponibles en los planes de pago.

Requisitos previos

Antes de empezar, asegúrate de tener:

Comprueba tu versión de Node:

node --version
# Should output v22.12.0 or higher

Si necesitas instalar o actualizar Node, consulta cómo instalar Node.js usando NVM.

Configuración inicial: crea el esqueleto de tu tema de blog en Astro

Estos son los pasos básicos del scaffolding. Yo los ejecuté manualmente al principio y después le pasé el proyecto al IDE de IA para la construcción de componentes. Cada comando de abajo se ejecuta desde un terminal estándar. El IDE de programación con IA acelera el proceso generando componentes y layouts mediante chat, pero la configuración en sí es manual.

Paso 1: Instala Astro 7

Crea un nuevo proyecto de Astro con la CLI oficial:

npm create astro@latest

Preguntas del asistente:

• Directorio: . (carpeta actual)
• Plantilla: un starter básico y mínimo
• Dependencias: Sí
• Git: Sí

Esto te da una instalación limpia de Astro con un servidor de desarrollo y Git inicializado. Astro 7 también añade astro dev --background para sesiones del servidor de desarrollo en segundo plano, útil si ejecutas un agente de IA que necesita comprobar el estado del servidor sin bloquear un terminal.

Verificación: Ejecuta npm run dev y abre http://localhost:4321. Deberías ver la página de bienvenida de Astro.

Paso 2: Añade Tailwind CSS 4

Integra Tailwind CSS para los estilos:

npx astro add tailwind

Esto instala @tailwindcss/vite y tailwindcss (actualmente ~4.3.x), crea ./src/styles/global.css y actualiza astro.config.mjs para incluir el plugin de Tailwind para Vite. Importa la hoja de estilos en tu archivo de layout (src/layouts/Layout.astro) para aplicar los estilos globalmente.

npm uninstall @tailwindcss/vite
npm install @tailwindcss/postcss

// postcss.config.mjs
export default { plugins: { "@tailwindcss/postcss": {} } };

Verificación: Ejecuta npm run dev de nuevo. Añade una clase de utilidad de Tailwind (como class="text-blue-500") a cualquier elemento de la página y confirma que se renderiza con el color correcto.

Paso 3: Tipografía, MDX e iconos de Astro

Instala las dependencias restantes en una sola pasada:

npm install -D @tailwindcss/typography
npx astro add mdx
npx astro add astro-icon
npm install @iconify-json/mdi

• @tailwindcss/typography: aplica estilos al contenido en prosa de Markdown/MDX sin CSS manual.
• @astrojs/mdx: permite mezclar Markdown y JSX en los archivos de contenido.
• astro-icon + @iconify-json/mdi: iconos ligeros del conjunto Material Design Icons.

En tu src/styles/global.css, usa el patrón de configuración CSS-first de Tailwind 4:

@import "tailwindcss";
@plugin "@tailwindcss/typography";
/* theme tokens via @theme { --color-...: ...; } */

Si necesitas una gestión de contenido más completa que el MDX basado en archivos, hay buenas opciones de CMS headless para Astro que combinan bien con esta configuración.

Verifica tu configuración

Repasa esta lista de comprobación antes de continuar:

Si usas el repositorio del tema publicado, también incluye npm run verify, que ejecuta la comprobación de tipos y una compilación de producción.

Construyendo el tema de blog con un IDE de programación con IA

Una vez configurado el proyecto base de Astro, abrí el IDE de IA y empecé a chatear. Mi objetivo: un tema de blog con cabecera, pie de página, paginación, categorías, etiquetas, modo oscuro/claro, búsqueda y más, todo con Tailwind CSS 4 y Astro 7.

Creando un tema de blog a base de chat

Así fue el flujo de trabajo con los prompts:

• Primer prompt: «Build a blog with Astro and Tailwind CSS 4. Use theme variables and Tailwind.» La IA analizó mi proyecto y comenzó el scaffolding.
• CSS global: Le pedí que definiera colores y fuentes personalizados en src/styles/global.css. Creó una configuración de tema flexible usando la directiva @theme de Tailwind 4.
• Funcionalidades: Solicité un interruptor de modo oscuro/claro, paginación y un menú responsive. Actualizó los layouts y componentes sobre la marcha.

Consejo sobre agrupar prompts: yo pedía 3-4 funcionalidades a la vez (p. ej., «Add header, footer, and pagination»). Esto minimiza el consumo de cuota y maximiza el resultado. Con el sistema de cuotas actual, las operaciones fallidas no consumen cuota, así que hay menos penalización por los prompts ambiciosos.

Funciones clave: búsqueda, modo oscuro, paginación y SEO

El IDE de IA entregó un tema con todos los componentes estándar:

• Una cabecera limpia y responsive con menú hamburguesa para móvil.
• Páginas para autores, categorías, etiquetas y series (tutoriales) con paginación.
• Migas de pan, tabla de contenidos, artículos relacionados (basados en etiquetas) y botones para compartir en redes sociales.
• Búsqueda en el lado del cliente (consulta la siguiente sección para más detalles).
• Acordeones, pestañas, botones y cajas de notificación para un contenido más rico.
• Componentes de metadatos optimizados, etiquetas Open Graph y datos estructurados.
• Un formulario de contacto que funciona sin necesidad de backend. Puedes añadir un formulario de contacto a tu blog de Astro sin escribir código del lado del servidor.

Si el contenido MDX basado en archivos se te queda corto, un CMS headless es el siguiente paso natural. Consulta opciones de CMS headless para Astro para ver una comparación.

Búsqueda en el lado del cliente: Fuse.js o Pagefind

El tema original usa Fuse.js para la búsqueda en el lado del cliente: sin React, sin servidor, solo Astro y un índice JSON. Funciona bien para blogs pequeños y medianos. Pero Pagefind se ha consolidado como una alternativa sólida, con un índice generado en tiempo de compilación y cero JS en el cliente para la infraestructura de búsqueda.

npm install fuse.js

npx pagefind --site dist

Fuse.js funciona muy bien para blogs pequeños y medianos; Pagefind escala mejor y no envía ningún JS del lado del cliente para el índice de búsqueda.

Astro 7 y Tailwind CSS 4: novedades en 2026

Si estás actualizando desde el tema original (Astro 5.4 / Tailwind 4.0) o vienes de un proyecto de Astro más antiguo, esta sección cubre los cambios importantes.

Velocidad de compilación de Astro 7 y el compilador en Rust

Astro 7 (junio de 2026) es una versión importante:

• Vite 8 / Rolldown: El bundler es de 10 a 30 veces más rápido que el Vite 6 que venía con Astro 5.
• Compilador .astro en Rust: Ahora es el predeterminado. Compilación de plantillas más rápida. Sin embargo, es «tal cual»: las etiquetas sin cerrar y los atributos sin terminar ahora dan error en lugar de corregirse silenciosamente. También se aplican las reglas de espacios en blanco de JSX: los saltos de línea entre elementos en línea colapsan.
• Pipeline de Markdown/MDX de Sätteri: Las tablas GFM, las notas al pie, el tachado, la puntuación inteligente, los IDs de encabezados y más vienen integrados. No se necesitan plugins de remark/rehype para las funciones estándar.
• Queued Rendering: renderizado de páginas ~2,4 veces más rápido por defecto.
• astro dev --background: Arranca el servidor de desarrollo en segundo plano y consúltalo mediante logging en JSON — ideal para flujos de trabajo con agentes de IA.

El resultado: las compilaciones son un 15-61 % más rápidas según el tamaño del sitio. Consulta las compilaciones más rápidas de Astro 7 para ver benchmarks en un sitio de 743 páginas. Si quieres ir más allá, hay una guía detallada sobre cómo acelerar tu compilación de Astro.

Resolución de problemas comunes de la actualización

npm uninstall @tailwindcss/vite
npm install @tailwindcss/postcss

export default { plugins: { "@tailwindcss/postcss": {} } };

Precios y cuotas: actualización de 2026

El modelo de precios que describí en el artículo original ya no existe.

Planes actuales (a agosto de 2026):

• Free (0 $): Cuota diaria/semanal ligera, Tab/autocompletado ilimitado.
• Pro (20 $/mes): Cuota estándar con reposición diaria + semanal.
• Max (200 $/mes): Cuotas más altas para usuarios intensivos.
• Teams (40 $/usuario/mes): Gestión de equipos y ajustes compartidos.
• Enterprise: Precios personalizados.

Diferencias clave respecto al sistema antiguo:

• El uso se basa en cuotas (reposición diaria + semanal), no en un pool mensual de créditos.
• Tab/autocompletado es ilimitado en todos los planes.
• Las operaciones fallidas no consumen cuota.
• Los modelos frontera de Anthropic, OpenAI y Google consumen cuota más rápido que los modelos nativos SWE-1.x. Usa SWE-1.6 para una mayor previsibilidad de costes.

La diferencia de precio frente a Cursor que destacaba el artículo original ya no existe. Ambos cuestan 20 $/mes en el plan de pago base. Elige según tus preferencias de flujo de trabajo, no por precio.

El resultado: un tema de blog de Astro público

En 3 días de trabajo (repartidos en una semana), construí el Bit Doze Astro Theme, un repositorio público con licencia MIT que incluye:

• Diseño responsive con Tailwind CSS 4
• Interruptor de modo oscuro/claro
• Tiempos de carga rápidos (Astro 7 + alojamiento en Cloudflare Pages)
• Búsqueda en el cliente, paginación, categorías, etiquetas, series
• Migas de pan, tabla de contenidos, artículos relacionados, compartir en redes sociales
• Contenido de demostración para una configuración fácil

No es 100 % perfecto — parte del código podría ser más limpio y hoy enfocaría algunos componentes de forma diferente. Pero es un punto de partida sólido y con mantenimiento activo (28 estrellas, 52 forks, último push en junio de 2026).

La demo está alojada en Cloudflare Pages. Para desplegar tu blog de Astro en Cloudflare, sigue la guía paso a paso.

Rendimiento: puntuaciones casi perfectas en PageSpeed

La salida estática de Astro + la optimización de imágenes + el CSS eficiente de Tailwind hacen que el tema obtenga puntuaciones casi perfectas en Google PageSpeed. Astro 7 es más rápido que 5.4: las compilaciones son más veloces, el renderizado también, y el resultado sigue siendo HTML/CSS estático puro con un mínimo de JS. Si quieres ir más allá, mira cómo acelerar tu compilación de Astro.

Nuevas funciones de Astro que vale la pena explorar

Astro 6 y 7 introdujeron capacidades que este tema podría aprovechar:

• Fonts API (astro:fonts): Aloja fuentes localmente, genera fallbacks y precarga las fuentes críticas — todo desde la configuración de Astro. Directamente relevante para un tema de blog.
• CSP API (security: { csp: true }): Cabeceras de Content Security Policy con un solo flag. Una victoria de «fiabilidad aburrida» para cualquier blog autoalojado.
• Live Content Collections: Contenido dinámico que se actualiza sin recompilar. Solo relevante si abandonas lo puramente estático, pero conviene conocerlo.
• Caché de rutas + proveedores de CDN: Cabeceras de caché integradas para despliegues compatibles con CDN.

Empieza tú mismo

Aquí va la versión corta:

1. Instala Astro y las dependencias — sigue la sección Configuración inicial de arriba.
2. Elige un IDE de programación con IA — Devin Desktop, Cursor, Claude Code o las mejores herramientas y agentes de programación con IA en 2026. Cualquiera de ellos puede generar el esqueleto de componentes y layouts vía chat.
3. Crea tu tema personalizado chateando — empieza con lo básico (cabecera, pie de página, layout) y luego añade funciones (modo oscuro, búsqueda, paginación).
4. Despliega — crea un blog de Astro gratis en Cloudflare o despliega tu blog de Astro en Cloudflare para producción.

El repositorio del tema tiene un README completo con instrucciones de configuración, y el contenido de demostración facilita ver cómo encaja todo. Hazle un fork, modifícalo, hazlo tuyo.