Migration von microCMS zu EmDash + Cloudflare

Was ist EmDash?

Ein von Cloudflare vorgestelltes CMS, das als geistiger Nachfolger von WordPress gedacht ist.
Es handelt sich um ein Full-Stack-CMS mit moderner Architektur, das Cloudflare-Ressourcen (D1, R2, Workers) und Astro nutzt – ein echtes CMS aus dem Cloudflare-Ökosystem.
Zum Testen habe ich einen Blog, der zunächst mit microCMS umgesetzt war, experimentell auf EmDash umgestellt.

Die migrierte Website ist hier zu finden → Yuruлog
Da es sich um eine Testseite handelt, wird vorerst das Standard-Theme verwendet. Das Design wird zu einem späteren Zeitpunkt angepasst.

Ablauf der Einrichtung

1. Projekt erstellen

Führen Sie npm create emdash@latest aus. Im interaktiven Dialog werden verschiedene Fragen gestellt, die Sie nacheinander beantworten.

2. Cloudflare-Ressourcen erstellen

So lassen sich Datenbanken und Speicher einfach aufbauen und auch die Bereitstellung ist unkompliziert.

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

3. Lokale Entwicklung

Mit npx emdash dev wird die lokale Umgebung gestartet.
Auf das Admin-Panel http://localhost:4321/_emdash/admin greifen Sie zu, um die Einrichtung durchzuführen.

4. Bereitstellung und Ersteinrichtung

Mit npx wrangler deploy wird die Anwendung auf Workers bereitgestellt und unter https://[name].workers.dev veröffentlicht.
Da lokale und entfernte Umgebung getrennte Datenbanken verwenden, ist auch im entfernten Admin-Panel eine Ersteinrichtung (Anlegen des Administratorkontos) erforderlich.

Wenn Sie das Projekt mit einem GitHub-Repository verbinden, ist auch eine automatische Bereitstellung bei jedem Push möglich (Cloudflare-Dashboard → Workers → Einstellungen → Build → Git-Repository verbinden).

5. Migration von Artikeln aus microCMS

Wir haben ein Migrationsskript erstellt, alle Artikel über die microCMS-API abgerufen und anschließend mit content create der EmDash CLI importiert.

Wichtige Hinweise

• Konvertierung des microCMS-Rich-Editors (HTML) in Markdown vor dem Import
• Bilder wurden zunächst weiterhin über externe URLs referenziert. Anschließend wurden sie in R2 hochgeladen und die Referenzen entsprechend ersetzt.
• Statt npx emdash seed sollte npx emdash content create verwendet werden. Mit seed werden keine Revisionen erstellt, weshalb Artikel nicht angezeigt werden.

Praxistest

Es ist ein CMS, das die Einfachheit von Setup und Implementierung eines Headless CMS mit der Kontrolle eines Full-Stack-CMS verbindet, also das Beste aus beiden Welten.
Besonders positiv ist, dass es auf Astro basiert und sich vorhandenes Wissen direkt übertragen lässt. Mein Eindruck: Für kleine bis mittelgroße Blogs ist es gut geeignet.
Allerdings unterstützt der Astro-Cloudflare-Adapter die Cache API noch nicht. Dadurch werden bei jeder Anfrage Seiten aus D1 generiert, was die Geschwindigkeit spürbar bremst. Man sollte auf Unterstützung warten oder selbst eine Caching-Lösung umsetzen.

Da es sich noch um eine Beta-Version handelt,

• Die Vorschau für Entwürfe funktioniert standardmäßig nicht (siehe unten).
• Im WYSIWYG-Editor werden zentrierte und rechtsbündige Ausrichtungen nicht übernommen.
• Beim Bearbeiten von Menüpunkten führen relative Pfade zu einem Fehler.
• Benutzerdefinierte Felder lassen sich nicht sortieren.
• Benutzer können nicht eingeladen werden.

u. a. einige Punkte, die noch offen sind (Stand: v0.1.0).

Der Einsatz in echten Projekten dürfte also noch eine ganze Weile auf sich warten lassen.

Zur Vorschau von Entwürfen

Im Bearbeitungsbildschirm gibt es eine Schaltfläche "Preview draft", allerdings lassen sich Beiträge im Entwurfsstatus damit nicht in der Vorschau anzeigen.

EmDash verfügt zwar über eine Vorschaufunktion, diese ist standardmäßig jedoch offenbar nicht aktiviert. Dafür waren folgende Schritte nötig.

1. Einen beliebigen geheimen Schlüssel in der Umgebungsvariablen PREVIEW_SECRET setzen (erzeugbar mit npx emdash auth secret)
2. Auf der Beitragsseite den Entwurf über verifyPreviewToken abrufen

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

Damit lassen sich Entwurfsbeiträge nun über die Schaltfläche "Preview draft" im Admin-Bereich ansehen.

Fazit

Diesmal habe ich es wie üblich als Full-Stack-Anwendung umgesetzt. Es wäre aber auch denkbar, die Beiträge per fetch abzurufen und im SSG-Build zu verarbeiten, also als "Headless CMS". Das werde ich bei Gelegenheit ebenfalls ausprobieren.

Die Beta ist noch ganz frisch. Ich bin sehr gespannt, wie sie sich weiterentwickelt!