Van microCMS naar EmDash + Cloudflare migreren

Wat is EmDash?

Een CMS dat Cloudflare heeft aangekondigd als de spirituele opvolger van WordPress.
Het is een full-stack CMS met een modern architectuur, bestaande uit diverse Cloudflare-bronnen (D1/R2/Workers) + Astro – echt een CMS uit het Cloudflare-ecosysteem!
Ter wille van het experiment hebben we een blog die oorspronkelijk met microCMS was gebouwd, experimenteel naar EmDash gemigreerd.

De gemigreerde site vindt u hier → Yuru Log
Dit is voorlopig een experimentele site, dus we gebruiken het standaardthema. Later passen we het design aan.

Installatieproces

1. Project aanmaken

Voer npm create emdash@latest uit. U wordt interactief om verschillende keuzes gevraagd.

2. Cloudflare-bronnen aanmaken

U kunt eenvoudig databases en opslagruimte aanmaken en implementeren op deze manier.

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

npx emdash dev start uw lokale omgeving. Ga naar het beheervenster
http://localhost:4321/_emdash/admin
en voltooi de instellingen.

4. Deployment en initiële instellingen

npx wrangler deploy implementeert naar Workers en publiceert op https://[name].workers.dev.
Omdat de lokale en externe database onafhankelijk zijn, is de initiële setup (beheerdersaccount aanmaken) ook nodig op het externe beheerdashboard.

Door GitHub-repository aan te koppelen is automatische deployment via push mogelijk (Cloudflare-dashboard → Workers → Instellingen → Build → GitHub-repository koppelen).

5. Artikelenmigratie vanuit microCMS

We hebben een migratiescript gemaakt, alle artikelen opgehaald via microCMS API en ingevoerd via de EmDash CLI content create commando.

Belangrijkste punten

• Zet de microCMS rijke editor (HTML) om naar Markdown voor import
• Afbeeldingen zijn eerst gemigreerd met externe URL's en later vervangen na upload naar R2
• Gebruik npx emdash content create in plaats van npx emdash seed (seed maakt geen revisie aan, dus het artikel wordt niet weergegeven)

Laten we het uitproberen

Het is een CMS die het beste van twee werelden combineert: de gemakkelijke setup en implementatie van een headless CMS met de volledige controle en gebruiksgemak van een full-stack CMS.
Het voordeel is vooral dat het op Astro is gebaseerd, dus je kunt je bestaande kennis direct toepassen. Voor kleine tot middelgrote blogs leek het erg geschikt.
Echter, omdat de Cloudflare-adapter van Astro nog geen Cache API-ondersteuning heeft, wordt de pagina bij elk verzoek opnieuw gegenereerd van D1, wat resulteert in lagere snelheid. Je zult moeten wachten op ondersteuning of zelf caching implementeren.

Omdat het nog in bèta is,

• Preview van concepten werkt standaard niet (zie hieronder)
• WYSIWYG-uitlijning naar het centrum en naar rechts wordt niet weergegeven
• Bij het bewerken van menu-items, relatieve paden veroorzaken fouten
• Aangepaste velden kunnen niet worden gerangschikt
• Gebruikers kunnen niet worden uitgenodigd

en meer problemen (op v0.1.0).

Implementatie in werkelijke projecten zal dus nog wel even op zich laten wachten.

Over het voorbeeld van concepten

In het bewerkingsscherm is er een knop 'Preview draft' beschikbaar, maar je kunt geen voorbeeld bekijken van artikelen in conceptstatus.

EmDash biedt een voorbeeldmechanisme, maar dit is standaard niet ingeschakeld, dus de volgende aanpassingen waren nodig.

1. Stel een willekeurige geheime sleutel in voor de omgevingsvariabele PREVIEW_SECRET (kan worden gegenereerd met npx emdash auth secret)
2. Gebruik verifyPreviewToken op de artikelpagina om concepten 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 });

Nu kun je conceptartikelen bekijken via de knop 'Preview draft' in het beheerpaneel.

Samenvatting

Deze keer heb ik het als een volledig stack geïmplementeerd, maar het lijkt ook mogelijk om het als een 'headless CMS' te gebruiken door artikelen op te halen met fetch en SSG-builds te maken. Ik ben van plan dat binnenkort ook uit te proberen.

Nog steeds een bètaversie die net is uitgebracht. Ik kijk ernaar uit hoe dit zich verder zal ontwikkelen!