Erste Schritte - Docs - Artefact

Erste Schritte

Diese Anleitung führt durch die Installation des Projekts, das lokale Ausführen und die wenigen Befehle, die im Alltag gebraucht werden. Einen Überblick, wie die einzelnen Teile zusammenspielen, gibt Architektur.

Voraussetzungen

Bun —— der Paketmanager und JS/TS-Laufzeit dieses Projekts. Installation:
```
curl -fsSL https://bun.sh/install | bash
```
Git, zum Klonen des Repositories und für die Git-basierten Content-Commits des CMS.

Installation

Repository klonen und Abhängigkeiten installieren:

git clone <repository-url>
cd <repository-directory>
bun install

bun install löst außerdem das prepare-Skript (panda codegen) aus, das das PandaCSS-Designsystem nach design-system/ generiert —— die Recipes, Tokens und JSX-Helper, die von den UI-Komponenten importiert werden. Falls Typfehler auf ein fehlendes design-system-Modul hinweisen, kann es direkt erneut ausgeführt werden:

bun panda codegen

Entwicklungsserver starten

bun run dev

Damit startet Vites Entwicklungsserver (standardmäßig http://localhost:5173) mit HMR. Er betreibt den live laufenden HonoX-Server —— Routen, Islands und Styles werden bei jedem Speichern neu gebaut.

Um Inhalte über die CMS-Oberfläche statt manuell in den Dateien unter content/ zu bearbeiten, /admin/ öffnen, während der Entwicklungsserver läuft.

Build & Vorschau

bun run build

Dabei laufen zwei Vite-Durchläufe über dieselbe Konfiguration —— einer für das Client-Hydration-Bundle, einer für die serverseitig gerenderten Seiten —— anschließend durchläuft @hono/vite-ssg jede Route und rendert sie vorab als statisches HTML nach dist/. Details dazu in Architektur.

Um dieses statische Ergebnis lokal über die lokale Laufzeitumgebung von Cloudflare bereitzustellen (näher an Produktion als bun run dev):

bun run preview

Tests & Lint

Unit-Tests ausführen:

bun test unit

Mit Biome linten und automatisch korrigieren:

bun run check

Deployment

bun run deploy

Baut die Seite und deployt dist/ via wrangler auf Cloudflare Pages. Ein Vercel-Ziel (vercel.json) ist ebenfalls von Haus aus konfiguriert, falls dort deployt werden soll —— in beiden Fällen ist das Ergebnis eine vollständig statische Seite, die zur Laufzeit keinen Serverprozess benötigt.

Weiterführend

Architektur —— wie Routing, Styling, Inhalte und die Build-Pipeline zusammenspielen.
Hydration —— das dreistufige Modell zur Entscheidung, ob eine Komponente JS an den Client sendet.
CMS-Seitenbaukasten —— visuelles Erstellen von Seiten über Sveltia CMS.