Von microCMS zu EmDash + Cloudflare migriert

Was ist EmDash?

Ein von Cloudflare präsentiertes CMS, das als geistiger Nachfolger von WordPress positioniert wird.
Ein vollständiges, modernes Stack-CMS, das Cloudflares verschiedene Ressourcen (D1/R2/Workers) + Astro nutzt – es ist wirklich ein CMS im Cloudflare-Ökosystem!
Als Experiment haben wir ein Blog, das ursprünglich mit microCMS umgesetzt wurde, versuchsweise zu EmDash migriert.

Die migrierte Website finden Sie hier → yuru log
Es ist vorerst eine Experimentierseite, daher nutzen wir noch das Standard-Theme. Das Design werden wir später anpassen.

Setup-Ablauf

1. Projektanlage

npm create emdash@latest ausführen. Ein interaktiver Dialog stellt mehrere Fragen, die Sie beantworten müssen.

2. Cloudflare-Ressourcen erstellen

So erstellen Sie ganz einfach Datenbanken und Speicher und stellen sie bereit.

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

npx emdash dev startet die lokale Umgebung. Greifen Sie auf die Admin-Oberfläche unter
http://localhost:4321/_emdash/admin zu und führen Sie das Setup durch.

4. Deployment und initiale Einrichtung

npx wrangler deploy stellt die Anwendung auf Workers bereit und macht sie unter https://[name].workers.dev verfügbar.
Da lokale und Remote-Umgebung separate Datenbanken verwenden, ist auch in der Remote-Admin-Oberfläche das initiale Setup (Erstellung des Admin-Kontos) erforderlich.

Durch die Integration mit einem GitHub-Repository können Sie automatische Deployments beim Pushen aktivieren (Cloudflare-Dashboard → Workers → Einstellungen → Build → GitHub-Repository verbinden).

5. Artikel-Migration von microCMS

Wir erstellten ein Migrationsskript, das alle Artikel von der microCMS API abruft und diese über die EmDash CLI mit content create importiert.

Wichtige Punkte

• Konvertieren Sie den Rich Editor von microCMS (HTML) → Markdown beim Import
• Bilder wurden zunächst mit externen URLs migriert und später in R2 hochgeladen, wobei die Referenzen entsprechend aktualisiert wurden
• Verwenden Sie npx emdash content create statt npx emdash seed (seed erstellt keine Revision und die Artikel werden nicht angezeigt)

Ich habe es selbst ausprobiert

Es ist ein CMS, das
die Benutzerfreundlichkeit eines Headless CMS – vom Setup bis zur Implementierung – mit der Bequemlichkeit eines Full-Stack CMS kombiniert, das alles aus einer Hand steuert.
Vor allem, weil es auf Astro basiert, kann man das vorhandene Know-how direkt nutzen – das ist praktisch. Der Eindruck war, dass es sich gut für kleine bis mittlere Blogs eignet. Allerdings hat der Cloudflare-Adapter von Astro noch keine Cache-API-Unterstützung, was bedeutet, dass die Seite bei jedem Request von D1 generiert wird – das war mir zu langsam. Es scheint, dass entweder auf eine Aktualisierung gewartet oder eine eigene Cache-Implementierung erforderlich ist.

Da es sich noch um eine Betaversion handelt,

• Das Entwurfsvorschau funktioniert standardmäßig nicht (siehe weiter unten)
• Zentrierung und Rechtsausrichtung werden im WYSIWYG-Editor nicht angewendet
• Beim Bearbeiten von Menüpunkten führen relative Pfade zu Fehlern
• Benutzerdefinierte Felder können nicht neu angeordnet werden
• Benutzer können nicht eingeladen werden

und einige andere Punkte, die aufgefallen sind (Stand v0.1.0).

Die Einführung in echten Projekten dürfte noch eine Weile auf sich warten lassen.

Über die Entwurfsvorschau

In der Bearbeitungsansicht gibt es eine Schaltfläche "Preview draft", aber es ist nicht möglich, Artikel im Entwurfszustand in der Vorschau anzuzeigen.

EmDash verfügt über einen Vorschaumechanismus, der jedoch standardmäßig nicht aktiviert ist. Daher war die folgende Konfiguration erforderlich.

1. Legen Sie einen beliebigen Secret-Schlüssel in der Umgebungsvariablen PREVIEW_SECRET fest (kann mit npx emdash auth secret generiert werden)
2. Verwenden Sie verifyPreviewToken auf der Artikelseite, um Entwürfe abzurufen

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 können Sie Entwurfsartikel über die Schaltfläche "Preview draft" in der Verwaltungsoberfläche anzeigen.

Fazit

Diese Implementierung erfolgte grundsätzlich als vollständiger Stack, aber es scheint auch möglich zu sein, EmDash auf eine "headless CMS"-weise zu nutzen, bei der Artikel über fetch abgerufen und als SSG-Build bereitgestellt werden. Ich möchte dies in Zukunft auch ausprobieren.

Es ist noch eine brandneue Betaversion. Ich freue mich sehr auf die weitere Entwicklung!