Migramos de microCMS a EmDash + Cloudflare

¿Qué es EmDash?

Es un CMS anunciado por Cloudflare que se presenta como el sucesor espiritual de WordPress.
Es un CMS full-stack con una arquitectura moderna que utiliza recursos de Cloudflare (D1, R2 y Workers) junto con Astro, por lo que encaja perfectamente en el ecosistema de CMS de Cloudflare.
Como prueba rápida, migramos a EmDash el blog que habíamos implementado con microCMS, a modo de experimento.

Sitio migrado aquí → Yurulog
Como se trata de un sitio de prueba, mantiene el tema predeterminado. Más adelante le aplicaremos un diseño.

Flujo de configuración

1. Crear el proyecto

Ejecute npm create emdash@latest. Es interactivo y le hará varias preguntas, así que vaya seleccionando las opciones.

2. Crear recursos en Cloudflare

Así es como se crean bases de datos y almacenamiento, y el despliegue también es sencillo.

npx wrangler login
npx wrangler d1 create my-site
npx wrangler r2 bucket create my-site-media
npm run build && npm run deploy

3. Desarrollo local

Con npx emdash dev se inicia el entorno local.
Acceda al panel de administración en http://localhost:4321/_emdash/admin para realizar la configuración.

4. Despliegue y configuración inicial

Con npx wrangler deploy se despliega en Workers y el sitio queda publicado en https://[name].workers.dev.
Como las bases de datos del entorno local y del remoto son independientes, también es necesario realizar la configuración inicial (creación de la cuenta de administrador) en el panel remoto.

Si se vincula con un repositorio de GitHub, también es posible el despliegue automático con cada push (Panel de Cloudflare → Workers → Configuración → Compilación → Conectar repositorio de Git).

5. Migración de artículos desde microCMS

Se creó un script de migración que obtiene todos los artículos a través de la API de microCMS y los cargó con content create de la CLI de EmDash.

Puntos clave

• Conversión del editor enriquecido (HTML) de microCMS a Markdown antes de la carga
• Las imágenes se migraron primero manteniendo las URL externas como referencia, y después se subieron a R2 y se actualizaron las rutas de referencia.
• Usa npx emdash content create en lugar de npx emdash seed (seed no crea revisiones, por lo que el artículo no se muestra).

Probado en la práctica

Combina lo mejor de ambos mundos: la facilidad de «configuración e implementación» de un CMS headless y la comodidad de «control integral» de un CMS full-stack.
Lo más destacable es que, al estar basado en Astro, se puede aprovechar directamente el conocimiento existente. Me pareció especialmente adecuado para blogs de pequeña a mediana escala.
Sin embargo, el adaptador de Astro para Cloudflare no es compatible con la Cache API, por lo que cada solicitud genera la página desde D1 y eso hace que la velocidad sea lenta. Habrá que esperar a que haya soporte o implementar una caché propia.

Como todavía está en versión beta,

• La vista previa de borradores no funciona por defecto (ver más abajo)
• En WYSIWYG, la alineación centrada y a la derecha no se refleja
• Al editar los elementos de Menus, las rutas relativas generan un error
• No se pueden reordenar los campos personalizados
• No se pueden invitar usuarios

etc. Also, there are a few points that stand out (as of v0.1.0).

It looks like adoption in real projects is still quite a way off.

About draft previews

The editing screen includes a "Preview draft" button, but it was not possible to preview articles in draft status.

EmDash includes a preview mechanism, but it does not appear to be enabled by default, so the following steps were required.

1. Set any secret key in the environment variable PREVIEW_SECRET (it can be generated with npx emdash auth secret)
2. Update the article page to use verifyPreviewToken to retrieve the draft.

import { getEmDashEntry, verifyPreviewToken } from "emdash";

const preview = await verifyPreviewToken({
  url: Astro.url,
  secret: import.meta.env.PREVIEW_SECRET,
});

const { entry, isPreview } = await getEmDashEntry("posts", slug, { preview });

With this in place, you can now check draft articles from the "Preview draft" button in the admin screen.

Conclusión

This time I implemented it as a full-stack app, as is standard, but it also seems possible to use it in a "headless CMS" style, fetching articles and building them with SSG, so I plan to try that approach next time.

This is a beta version that just came out, and I am very excited to see how it evolves!