WordPress y Astro no son enemigos: sirven a públicos distintos y, bien combinados, pueden dar lo mejor de cada mundo. Si estás valorando migrar de WordPress a Astro para ganar rendimiento, control y simplicidad (archivos Markdown, build estático, cero PHP) o quieres mantener WordPress como CMS y usarlo headless para servir contenidos a un front en Astro, esta guía te acompaña paso a paso con decisiones, comandos y patrones listos para producción.
En una línea: Astro ofrece front-end estático y componentes modernos con casi cero JS por defecto; WordPress aporta panel editorial y ecosistema. Puedes migrar por completo o desacoplar (headless) para quedarte con lo mejor de ambos.
1) ¿Cuándo conviene Astro y cuándo seguir con WordPress?
Elige Astro si:
- Tu sitio es de contenido (blog, docs, portfolio) y buscas tiempos de carga mínimos (LCP/CLS de lujo) y menor superficie de ataque (no hay PHP ni base de datos en el front).
- Te sientes cómodo trabajando con código (Git, CI/CD) y Markdown/MDX.
- Quieres control total de componentes, estilos y despliegue (Vercel/Netlify/Cloudflare, VPS, etc.).
Elige WordPress headless + Astro si:
- Necesitas un panel editorial para autores no técnicos, roles, flujos de revisión y plugins editoriales.
- Deseas mantener WordPress como fuente de datos (REST/GraphQL) y servir ese contenido con un front Astro ultra rápido, seguro y escalable.
- Quieres SEO sólido sin sacrificar experiencia de edición (cambios en WP, build/deploy en Astro).
2) Similitudes y diferencias clave
Similitudes
- Ambos son ideales para sitios de contenido y soportan Markdown (en WP vía plugin).
- El diseño por bloques/componentes existe en ambos: Gutenberg en WP; componentes en Astro.
Diferencias
- En WP editas desde un dashboard online; en Astro lo haces en un editor de código y un entorno de desarrollo local o en la nube (IDX, StackBlitz, CodeSandbox, Gitpod).
- WP tiene un mar de plugins/temas; en Astro crearás más a mano o partirás de plantillas, con menos “magia negra” y más control.
- WP guarda contenido en base de datos; Astro usa archivos (Markdown/MDX). En modo headless, Astro consume WP por REST o GraphQL.
3) Opción A — Migración completa de un blog WordPress a Astro (contenido en Markdown)
Paso 1: crear un proyecto con el starter de blog
npm create astro@latest -- --template blog
# también: pnpm dlx create-astro@latest --template blog
# o yarn create astro --template blog
Lenguaje del código: CSS (css)Paso 2: exportar entradas de WordPress a Markdown
- Usa una herramienta de export a Markdown (existen varias: conversores WP → MD).
- Revisa frontmatter (título, fecha, slug, etiquetas, categorías) y normaliza imágenes/rutas.
- Para sitios grandes/complicados, considera exportar por lotes y automatizar sustituciones (enlaces internos, shortcodes).
Paso 3: estructura de contenido en Astro
- Ubica los posts en
src/content/osrc/pages/blog/(según el starter). - Si usas Content Collections de Astro, define el schema para tipar metadatos y habilitar validación.
Paso 4: componentes, estilos y navegación
- Construye o adapta layouts y componentes (cabecera, footer, tarjetas, paginación).
- Sustituye plugins WP (breadcrumbs, TOC) por componentes nativos o integraciones de Astro.
Paso 5: SEO, imágenes y desempeño
- Usa
@astrojs/sitemap,@astrojs/imagey etiquetas meta correctas. - Minimiza JS: Astro renderiza 0 KB JS por defecto si no añades interactividad.
- Activa pre-render y usa un CDN para estáticos.
Paso 6: despliegue y dominio
- Despliega en tu proveedor favorito (Vercel/Netlify/Cloudflare/Pages/VPS).
- Ajusta DNS para mantener la misma URL del sitio.
- Si conservarás el WP antiguo como archivo o staging, apágalo del dominio principal.
Ventajas: máximo rendimiento, seguridad y control, menor mantenimiento del back.
Coste: pierdes el panel; edición será en Markdown/Git (o añades un CMS headless externo).
4) Opción B — WordPress Headless con Astro (mantener WP como CMS)
4.1. Exponer datos con la API de WordPress
- REST API disponible por defecto:
https://TU-SITIO/wp-json/wp/v2/ - Puedes instalar WPGraphQL o Gato GraphQL si prefieres GraphQL.
- Sin autenticación, la API solo lee (no modifica), suficiente para públicos.
Para contenidos privados, habilita auth (tokens/jwt/plugins).
Ejemplo REST (posts):
const res = await fetch("https://[TU-SITIO]/wp-json/wp/v2/posts");
const posts = await res.json();
Lenguaje del código: JavaScript (javascript)Render en Astro:
<h1>Astro + WordPress 🚀</h1>
{posts.map((post) => (
<>
<h2 set:html={post.title.rendered} />
<p set:html={post.content.rendered} />
</>
))}
Lenguaje del código: HTML, XML (xml)Optimiza la respuesta:
- Limita campos:
?_fields=author,id,excerpt,title,link - Incluye recursos relacionados:
?_embed(imagen destacada, autor, etc.)
4.2. Listados y rutas dinámicas en Astro
Listado (index.astro) con REST “dinos” a modo de ejemplo:
import Layout from "../layouts/Layout.astro";
let res = await fetch("https://norian.studio/wp-json/wp/v2/dinos");
let posts = await res.json();
<Layout title="Dinos!">
<section>
<h1>List of Dinosaurs</h1>
{posts.map((post) => (
<article>
<h2>
<a href={`/dinos/${post.slug}/`} set:html={post.title.rendered} />
</h2>
<Fragment set:html={post.content.rendered} />
</article>
))}
</section>
</Layout>
Lenguaje del código: JavaScript (javascript)Página dinámica por slug (src/pages/dinos/[slug].astro):
import Layout from '../../layouts/Layout.astro';
const { slug } = Astro.params;
let res = await fetch(`https://norian.studio/wp-json/wp/v2/dinos?slug=${slug}`);
let [post] = await res.json();
// Requerido para estático (no para SSR):
export async function getStaticPaths() {
let data = await fetch("https://norian.studio/wp-json/wp/v2/dinos");
let posts = await data.json();
return posts.map((post) => ({
params: { slug: post.slug },
props: { post },
}));
}
<Layout title={post.title.rendered}>
<article>
<h1 set:html={post.title.rendered} />
<Fragment set:html={post.content.rendered} />
</article>
</Layout>
Lenguaje del código: PHP (php)Imagen destacada con _embed:
const { slug } = Astro.params;
let res = await fetch(`https://norian.studio/wp-json/wp/v2/dinos?slug=${slug}&_embed`);
let [post] = await res.json();
<img src={post._embedded['wp:featuredmedia']['0'].media_details.sizes.medium.source_url} />
Lenguaje del código: JavaScript (javascript)4.3. Flujo editorial y despliegue
- Los editores siguen usando WordPress para escribir y publicar.
- El front Astro se construye y despliega aparte (CI/CD).
Opciones según tu cadencia:- ISR/SSR: servir dinámico y cachear (menos builds).
- SSG + Webhooks: cuando publicas en WP, disparas un rehidrato/build del front.
- Mantén la URL (dominio) apuntando al sitio Astro. WP puede quedar en subdominio (p.ej.,
cms.tu-dominio.com) o detrás de acceso restringido.
Ventajas: mejor experiencia editorial y mejor rendimiento de cara al usuario final; desacoplamiento te deja evolucionar cada capa sin romper la otra.
5) SEO, rendimiento y seguridad: buenas prácticas
- Sitemap + robots: usa
@astrojs/sitemapy definerobots.txt. - Meta y datos estructurados: componetiza
Head(OpenGraph, Twitter, JSON-LD). - Imágenes:
@astrojs/imagepara resize/AVIF/WebP; cachea y sirve desde CDN. - JS mínimo: Astro cero JS por defecto; añade interactividad solo con islas donde lo necesites.
- Caché: activa caching de HTML estático y activos en tu CDN; para SSR, sienta TTL y invalidation.
- Seguridad: en headless, oculta el WP público si no hace falta; rate limit a la API; CORS controlado.
6) Producción y despliegue
- Hosting: Vercel, Netlify, Cloudflare Pages, Render, fly.io o tu VPS (Nginx).
- CI/CD: GitHub Actions, GitLab CI, etc. Pipeline típico:
npm cinpm run build- Deploy con
vercel deploy/netlify deploy/ rsync a tu servidor.
- Dominios y SSL: finaliza con HTTPS y redirects correctos, prueba rutas dinámicas.
7) Checklist de migración rápida
- Audita entradas, páginas, medios, taxonomías y URLs en WP.
- Decide A (migrar) o B (headless).
- Crea starter de Astro y estructura de contenido.
- Replica navegación, layouts y componentes cruciales.
- Integra API (si headless) y define paths dinámicos.
- Añade SEO, sitemap, imágenes y analítica.
- Configura CI/CD y dominio.
- Prueba performance (Lighthouse, WebPageTest) y accesibilidad.
- Plan de redirects 301 si cambian rutas.
8) Preguntas frecuentes
¿Puedo seguir usando el editor de WordPress con Astro?
Sí. En modelo headless, WP sigue siendo tu CMS. Astro consume datos por REST/GraphQL y renderiza el front con tiempos de carga excelentes.
¿Necesito autenticación para leer la API de WordPress?
Para contenido público, no (la REST API lee sin auth). Para privado (borradores, pagos, miembros) o acciones de escritura, configura auth (JWT, application passwords, etc.).
¿Qué hay del SEO al pasar a Astro?
Astro genera HTML estático rápido, ideal para SEO. Conserva slugs y aplica redirects si cambian URLs. Añade sitemap, meta y datos estructurados.
¿Qué pasa con los plugins de WordPress?
En migración completa, los sustituyes por componentes/integraciones en Astro. En headless, los plugins que alteran contenido (p.ej., campos personalizados) pueden seguir aplicando si su salida llega a la API.
¿Cómo manejo imágenes destacadas y medios de WordPress en Astro?
Con ?_embed en REST recuperas featured media y tamaños. Sirve las imágenes a través de CDN y considera @astrojs/image para optimizar.
Recursos y referencia
- Guía oficial: Migrating from WordPress — pasos y starters para blogs.
- WordPress Headless & Astro — cómo consumir REST/GraphQL, rutas dinámicas y
_embed. - Starters en astro.new y theme showcase.
- Tutorial Build a Blog (Astro) — ideal si vienes de editor visual y te inicias con Git/GitHub.
Fuentes: documentación oficial de Astro (Migrating from WordPress, Headless WordPress & Astro) y ejemplos públicos de consumo de WordPress REST API con Astro.
