EmDash & Astro

EmDash est un CMS open-source full-stack conçu spécifiquement pour Astro, ajoutant du contenu reposant sur une base de données, une interface d’administration, une bibliothèque multimédia, des menus et des taxonomies à votre site.

Pour démarrer un nouveau projet Astro + EmDash à partir de zéro, utilisez la CLI d’EmDash pour générer un projet préconfiguré :

npm create emdash@latest

pnpm create emdash@latest

yarn create emdash@latest

Intégration avec Astro

EmDash s’exécute au sein de votre projet Astro et s’appuie sur une base de données. Vous pouvez accéder à l’interface d’administration à l’adresse /_emdash/admin pour modifier le contenu. Vos pages l’afficheront en interrogeant la base de données à l’aide des collections de contenu en direct.

Ce guide utilise l’adaptateur Node.js et une base de données SQLite locale. Consultez la documentation d’EmDash pour obtenir la liste des bases de données prises en charge.

Prérequis

Un projet Astro existant (Astro 6 ou une version ultérieure) configuré avec un adaptateur et output: "server".
Node.js v22.16.0 ou version ultérieure.

Installation des dépendances

React propulse l’interface d’administration d’EmDash et est une dépendance requise. Si votre projet n’utilise pas React, installez-le à l’aide de la commande astro add pour votre gestionnaire de paquets :

npx astro add react

pnpm astro add react

yarn astro add react

Vous devez également installer le paquet EmDash :

npm install emdash

pnpm add emdash

yarn add emdash

Ajout de l’intégration

Ajoutez l’intégration emdash() à votre fichier de configuration d’Astro, puis configurez une base de données ainsi qu’un backend de stockage multimédia :

import { defineConfig } from "astro/config";
import node from "@astrojs/node";
import react from "@astrojs/react";
import emdash, { local } from "emdash/astro";
import { sqlite } from "emdash/db";

export default defineConfig({
  output: "server",
  adapter: node({ mode: "standalone" }),
  integrations: [
    react(),
    emdash({
      database: sqlite({ url: "file:./data.db" }),
      storage: local({
        directory: "./uploads",
        baseUrl: "/_emdash/api/media/file",
      }),
    }),
  ],
});

Ajout du chargeur de collections en direct

Créez un fichier src/live.config.ts afin que la couche de contenu d’Astro puisse résoudre le contenu d’EmDash :

import { defineLiveCollection } from "astro:content";
import { emdashLoader } from "emdash/runtime";

export const collections = {
  _emdash: defineLiveCollection({ loader: emdashLoader() }),
};

La collection _emdash redirige en interne vers vos types de contenu (par exemple, articles et pages). Toutes les collections existantes reposant sur des fichiers dans src/content.config.ts continuent de fonctionner parallèlement à celle-ci.

Exécution d’EmDash en local

EmDash nécessite que vous complétiez l’assistant de configuration avant de tester vos propres pages. Tant que la configuration n’est pas terminée, aucun contenu n’est publié et les requêtes renvoient des résultats vides.

Démarrez le serveur de développement d’Astro pour initialiser la base de données et lancer l’interface d’administration :
- npm
- pnpm
- Yarn
Fenêtre de terminal
npm run dev
Fenêtre de terminal
pnpm run dev
Fenêtre de terminal
yarn run dev
Lors de la première exécution, EmDash crée data.db avec son schéma et deux collections par défaut : pages et posts.
Rendez-vous sur http://localhost:4321/_emdash/admin dans le navigateur. EmDash vous redirige vers l’assistant de configuration.
Dans l’étape Site, saisissez un titre de site et un slogan facultatif.
Dans l’étape Compte, saisissez votre adresse e-mail et votre nom. Cela crée le compte administrateur.
Dans l’étape Se connecter, sécurisez votre compte. Choisissez Créer une clé d’accès pour enregistrer une clé d’accès avec l’authentification biométrique de votre appareil, une clé de sécurité ou un code PIN.
Connectez-vous avec votre nouvelle clé d’accès pour accéder au tableau de bord.

Création de votre premier article

Dans le tableau de bord, cliquez sur le bouton + Post.
Ajoutez un titre et du contenu. EmDash stocke le texte enrichi au format Portable Text, modifié dans un éditeur de blocs. Un slug d’URL est généré à partir du titre et peut être modifié dans la barre latérale.
Cliquez sur Enregistrer, puis sur Publier. Seuls les articles publiés sont visibles par les visiteurs du site.

Affichage du contenu EmDash

Interrogez votre contenu avec getEmDashCollection() et getEmDashEntry(). Les deux suivent le modèle des collections en direct et renvoient les résultats au moment de la requête, de sorte que les modifications publiées apparaissent sans nouvelle compilation.

Affichage d’une liste d’articles

L’exemple suivant affiche une liste de tous les titres d’articles publiés, chacun étant lié à une page d’article individuelle :

---
import { getEmDashCollection } from "emdash";

const { entries: posts } = await getEmDashCollection("posts", {
  status: "published",
});
---
<ul>
  {posts.map((post) => (
    <li>
      <a href={`/posts/${post.data.slug}`}>{post.data.title}</a>
    </li>
  ))}
</ul>

Affichage d’un article individuel

Pour afficher le contenu d’un article individuel, récupérez-le par son slug et affichez le contenu Portable Text avec le composant <PortableText /> :

---
import { getEmDashEntry } from "emdash";
import { PortableText } from "emdash/ui";

const { slug } = Astro.params;
const { entry: post } = await getEmDashEntry("posts", slug);

if (!post) {
  return Astro.redirect("/404");
}
---
<article>
  <h1>{post.data.title}</h1>
  <PortableText value={post.data.content} />
</article>

Consultez le guide d’interrogation d’EmDash pour plus d’informations sur le filtrage, la pagination, l’aperçu des brouillons et l’édition visuelle.

Déploiement d’EmDash + Astro

EmDash se déploie en même temps que votre site sous la forme d’un projet Astro unique. Choisissez un hébergeur prenant en charge votre adaptateur, puis configurez une base de données de production et un espace de stockage multimédia.

Consultez le guide de déploiement d’EmDash pour Node.js et le guide de déploiement d’EmDash pour Cloudflare pour obtenir des instructions détaillées. Vous pouvez également consulter les guides de déploiement d’Astro et suivre les instructions pour effectuer le déploiement auprès de l’hébergeur de votre choix.

Ressources officielles

Plus de guides sur les CMS

CMS partenaires mis en avant

CloudCannon

CMS reposant sur Git, conçu pour la rapidité, la sécurité et une utilisation sans tracas.

Tous les guides CMS

Contribuer Communauté Parrainer