Erstellen Sie Ihre erste EmDash-Website

Dieses Tutorial erstellt eine Node.js-Website aus dem Starter-Template. Das Ergebnis verwendet SQLite und lokalen Medien-Storage, sodass Sie das Tutorial ohne Cloud-Konto abschließen können.

Voraussetzungen

Installieren Sie Node.js 22.16 oder höher und npm. Überprüfen Sie die installierte Node.js-Version, bevor Sie fortfahren:

node --version

Der Befehl muss v22.16.0 oder eine spätere Version ausgeben.

Website erstellen

Erstellen Sie my-emdash-site aus dem Node.js-Starter-Template:
```
npm create emdash@latest my-emdash-site -- --template node:starter --pm npm --yes
```
Die explizite Wahl node:starter erstellt eine Allzweck-Website mit Posts und Pages. Der Scaffolder installiert Abhängigkeiten und schreibt einen generierten EMDASH_ENCRYPTION_KEY in die gitignored .env-Datei.

Wenn die Installation der Abhängigkeiten 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:
```
cd my-emdash-site
npm run dev
```
Lassen Sie dieses Terminal offen. Astro gibt die lokale Website-URL aus, normalerweise http://localhost:4321/.

Setup abschließen

Öffnen Sie http://localhost:4321/_emdash/admin/. Eine neue Website leitet zum Setup-Assistenten weiter.

Geben Sie einen Site Title und eine optionale Tagline ein. Lassen Sie Include sample content ausgewählt, damit das Tutorial mit dem Welcome-Post und der About-Seite des Templates beginnt, dann wählen Sie Continue.
Geben Sie Your Email und einen optionalen Your Name ein, dann wählen Sie Continue.
Registrieren Sie einen Passkey, wenn der Browser seine Credential-Abfrage öffnet. Nach der Registrierung wählen Sie Open the dashboard.

Das Dashboard öffnet sich mit Posts und Pages in der Navigation. Der Setup-Assistent hat das Content-Model und die Beispielinhalte des Starter-Templates auf die lokale SQLite-Datenbank angewendet.

Eine Bearbeitung veröffentlichen

Öffnen Sie Posts, dann öffnen Sie Welcome.
Ändern Sie den Titel zu Hello from EmDash, dann wählen Sie Save.
Wählen Sie Publish changes, damit der gespeicherte Entwurf zur Version wird, die Besuchern angezeigt wird.
Öffnen Sie http://localhost:4321/ in einem anderen Tab. Die Startseite listet Hello from EmDash auf.

Das Starter-Template ruft getEmDashCollection("posts") auf, wenn Astro die Startseite rendert. Das Neuladen der Seite liest die veröffentlichte Version von EmDash zur Laufzeit.

Wie die generierte Website funktioniert

Das Scaffold erzeugt ein normales Astro-Projekt mit EmDash, das an drei Stellen verbunden ist.

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 und ein Verzeichnis für hochgeladene Medien. Die src/live.config.ts-Datei verbindet diesen datenbankgestützten Inhalt mit Astros Live Content Collections.

Die Startseite fragt dann die posts-Collection 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 Posts- und Pages-Collections, ihre Felder und den Beispielinhalt, den der Setup-Assistent angewendet hat. Während der lokalen Entwicklung liest EmDash dieses Model und aktualisiert emdash-env.d.ts, damit Ihr Editor Collection-Namen und Felder im Abfragecode überprüfen kann.

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

Nächste Schritte

Lesen Sie Architektur für das Zusammenspiel dieser Teile. Um EmDash zu einer bestehenden Website hinzuzufügen, folgen Sie EmDash zu einem bestehenden Astro-Projekt hinzufügen. Der Leitfaden zur Inhaltsabfrage behandelt Filter, Paginierung, Entwürfe und Fehlerbehandlung. Wenn die Website bereit ist, Ihre Maschine zu verlassen, stellen Sie sie auf Cloudflare Workers oder Node.js bereit. Der Medienbibliothek-Leitfaden erklärt Uploads, Medienfelder, Ersetzung und Löschung.