Erste EmDash-Site erstellen | EmDash CMS Everything

Dieses Tutorial erstellt eine Node.js-Site aus der Starter-Vorlage. Das Ergebnis nutzt SQLite und lokalen Medienspeicher, sodass Sie das Tutorial ohne Cloud-Konto abschließen können.

Wenn Sie bereits eine Astro-Site haben, folgen Sie stattdessen EmDash zu einem bestehenden Astro- Projekt hinzufügen.

Voraussetzungen

Installieren Sie Node.js 22.16 oder neuer und npm. Prüfen Sie die installierte Node.js-Version, bevor Sie fortfahren:

node --version

Der Befehl muss v22.16.0 oder eine neuere Version melden.

Die Site scaffolden

Starten Sie den interaktiven Scaffolder:
npm
```
npm create emdash@latest
```
pnpm
```
pnpm create emdash@latest
```
yarn
```
yarn create emdash
```
bun
```
bun create emdash@latest
```
Wählen Sie bei den Aufforderungen die folgenden Optionen:
- Project name: my-emdash-site
- Where will you deploy? Node.js
- Which template? Starter
- Which package manager? Behalten Sie den aus dem Befehl in Schritt 1 erkannten Paketmanager.
- Install dependencies? Yes
Diese Auswahl erzeugt eine allgemein nutzbare Node.js-Site mit Posts und Pages. Der Scaffolder schreibt auch einen generierten EMDASH_ENCRYPTION_KEY in die gitignorierte .env-Datei.

Wenn die Abhängigkeitsinstallation fehlschlägt, bleiben die Projektdateien erhalten. Führen Sie den vom Scaffolder ausgegebenen Wiederholungsbefehl aus, bevor Sie fortfahren.
Wechseln Sie in das Projektverzeichnis und starten Sie den Entwicklungsserver:
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
```
Lassen Sie dieses Terminal offen. Astro gibt die lokale Site-URL aus, normalerweise http://localhost:4321/.

Einrichtung abschließen

Öffnen Sie http://localhost:4321/_emdash/admin/. Eine neue Site leitet zum Einrichtungsassistenten um.

Geben Sie einen Site Title und optional einen Tagline ein. Lassen Sie Include sample content ausgewählt, damit das Tutorial mit dem Welcome-Beitrag und der About-Seite der Vorlage startet, und wählen Sie dann Continue.
Geben Sie Your Email und optional Your Name ein, und wählen Sie dann Continue.
Registrieren Sie einen Passkey, wenn der Browser seine Anmeldedaten-Aufforderung öffnet. Nach der Registrierung wählen Sie Open the dashboard.

Das Dashboard öffnet sich mit Posts und Pages in der Navigation. Der Einrichtungsassistent hat das Inhaltsmodell und die Beispielinhalte der Starter-Vorlage auf die lokale SQLite-Datenbank angewendet.

Eine Bearbeitung veröffentlichen

Öffnen Sie Posts, dann Welcome.
Ändern Sie den Titel in Hello from EmDash und wählen Sie dann Save.
Wählen Sie Publish changes, damit der gespeicherte Entwurf die für Besucher sichtbare Version wird.
Öffnen Sie http://localhost:4321/ in einem anderen Tab. Die Startseite listet Hello from EmDash.

Die Starter-Vorlage ruft getEmDashCollection("posts") auf, wenn Astro die Startseite rendert. Ein Neuladen der Seite liest die veröffentlichte Version zur Laufzeit aus EmDash.

Wie die generierte Site funktioniert

Der Scaffold erzeugt ein normales Astro-Projekt mit EmDash an drei Stellen verbunden.

astro.config.mjs aktiviert Server-Rendering und den Node.js-Adapter. Es registriert auch React für das Admin-Panel und gibt EmDash eine SQLite-Datenbank sowie ein Verzeichnis für hochgeladene Medien. Die Datei src/live.config.ts verbindet diese datenbankgestützten Inhalte mit Astros Live Content Collections.

Die Startseite fragt dann die Collection posts ab. Ihre Abfrage entspricht dem folgenden Teil der generierten Seite:

---
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 definiert die Collections Posts und Pages, ihre Felder und die Beispielinhalte, die der Einrichtungsassistent angewendet hat. Während der lokalen Entwicklung liest EmDash dieses Modell und aktualisiert emdash-env.d.ts, sodass Ihr Editor Collection-Namen und Felder im Abfragecode prüfen kann.

Die generierte .env liefert den Verschlüsselungsschlüssel zur Laufzeit. Sie ist getrennt von der SQLite-Datei, die Modell und Inhalte speichert.

Nächste Schritte

Lesen Sie Architektur dazu, wie diese Teile zusammenwirken. Um EmDash zu einer bereits bestehenden Site hinzuzufügen, folgen Sie EmDash zu einem bestehenden Astro-Projekt hinzufügen. Der Leitfaden Inhalte abfragen behandelt Filter, Paginierung, Entwürfe und Fehler- behandlung. Wenn die Site Ihre Maschine verlassen soll, deployen Sie sie auf Cloudflare Workers oder Node.js. Der Leitfaden Mediathek erklärt Uploads, Medienfelder, Ersetzung und Löschung.