Erste Schritte

Diese Anleitung führt dich durch die Erstellung deiner ersten EmDash-Website – von der Installation bis zur Veröffentlichung deines ersten Beitrags.

Voraussetzungen

• Node.js v22.12.0 oder höher (ungerade Versionsnummern werden nicht unterstützt)
• npm, pnpm oder yarn
• Ein Code-Editor (VS Code empfohlen)

Neues Projekt erstellen

npm create emdash@latest

pnpm create emdash@latest

yarn create emdash

Folge den Eingabeaufforderungen, um dein Projekt zu benennen und deine Einstellungen festzulegen.

Entwicklungsserver starten

Setup-Assistent abschließen

Wenn du das Admin-Panel zum ersten Mal aufrufst, führt dich der EmDash-Setup-Assistent durch die Erstkonfiguration:

Sobald dein Passkey registriert ist, bist du angemeldet und wirst zum Admin-Dashboard weitergeleitet.

Dein erster Beitrag

Projektstruktur

Dein EmDash-Projekt folgt einer Standard-Astro-Struktur mit einigen Ergänzungen:

my-emdash-site/
├── astro.config.mjs      # Astro- + EmDash-Konfiguration
├── src/
│   ├── live.config.ts    # Live-Collections-Konfiguration
│   ├── pages/
│   │   ├── index.astro   # Startseite
│   │   └── posts/
│   │       └── [...slug].astro  # Dynamische Beitragsseiten
│   ├── layouts/
│   │   └── Base.astro    # Basis-Layout
│   └── components/       # Deine Astro-Komponenten
├── .emdash/
│   ├── seed.json         # Seed-Datei des Templates
│   └── types.ts          # Generierte TypeScript-Typen
└── package.json

Konfigurationsdateien

astro.config.mjs

Damit wird EmDash als Astro-Integration konfiguriert:

import { defineConfig } from "astro/config";
import emdash, { local } from "emdash/astro";
import { sqlite } from "emdash/db";

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

src/live.config.ts

Damit wird EmDash mit Astros Content-System verbunden:

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

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

Umgebungsvariablen

Für Produktionsdeployments musst du Folgendes setzen:

# Required for authentication
EMDASH_AUTH_SECRET=your-secret-here

# Optional: for content preview
EMDASH_PREVIEW_SECRET=your-preview-secret

Erzeuge ein sicheres Auth-Secret mit:

npx emdash auth secret

Inhalte in Seiten abfragen

Verwende EmDash-Abfragefunktionen in deinen Astro-Seiten. Sie folgen dem Live-Collections-Muster von Astro und liefern für Collections { entries, error } sowie für einzelne Einträge { entry, error } zurück:

---
import { getEmDashCollection } from "emdash";
import Base from "../layouts/Base.astro";

const { entries: posts } = await getEmDashCollection("posts");
---

<Base title="Home">
  <h1>Latest Posts</h1>
  <ul>
    {posts.map((post) => (
      <li>
        <a href={`/posts/${post.slug}`}>{post.data.title}</a>
      </li>
    ))}
  </ul>
</Base>

Für einzelne Einträge:

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

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

if (!post) {
  return Astro.redirect("/404");
}
---

<h1>{post.data.title}</h1>

TypeScript-Typen erzeugen

Für vollständige Typsicherheit generierst du Typen aus deinem Datenbankschema:

npx emdash types

Dadurch wird .emdash/types.ts mit Interfaces für all deine Collections erstellt. Dein Editor vervollständigt nun Feldnamen automatisch und erkennt Typfehler.

Nächste Schritte

Du hast jetzt eine funktionierende EmDash-Website! Hier geht es weiter:

• Kernkonzepte — Verstehe, wie EmDash intern funktioniert
• Mit Inhalten arbeiten — Inhalte abfragen und rendern
• Medienbibliothek — Bilder und Dateien hochladen und verwalten
• Blog erstellen — Einen vollständigen Blog mit Kategorien und Tags bauen
• Auf Cloudflare deployen — Deine Website in Produktion bringen