Migration de microCMS vers EmDash + Cloudflare

Qu'est-ce qu'EmDash ?

Un CMS lancé par Cloudflare, considéré comme le successeur spirituel de WordPress.
C'est un CMS full-stack moderne utilisant l'écosystème Cloudflare (D1/R2/Workers) associé à Astro, vraiment un CMS de l'écosystème Cloudflare !
J'ai décidé d'expérimenter en migrant un blog implémenté avec microCMS vers EmDash.

Le site migré est ici → Yuru Log
C'est pour l'instant un site expérimental avec le thème par défaut. Je vais ajouter le design plus tard.

Flux de configuration

1. Création du projet

Exécutez npm create emdash@latest. Un assistant interactif vous posera diverses questions auxquelles vous devrez répondre.

2. Création des ressources Cloudflare

C'est facile de créer une base de données et un stockage de cette façon, et le déploiement est également simple.

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

3. Développement local

npx emdash dev démarre l'environnement local. Accédez à la
console d'administration http://localhost:4321/_emdash/admin et effectuez la configuration initiale.

4. Déploiement et configuration initiale

npx wrangler deploy déploie sur Cloudflare Workers et expose l'application à https://[name].workers.dev.
Comme la base de données locale et distante sont indépendantes, vous devez également effectuer la configuration initiale (création du compte administrateur) dans la console d'administration distante.

En intégrant avec un référentiel GitHub, vous pouvez également activer le déploiement automatique au moment du push (Tableau de bord Cloudflare → Workers → Paramètres → Build → Connecter le référentiel GitHub).

5. Migration des articles depuis microCMS

Un script de migration a été créé pour récupérer tous les articles via l'API microCMS et les importer à l'aide de content create de l'EmDash CLI.

Points clés

• Conversion de l'éditeur riche microCMS (HTML) vers Markdown lors de l'importation
• Les images ont d'abord été migrées en tant que références URL externes, puis téléchargées vers R2 et les références ont été mises à jour en conséquence
• Utilisez npx emdash content create plutôt que npx emdash seed (seed ne crée pas de révisions, les articles ne s'affichent donc pas)

Après l'avoir essayé

C'est un CMS qui combine le meilleur des deux mondes : la facilité d'intégration « de la configuration à la mise en œuvre » des headless CMS et la commodité du contrôle « de bout en bout » des CMS complets.
Surtout, comme il est basé sur Astro, on peut réutiliser directement nos connaissances existantes, ce qui est vraiment pratique. Cela semblait bien adapté aux petits et moyens blogs.
Cependant, comme l'adaptateur Cloudflare d'Astro ne supporte pas encore l'API Cache, la génération de pages à partir de D1 se fait à chaque requête, ce qui rend le système lent. Il faudra soit attendre la mise à jour, soit mettre en place nous-mêmes un système de cache.

Comme il s'agit toujours d'une version bêta,

• L'aperçu des brouillons ne fonctionne pas par défaut (détails ci-dessous)
• L'alignement au centre et l'alignement à droite ne s'appliquent pas dans l'éditeur WYSIWYG
• Lors de la modification d'éléments dans Menus, les chemins relatifs génèrent une erreur
• Impossible de réorganiser les champs personnalisés
• Impossible d'inviter des utilisateurs

Et d'autres points qui méritent attention (au moment de la v0.1.0).

L'intégration dans des projets réels semble encore loin devant nous.

À propos de l'aperçu des brouillons

Un bouton « Preview draft » est disponible dans l'écran d'édition, mais il n'est pas possible de prévisualiser les articles en état de brouillon.

EmDash dispose d'un mécanisme de prévisualisation, mais il ne semble pas activé par défaut, ce qui a nécessité la configuration suivante.

1. Définissez une clé secrète arbitraire dans la variable d'environnement PREVIEW_SECRET (peut être générée avec npx emdash auth secret)
2. Utilisez verifyPreviewToken sur la page d'article pour récupérer le brouillon

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

Avec cela, vous pouvez maintenant consulter les articles en brouillon à partir du bouton « Preview draft » de l'interface d'administration.

Conclusion

Cette fois, j'ai implémenté selon les bonnes pratiques en tant que full-stack, mais il semble possible aussi d'utiliser une approche de type « headless CMS » où les articles sont récupérés via fetch pour une construction SSG, je vais donc l'essayer bientôt.

Encore en version bêta fraîchement lancée. Son évolution future est extrêmement prometteuse !