Topics

Qu'est-ce que le tiret cadratin ?

Cloudflare a annoncé un CMS qu'elle considère comme le successeur spirituel de WordPress.
Il s'agit d'un CMS complet utilisant une architecture moderne, combinant diverses ressources Cloudflare (D1/R2/Workers) avec Astro, un véritable CMS de l'écosystème Cloudflare !
Par simple curiosité, j'ai migré à titre expérimental un blog que j'avais mis en place avec microCMS vers EmDash.

Le site migré se trouve ici. → Yurulog
Il s'agit d'un site expérimental, j'utilise donc le thème par défaut pour le moment. J'appliquerai un autre design plus tard.

Processus de configuration

1. Création du projet

npm create emdash@latestSuivez la procédure. Différentes questions vous seront posées de manière interactive ; sélectionnez les options appropriées.

2. Créer des ressources Cloudflare

La création de bases de données et d'un système de stockage de ce type facilite le déploiement.

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 devCela va démarrer votre environnement local.
Écran de gestionhttp://localhost:4321/_emdash/adminAccédez à [site web/lien] et effectuez la configuration.

4. Déploiement et configuration initiale

npx wrangler deployIl est ensuite déployé sur les travailleurs.https://[name].workers.devIl sera disponible sur [nom de la plateforme].
Étant donné que les bases de données locales et distantes sont indépendantes, une configuration initiale (création d'un compte administrateur) est nécessaire même lors de l'utilisation de l'écran d'administration à distance.

En vous connectant à un dépôt GitHub, vous pouvez également automatiser les déploiements avec des envois (Tableau de bord Cloudflare → Workers → Paramètres → Build → Lier au dépôt Git).

5. Migration des articles depuis microCMS

Créez un script de migration pour récupérer tous les articles depuis l'API microCMS → Interface de ligne de commande EmDashcontent createJe l'ai ajouté.

indiquer

• Convertissez l'éditeur enrichi microCMS (HTML) en Markdown, puis importez-le.
• Les images ont d'abord été migrées à l'aide d'URL externes, puis téléchargées ultérieurement sur R2, où les références ont été mises à jour.
• npx emdash seedNon  npx emdash content createUtilisez (car la graine ne crée pas de révisions, l'article ne sera pas affiché)

Je l'ai effectivement essayé.

Ce CMS combine la facilité d'installation et de mise en œuvre d'un CMS headless avec la commodité d'un contrôle de bout en bout d'un CMS full-stack, offrant ainsi le meilleur des deux mondes.
Mieux encore, comme il est basé sur Astro, vous pouvez tirer parti de vos connaissances existantes, ce qui est un atout considérable. Il semble parfaitement adapté aux blogs de petite et moyenne taille.

Cependant, comme il est encore en version bêta,

• L'aperçu du brouillon ne fonctionne pas par défaut (voir ci-dessous).
• L'alignement centré et l'alignement à droite ne sont pas pris en compte dans l'affichage WYSIWYG.
• Lors de la modification d'éléments dans les menus, les chemins relatifs entraînent une erreur.
• Les champs personnalisés ne peuvent pas être triés.
• Impossible d'inviter des utilisateurs

Il y avait quelques points préoccupants, tels que ceux mentionnés ci-dessus (à partir de la version 0.1.0).

À propos de l'aperçu du brouillon

Bien qu'un bouton « Aperçu du brouillon » soit disponible sur l'écran d'édition, il n'est pas possible de prévisualiser les articles sous forme de brouillon.

EmDash dispose d'un mécanisme de prévisualisation, mais celui-ci ne semble pas être activé par défaut ; les étapes suivantes ont donc été nécessaires.

1. variables environnementalesPREVIEW_SECRETDéfinissez une clé secrète arbitraire (npx emdash auth secret(Peut être généré avec)
2. Sur la page de l'articleverifyPreviewTokenUtilisez cette méthode pour obtenir 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 });

Vous pouvez désormais consulter vos brouillons d'articles en cliquant sur le bouton « Aperçu du brouillon » du panneau d'administration.

résumé

Cette fois-ci, je l'ai implémenté comme une application complète, en respectant les principes de base, mais il semble qu'il pourrait également être utilisé comme un « CMS headless » en recevant les articles avec fetch et en créant un SSG ; j'aimerais donc essayer cela la prochaine fois.

C'est encore une version bêta, donc j'ai vraiment hâte de voir comment elle va évoluer !