Créer votre premier site EmDash | EmDash CMS Everything

Ce tutoriel crée un site Node.js à partir du modèle Starter. Le résultat utilise SQLite et un stockage multimédia local, de sorte que vous pouvez terminer le tutoriel sans compte cloud.

Si vous avez déjà un site Astro, suivez plutôt Ajouter EmDash à un projet Astro existant.

Prérequis

Installez Node.js 22.16 ou plus récent et npm. Vérifiez la version Node.js installée avant de continuer :

node --version

La commande doit indiquer v22.16.0 ou une version plus récente.

Générer le site

Lancez le générateur interactif :
npm
```
npm create emdash@latest
```
pnpm
```
pnpm create emdash@latest
```
yarn
```
yarn create emdash
```
bun
```
bun create emdash@latest
```
Choisissez les options suivantes lorsque vous y êtes invité :
- Project name: my-emdash-site
- Where will you deploy? Node.js
- Which template? Starter
- Which package manager? Conservez le gestionnaire de paquets détecté à partir de la commande de l’étape 1.
- Install dependencies? Yes
Ces choix créent un site Node.js polyvalent avec Posts et Pages. Le générateur écrit aussi 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 nouvelle tentative affichée par le générateur avant de continuer.
Entrez dans le répertoire du projet et démarrez le serveur de développement :
npm
```
cd my-emdash-site
npm run dev
```
pnpm
```
cd my-emdash-site
pnpm dev
```
yarn
```
cd my-emdash-site
yarn dev
```
bun
```
cd my-emdash-site
bun dev
```
Laissez ce terminal ouvert. Astro affiche l’URL locale du site, normalement http://localhost:4321/.

Terminer la configuration

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

Saisissez un Site Title et un Tagline optionnel. Laissez Include sample content sélectionné pour que le tutoriel commence avec le post Welcome et la page About du modèle, puis sélectionnez Continue.
Saisissez Your Email et un Your Name optionnel, puis sélectionnez Continue.
Enregistrez une passkey lorsque le navigateur ouvre son invite d’identifiants. 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 modèle Starter à la base de données SQLite locale.

Publier une modification

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

Le modèle Starter appelle getEmDashCollection("posts") lorsque Astro rend la page d’accueil. Recharger la page lit la version publiée depuis EmDash à l’exécution.

Comment fonctionne le site généré

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

astro.config.mjs active le rendu serveur et l’adaptateur Node.js. Il enregistre aussi React pour le panneau d’administration et donne à EmDash une base de données SQLite et un répertoire pour les médias téléversés. Le fichier src/live.config.ts connecte ce contenu basé sur 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, afin que votre éditeur puisse vérifier les noms de collection et les champs dans le code de requête.

Le .env généré fournit la clé de chiffrement à l’exécution. Il est distinct du fichier SQLite qui stocke le modèle et le contenu.

Étapes suivantes

Lisez Architecture pour voir comment ces parties fonctionnent ensemble. Pour ajouter EmDash à un site qui existe déjà, suivez Ajouter EmDash à un projet Astro existant. Le guide Interroger le contenu couvre les filtres, la pagination, les brouillons et la gestion des erreurs. Lorsque le site est prêt à quitter votre machine, déployez-le sur Cloudflare Workers ou Node.js. Le guide Bibliothèque multimédia explique les téléversements, les champs multimédias, le remplacement et la suppression.