Migramos de microCMS a EmDash + Cloudflare

¿Qué es EmDash?

Un CMS presentado por Cloudflare y considerado como el sucesor espiritual de WordPress.
Un CMS completo basado en una arquitectura moderna que utiliza los diversos recursos de Cloudflare (D1/R2/Workers) + Astro, es decir, un CMS que es verdaderamente parte del ecosistema de Cloudflare.
Como prueba, hemos reemplazado experimentalmente nuestro blog implementado con microCMS a EmDash.

El sitio migrado está aquí → Yuru Log
Por ahora es un sitio experimental, así que mantenemos el tema predeterminado. Añadiremos el diseño en una fecha posterior.

Flujo de configuración

1. Creación del proyecto

Ejecuta npm create emdash@latest. Se te harán varias preguntas interactivas para que selecciones las opciones.

2. Creación de recursos de Cloudflare

Puedes crear bases de datos y almacenamiento fácilmente y realizar el despliegue sin complicaciones.

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

npx emdash dev inicia el entorno local. Accede a la
pantalla de administración http://localhost:4321/_emdash/admin para realizar la configuración inicial.

4. Despliegue y configuración inicial

Se implementa en Workers con npx wrangler deploy y se publica en https://[name].workers.dev.
Como el entorno local y remoto tienen bases de datos independientes, la configuración inicial (creación de cuenta de administrador) también es necesaria en el panel de control remoto.

Si integras con un repositorio de GitHub, es posible realizar despliegues automáticos con cada push (Panel de Cloudflare → Workers → Configuración → Compilación → Integrar con repositorio Git).

5. Migración de artículos desde microCMS

Se creó un script de migración para obtener todos los artículos de la API de microCMS e insertarlos mediante content create de EmDash CLI.

Puntos clave

• Convertir del editor enriquecido de microCMS (HTML) a Markdown antes de insertar
• Migrar las imágenes inicialmente con referencias de URL externa y luego subirlas a R2 para cambiar las referencias
• Usar npx emdash content create en lugar de npx emdash seed (seed no crea revisiones, por lo que los artículos no se mostrarán)

Después de probarlo

Es un CMS que combina lo mejor de ambos mundos: la "facilidad de configuración e implementación" de un headless CMS y la "conveniencia del control integral" de un CMS full-stack.
Lo mejor es que se basa en Astro, así que podemos aprovechar los conocimientos existentes tal como están. Tuvo la impresión de ser muy apropiado para blogs pequeños y medianos.
Sin embargo, como el adaptador de Cloudflare de Astro aún no es compatible con la API de caché, la generación de páginas desde D1 ocurre en cada solicitud, lo que resultó en un rendimiento lento. Parece que será necesario esperar la compatibilidad o implementar un almacenamiento en caché personalizado.

Como aún se encuentra en versión beta,

• La vista previa de borradores no funciona de forma predeterminada (se describe a continuación)
• El alineado al centro y la alineación a la derecha no se reflejan en el editor WYSIWYG
• Al editar elementos en Menús, las rutas relativas generan errores
• No se pueden reordenar campos personalizados
• No se pueden invitar usuarios

y otros puntos de preocupación (a partir de v0.1.0).

Parece que la adopción en proyectos reales aún está lejos.

Acerca de la vista previa de borradores

Aunque hay un botón "Preview draft" en la pantalla de edición, no es posible obtener una vista previa de artículos en estado de borrador.

EmDash tiene un mecanismo de vista previa, pero parece que no está habilitado por defecto, por lo que fue necesario tomar las siguientes medidas.

1. Configurar una clave secreta arbitraria en la variable de entorno PREVIEW_SECRET (puede generarse con npx emdash auth secret)
2. Modificar la página de artículo para obtener borradores usando verifyPreviewToken

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 });

Con esto, ahora es posible confirmar artículos en borrador desde el botón "Preview draft" en la pantalla de administración.

Conclusión

Esta vez implementé siguiendo las prácticas estándar como full-stack, pero también parece posible usarlo de manera más similar a un "headless CMS", recibiendo artículos mediante fetch e realizando compilaciones estáticas (SSG), así que me gustaría probar ese enfoque también en el futuro.

Aún es una versión beta recién lanzada. ¡La evolución futura promete ser muy emocionante!