Créez votre premier site EmDash | EmDash CMS Everything

Ce tutoriel crée un site Node.js à partir du template Starter. Le résultat utilise SQLite et le stockage média local, vous pouvez donc compléter le tutoriel sans compte cloud.

Prérequis

Installez Node.js 22.16 ou ultérieur et npm. Vérifiez la version de Node.js installée avant de continuer :

node --version

La commande doit afficher v22.16.0 ou une version ultérieure.

Créer le site

Créez my-emdash-site à partir du template Node.js Starter :
```
npm create emdash@latest my-emdash-site -- --template node:starter --pm npm --yes
```
Le choix explicite node:starter crée un site polyvalent avec Posts et Pages. Le scaffolder installe les dépendances et écrit un EMDASH_ENCRYPTION_KEY généré dans le fichier .env ignoré par git.

Si l’installation des dépendances échoue, les fichiers du projet restent en place. Exécutez la commande de relance affichée par le scaffolder avant de continuer.
Entrez dans le répertoire du projet et démarrez le serveur de développement :
```
cd my-emdash-site
npm run dev
```
Laissez ce terminal ouvert. Astro affiche l’URL du site local, normalement http://localhost:4321/.

Compléter la configuration

Ouvrez http://localhost:4321/_emdash/admin/. Un nouveau site redirige vers l’assistant de configuration.

Entrez un Site Title et une Tagline optionnelle. Laissez Include sample content sélectionné pour que le tutoriel commence avec le post Welcome et la page About du template, puis sélectionnez Continue.
Entrez Your Email et un Your Name optionnel, puis sélectionnez Continue.
Enregistrez un passkey quand le navigateur ouvre son invite de credentials. Après l’enregistrement, sélectionnez Open the dashboard.

Le tableau de bord s’ouvre avec Posts et Pages dans la navigation. L’assistant de configuration a appliqué le modèle de contenu et le contenu d’exemple du template Starter à la base de données SQLite locale.

Publier une modification

Ouvrez Posts, puis ouvrez Welcome.
Changez le titre en Hello from EmDash, puis sélectionnez Save.
Sélectionnez Publish changes pour que le brouillon sauvegardé devienne la version affichée aux visiteurs.
Ouvrez http://localhost:4321/ dans un autre onglet. La page d’accueil affiche Hello from EmDash.

Le template Starter appelle getEmDashCollection("posts") quand Astro rend la page d’accueil. Recharger la page lit la version publiée depuis EmDash au runtime.

Comment fonctionne le site généré

Le scaffold produit un projet Astro normal avec EmDash connecté à trois endroits.

astro.config.mjs active le rendu serveur et l’adaptateur Node.js. Il enregistre aussi React pour le panneau d’admin et donne à EmDash une base de données SQLite et un répertoire pour les médias uploadés. Le fichier src/live.config.ts connecte ce contenu adossé à la base de données aux Live Content Collections d’Astro.

La page d’accueil interroge ensuite la collection posts. Sa requête est équivalente à la partie suivante de la page générée :

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

const { entries: posts, cacheHint } = await getEmDashCollection("posts", {
	orderBy: { published_at: "desc" },
});

if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
---

<ul>
	{posts.map((post) => <li>{post.data.title}</li>)}
</ul>

seed/seed.json définit les collections Posts et Pages, leurs champs et le contenu d’exemple que l’assistant de configuration a appliqué. Pendant le développement local, EmDash lit ce modèle et actualise emdash-env.d.ts, pour que votre éditeur puisse vérifier les noms de collections et les champs dans le code de requête.

Le .env généré fournit la clé de chiffrement au runtime. Il est séparé du fichier SQLite qui stocke le modèle et le contenu.

Prochaines étapes

Lisez Architecture pour comprendre comment ces parties fonctionnent ensemble. Pour ajouter EmDash à un site existant, suivez Ajouter EmDash à un projet Astro existant. Le guide d’interrogation du contenu couvre les filtres, la pagination, les brouillons et la gestion des erreurs. Quand le site est prêt à quitter votre machine, déployez-le sur Cloudflare Workers ou Node.js. Le guide de la bibliothèque de médias explique les uploads, les champs média, le remplacement et la suppression.