Easy Mode & Developer Mode#

easyWebsite bietet zwei Wege zum gleichen Ergebnis: eine statische, barrierefreie Webseite. Welchen Weg du wählst, hängt davon ab, wie viel Kontrolle du über das Ergebnis brauchst.

Easy Mode#

Im Easy Mode sehen Autor:innen nur Inhalte, keinen Code. Das Projekt besteht aus einem dokument-Ordner mit Markdown-Dateien und einem assets-Ordner für Bilder:

mein-projekt/
├── dokument/
│   ├── _meta.yaml
│   ├── index.mdx
│   ├── kapitel-1.md
│   ├── assets/
│   │   └── logo.svg
│   ├── glossar.yaml
│   └── abkuerzungen.yaml
├── .gitlab-ci.yml
└── README.md

Die .gitlab-ci.yml bindet die CI-Komponente md-to-web ein. Bei jedem Commit läuft automatisch eine Pipeline, die:

1. Die markdown-webbook CLI aufruft
2. Aus den Markdown-Dateien eine vollständige Webseite baut
3. Die Webseite als GitLab Pages veröffentlicht

Alle Konfiguration passiert über CI-Inputs in der .gitlab-ci.yml — Theme, Logo, Feedback, Mehrsprachigkeit. Es gibt kein package.json, keine node_modules, keinen sichtbaren JavaScript- oder React-Code.

Geeignet für: Fachbereiche, Redaktionen, Projekte ohne Frontend-Entwicklung.

Grenzen: Nur die von der CLI angebotenen Optionen sind verfügbar. Eigene Komponenten, eigenes CSS oder eigene Layouts sind nicht möglich.

Developer Mode#

Im Developer Mode betreiben Entwickler:innen ein eigenes Next.js-Projekt und binden die easyWebsite-Packages als npm-Abhängigkeiten ein:

mein-projekt/
├── pages/
│   ├── _meta.ts
│   ├── index.mdx
│   └── kapitel-1.mdx
├── theme.config.tsx
├── next.config.mjs
├── package.json
├── .npmrc
└── tsconfig.json

Das ist ein normales Next.js/React-Projekt. Die Packages @document-writing-tools/kernux-theme und @document-writing-tools/kernux-react liefern Theme, Layout, Navigation, Suche und UI-Komponenten — aber alles ist erweiterbar und überschreibbar.

Geeignet für: Teams mit Frontend-Entwicklungserfahrung, Projekte mit individuellen Anforderungen an Layout, Interaktion oder Design.

Möglich: Eigene React-Komponenten, eigenes CSS, benutzerdefinierte Layouts, API-Integrationen, beliebige Next.js-Funktionalität.

Vergleich#

Derselbe Kern#

Beide Modi nutzen unter der Haube denselben Technologie-Stack. Der Easy Mode versteckt die Komplexität hinter der CLI — aber das generierte Projekt ist strukturell identisch mit einem Developer-Mode-Projekt. Ein Wechsel vom Easy Mode zum Developer Mode ist daher möglich, indem das generierte Projekt als Ausgangspunkt genommen wird.

Siehe Architektur für die technischen Details des Build-Prozesses und der Package-Struktur.