Seiten erstellen#

In PreactPress entstehen Seiten aus Dateien — es gibt keinen separaten Seiten-Editor oder CMS. Jede .md- oder .mdx-Datei unter dem Quellverzeichnis (srcDir, standardmäßig das Projektroot) wird automatisch zu einer öffentlichen URL.

Kurzüberblick#

1. Eine neue Datei anlegen (z. B. kontakt.md oder guide/neue-seite.md).
2. Optional Frontmatter mit title, description und layout ergänzen.
3. Inhalt in Markdown oder MDX schreiben.
4. Dev-Server lädt die Seite automatisch nach — kein Neustart nötig.
5. Optional Eintrag in nav und sidebar in .preactpress/config.ts setzen.

Schritt für Schritt: eine einfache Seite#

Lege im Projektroot (oder unter srcDir) eine Markdown-Datei an, z. B. kontakt.md:

---
title: Kontakt
description: So erreichst du uns
layout: page
---

# Kontakt

Schreib uns an **hello@example.com**.

Speichern — unter pnpm run dev ist die Seite sofort unter /kontakt erreichbar.

Hinweis Der Dateiname (ohne Endung) bestimmt den URL-Pfad. kontakt.md → /kontakt, nicht /kontakt.md.

Wo die Datei liegt → welche URL#

PreactPress nutzt dateibasiertes Routing. Der Pfad relativ zu srcDir wird zur Route:

Produktionsbuilds schreiben Verzeichnis-Indexe (dist/about/index.html), damit URLs ohne .html funktionieren.

Ausführliche Details: Routing.

Quellverzeichnis (srcDir)#

Standardmäßig liegen Markdown-Dateien im Projektroot neben .preactpress/. Du kannst Inhalte in einen Unterordner legen:

// .preactpress/config.ts
export default {
  srcDir: "docs",
};

Dann gehören alle Seiten nach docs/ — z. B. docs/index.md → /, docs/guide/foo.md → /guide/foo. Die URLs bleiben gleich; nur der Speicherort der Dateien ändert sich.

Frontmatter (optional, aber empfohlen)#

YAML am Dateianfang steuert Metadaten und Darstellung:

---
title: Meine Seite
description: Kurztext für Suche, SEO und Social Previews
layout: doc
---

Weitere Felder (tags, sidebar: false, navbar: false, …) stehen im README des npm-Pakets bzw. in der Referenz des Starters.

MDX-Seiten mit Komponenten#

Brauchst du interaktive UI, nutze .mdx statt .md:

---
title: Demo
description: Interaktive Komponente
---

import Counter from "./components/Counter.tsx";

## Zähler

<Counter initial={3} />

Komponenten importierst du relativ zur MDX-Datei. Überschriften ## und ### erscheinen in der Seitengliederung (bei layout: doc).

Beispiel im Starter: Interaktives MDX.

In die Navigation einbinden#

Neue Seiten erscheinen nicht automatisch in der Kopfzeile oder Sidebar. Trage sie in .preactpress/config.ts ein:

export default {
  themeConfig: {
    nav: [
      { text: "Start", link: "/" },
      { text: "Kontakt", link: "/kontakt" },
    ],
    sidebar: [
      {
        text: "Anleitung",
        items: [
          { text: "Seiten erstellen", link: "/de/guide/seiten-erstellen" },
          { text: "Kontakt", link: "/kontakt" },
        ],
      },
    ],
  },
};

Bei mehrsprachigen Sites (locales) gehören nav und sidebar in die jeweilige Locale-Konfiguration — siehe Getting Started.

Übersetzte Seite (Locale)#

Mit konfigurierten Locales legst du Übersetzungen in Sprachordnern ab:

kontakt.md          → /kontakt
de/kontakt.md       → /de/kontakt

Die deutsche Version ist eine eigene Datei, kein Alias der englischen Seite.

Entwürfe und Prüfung#

• draft: true im Frontmatter: Seite nur lokal sichtbar im Dev-Modus, nicht im Produktionsbuild.
• pnpm run check: prüft fehlende Links, unbekannte Layouts, Route-Kollisionen und warnt bei Entwürfen ohne Beschreibung.

Typische Fehler#

Nächste Schritte#