Topics

Was ist EmDash?

Cloudflare hat ein CMS angekündigt, das es als geistigen Nachfolger von WordPress betrachtet.
Es handelt sich um ein Full-Stack-CMS mit moderner Architektur, das verschiedene Cloudflare-Ressourcen (D1/R2/Workers) mit Astro kombiniert – ein echtes Cloudflare-Ökosystem-CMS!
Um zu sehen, was passieren würde, habe ich testweise einen Blog, den ich mit microCMS implementiert hatte, zu EmDash migriert.

Die migrierte Website finden Sie hier. → Yurulog
Dies ist nur eine Testseite, daher verwende ich vorerst das Standarddesign. Ich werde später ein anderes Design anwenden.

Einrichtungsprozess

1. Projekterstellung

npm create emdash@latestFühren Sie den Vorgang durch. Ihnen werden interaktiv verschiedene Fragen gestellt; wählen Sie daher die entsprechenden Optionen aus.

2. Cloudflare-Ressourcen erstellen

Die Erstellung von Datenbanken und Speichern auf diese Weise vereinfacht die Bereitstellung.

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 devDadurch wird Ihre lokale Umgebung gestartet.
Verwaltungsbildschirmhttp://localhost:4321/_emdash/adminRufen Sie [Website/Link] auf und führen Sie die Einrichtung durch.

4. Bereitstellung und Ersteinrichtung

npx wrangler deployAnschließend wird es an die Mitarbeiter verteilt.https://[name].workers.devEs wird auf [Plattformname] veröffentlicht.
Da die lokalen und entfernten Datenbanken unabhängig voneinander sind, ist eine Ersteinrichtung (Erstellung eines Administratorkontos) auch bei Verwendung der Fernverwaltungsoberfläche erforderlich.

Durch die Verknüpfung mit einem GitHub-Repository können Sie auch Deployments mit Push-Vorgängen automatisieren (Cloudflare Dashboard → Workers → Settings → Build → Link with Git Repository).

5. Artikelmigration aus microCMS

Erstellen Sie ein Migrationsskript, um alle Artikel von der microCMS-API abzurufen → EmDash CLIcontent createIch habe es hinzugefügt.

Punkt

• Konvertieren Sie den microCMS Rich-Editor (HTML) in Markdown und importieren Sie ihn.
• Die Bilder wurden zunächst über externe URLs migriert und später in R2 hochgeladen, wo die Referenzen aktualisiert wurden.
• npx emdash seedNicht  npx emdash content createBitte verwenden Sie   (da Seed keine Überarbeitungen erstellt, wird der Artikel nicht angezeigt).

Probieren Sie es im wirklichen Leben aus.

Dieses CMS vereint die einfache Einrichtung und Implementierung eines Headless-CMS mit dem Komfort der durchgängigen Kontrolle eines Full-Stack-CMS und bietet somit das Beste aus beiden Welten.
Das Beste daran ist, dass man dank der Astrologie-basierten Plattform sein vorhandenes Wissen nutzen kann, was großartig ist. Es scheint gut für kleine bis mittelgroße Blogs geeignet zu sein.

Da es sich jedoch noch in der Beta-Phase befindet,

• Die Entwurfsvorschau funktioniert standardmäßig nicht (siehe unten).
• Zentrierte Ausrichtung und Rechtsausrichtung werden im WYSIWYG-Modus nicht angezeigt.
• Bei der Bearbeitung von Menüpunkten führen relative Pfade zu einem Fehler.
• Benutzerdefinierte Felder können nicht sortiert werden.
• Benutzer können nicht eingeladen werden

Es gab einige Punkte, die Anlass zur Sorge gaben, wie beispielsweise die oben genannten (Stand: Version 0.1.0).

Über die Entwurfsvorschau

Obwohl auf dem Bearbeitungsbildschirm eine Schaltfläche „Entwurfsvorschau“ vorhanden ist, ist es nicht möglich, Artikel im Entwurfsformat in der Vorschau anzuzeigen.

EmDash verfügt über einen Vorschaumechanismus, der jedoch scheinbar nicht standardmäßig aktiviert ist. Daher waren die folgenden Schritte notwendig.

1. UmweltvariablenPREVIEW_SECRETLegen Sie einen beliebigen geheimen Schlüssel fest (npx emdash auth secret(Kann generiert werden mit)
2. Auf der ArtikelseiteverifyPreviewTokenVerwenden Sie diese Methode, um den Entwurf zu erhalten.

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

Sie können Ihre Artikelentwürfe nun über die Schaltfläche „Entwurfsvorschau“ im Admin-Bereich ansehen.

Zusammenfassung

Dieses Mal habe ich es gemäß den Grundlagen als Full-Stack-Anwendung implementiert, aber es scheint, als könnte es auch als "Headless CMS" verwendet werden, indem man Artikel mit fetch empfängt und einen SSG erstellt, daher möchte ich das beim nächsten Mal ausprobieren.

Es ist noch eine Beta-Version, daher bin ich sehr gespannt darauf, wie sie sich weiterentwickelt!