Migration de microCMS vers EmDash + Cloudflare

Qu'est-ce qu'EmDash ?

EmDash est un CMS annoncé par Cloudflare, présenté comme le successeur spirituel de WordPress.
Il s'agit d'un CMS full-stack reposant sur les ressources Cloudflare (D1, R2, Workers) et sur Astro, une architecture moderne. C'est vraiment un CMS au cœur de l'écosystème Cloudflare !
Pour tester, nous avons migré à titre expérimental un blog initialement mis en place avec microCMS vers EmDash.

Le site migré est accessible ici → Yurulog
Il s'agit d'un site d'essai, donc le thème par défaut est conservé pour l'instant. Nous appliquerons un design ultérieurement.

Déroulé de la configuration

1. Création du projet

Exécutez npm create emdash@latest. Plusieurs questions interactives vous seront posées, auxquelles il faudra répondre.

2. Création des ressources Cloudflare

Il suffit de cette façon pour créer des bases de données et du stockage, 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

L'environnement local démarre avec npx emdash dev.
Accédez à l'interface d'administration http://localhost:4321/_emdash/admin pour effectuer la configuration.

4. Déploiement et configuration initiale

Avec npx wrangler deploy, le projet est déployé sur Workers et publié à l'adresse https://[name].workers.dev.
Les bases de données de l'environnement local et de l'environnement distant étant indépendantes, la configuration initiale (création du compte administrateur) est également nécessaire dans l'interface d'administration distante.

En liant le dépôt GitHub, un déploiement automatique est également possible à chaque push (Tableau de bord Cloudflare → Workers → Paramètres → Build → Connecter un dépôt Git).

5. Migration des articles depuis microCMS

Nous avons créé un script de migration pour récupérer tous les articles via l'API microCMS, puis les importer avec la commande content create de l'EmDash CLI.

Points clés

• Conversion de l'éditeur enrichi microCMS (HTML) en Markdown avant importation
• Les images ont d'abord été migrées en gardant les URL externes, puis téléchargées ultérieurement sur R2 et leurs références remplacées.
• Il vaut mieux utiliser npx emdash content create plutôt que npx emdash seed (seed ne crée pas de révisions, donc l'article ne s'affiche pas).

Retour d'expérience après utilisation

Ce CMS réunit le meilleur des deux mondes : la simplicité de mise en place et de développement d'un CMS headless, et la maîtrise de bout en bout d'un CMS full-stack.
Surtout, comme il repose sur Astro, les connaissances existantes restent directement exploitables. Il me semble bien adapté aux blogs de petite à moyenne taille.
En revanche, l'adaptateur Cloudflare d'Astro ne prend pas en charge l'API Cache, si bien que chaque requête génère la page à partir de D1, ce qui ralentit les performances. Il faudra attendre la prise en charge ou mettre en place une mise en cache personnalisée.

Étant encore en bêta,

• l'aperçu des brouillons ne fonctionne pas par défaut (voir plus bas)
• Dans l'éditeur WYSIWYG, les alignements centré et à droite ne sont pas appliqués
• Lors de la modification des éléments de menu, les chemins relatifs génèrent une erreur
• Impossible de réordonner les champs personnalisés
• Impossible d'inviter des utilisateurs

Certains points restent toutefois à améliorer, notamment (au moment de la v0.1.0).

Son utilisation sur des projets réels ne sera sans doute pas envisageable avant un bon moment.

À propos de la prévisualisation des brouillons

L'écran d'édition propose un bouton « Preview draft », mais il n'est pas possible de prévisualiser un article en état de brouillon.

EmDash prévoit un mécanisme de prévisualisation, mais il ne semble pas être activé par défaut. Les étapes suivantes ont donc été nécessaires.

1. Définir une clé secrète de votre choix dans la variable d'environnement PREVIEW_SECRET (elle peut être générée avec npx emdash auth secret)
2. Faire en sorte que les pages d'articles récupèrent le brouillon à l'aide de verifyPreviewToken

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

Il est désormais possible de consulter les articles en brouillon depuis le bouton « Preview draft » de l'interface d'administration.

Conclusion

Cette fois, j'ai implémenté le projet en suivant l'approche full-stack standard. Cependant, il semble aussi possible de l'utiliser de manière « headless CMS », en récupérant les articles via fetch pour générer un build SSG. Je compte tester cette approche prochainement.

Il s'agit encore d'une version bêta tout juste sortie, et son évolution future me réjouit beaucoup !