Van microCMS naar EmDash + Cloudflare gemigreerd

Wat is EmDash?

Cloudflare heeft een CMS aangekondigd dat het geestelijke opvolger van WordPress is.
Het is een full-stack CMS dat gebruikmaakt van Cloudflare-resources (D1/R2/Workers) + Astro, met een modern architectuurontwerp, en het is precies een CMS binnen het Cloudflare-ecosysteem!
Als proef heb ik de blog die ik met microCMS had gebouwd experimenteel overgezet naar EmDash.

De gemigreerde site vind je hier → ゆるろぐ
Dit is een experimentele site, dus het standaardthema is nog ongewijzigd. Het ontwerp wordt later toegepast.

Installatiestappen

1. Project aanmaken

Voer npm create emdash@latest uit. Het script stelt interactief diverse vragen, die je één voor één beantwoordt.

2. Cloudflare-resources aanmaken

Zo maak je eenvoudig databases en opslag aan, en de deployment is ook makkelijk.

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 ontwikkeling

Met npx emdash dev start je de lokale omgeving.
Open het beheerdashboard via http://localhost:4321/_emdash/admin en voer de installatie uit.

4. Deployment en initiële configuratie

Met npx wrangler deploy wordt de site gedeployd naar Workers en is ze live via https://[name].workers.dev.
Lokale en externe omgevingen gebruiken aparte databases, dus ook in het externe beheerdashboard is de eerste installatie nodig (het aanmaken van een beheerdersaccount).

Je kunt ook een GitHub-repository koppelen, zodat automatisch wordt gedeployd bij elke push (Cloudflare-dashboard → Workers → Instellingen → Builds → Koppel Git-repository).

5. Artikelen migreren vanuit microCMS

We hebben een migratiescript geschreven, alle artikelen opgehaald via de microCMS API en ingevoerd met content create van de EmDash CLI.

Aandachtspunten

• De microCMS-richteksteditor (HTML) geconverteerd naar Markdown en vervolgens ingevoerd
• De afbeeldingen zijn eerst als externe URL-verwijzing gemigreerd en later naar R2 geüpload, waarna de verwijzingen zijn bijgewerkt.
• Gebruik npx emdash content create in plaats van npx emdash seed (seed maakt geen revisies aan, waardoor artikelen niet worden weergegeven).

Na het daadwerkelijk uitproberen

Het is een CMS dat de voordelen combineert van een headless CMS, zoals
eenvoudig te installeren en te implementeren, met die van een full-stack CMS, zoals de
volledige controle over het hele traject. Het sluit dus goed aan op wat je nodig hebt. Doordat het op Astro is gebouwd, kun je bestaande kennis direct inzetten, wat een groot voordeel is. Het lijkt me een goede keuze voor kleine tot middelgrote blogs. Wel vond ik de snelheid een punt van zorg. De Cloudflare-adapter voor Astro ondersteunt de Cache API nog niet, waardoor elke aanvraag de pagina opnieuw genereert vanuit D1. Dat maakt de site traag. Je kunt wachten tot er ondersteuning komt, of zelf caching implementeren.

Omdat het nog in bèta is,

• werkt de voorbeeldweergave van concepten standaard niet (zie hieronder)
• In de WYSIWYG-editor wordt gecentreerde en rechts uitgelijnde tekst niet weergegeven
• Bij het bewerken van menu-items geeft een relatief pad een fout
• Aangepaste velden kunnen niet worden gesorteerd
• Het is niet mogelijk om gebruikers uit te nodigen

There are also a few points that caught my attention, such as (as of v0.1.0).

It looks like it will still be a while before we can use it in actual client projects.

Over het voorbeeldweergeven van concepten

In het bewerkscherm is een knop "Preview draft" beschikbaar, maar het is niet mogelijk om artikelen in de conceptstatus te bekijken.

EmDash beschikt over een voorbeeldweergavemogelijkheid, maar die staat standaard niet ingeschakeld. Daarom waren de volgende stappen nodig.

1. Stel de omgevingsvariabele PREVIEW_SECRET in op een willekeurige geheime sleutel (te genereren met npx emdash auth secret)
2. Zorg ervoor dat de artikelpagina verifyPreviewToken gebruikt om het concept op te halen.

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

Hierna kunnen conceptartikelen worden bekeken via de knop "Preview draft" in het beheerscherm.

Conclusie

Dit keer heb ik het gewoon als full-stack geïmplementeerd, maar het lijkt ook mogelijk om artikelen via fetch op te halen en een SSG-build te maken, een gebruik dat eerder als "headless CMS" kan worden gezien. Dat wil ik later ook eens proberen.

Het is een bètaversie die pas net is verschenen. Ik kijk er erg naar uit hoe het zich verder ontwikkelt!