CLI

Die sitelo-CLI kapselt das mitgelieferte Vite und bindet das HTML-Pages-Plugin automatisch ein.

Befehle

sitelo              # wie sitelo dev
sitelo dev          # Entwicklungsserver
sitelo build        # Produktions-Build
sitelo preview      # Produktions-Build ansehen
sitelo lighthouse   # Produktions-Build auditieren

• dev — echtes SSR-Rendering auf Anfrage, dynamische Routen eingeschlossen, plus eine kleine Entwickler-Toolbar
• build — statisches HTML in dist/ (oder deinem outDir)
• preview — serviert den Produktions-Build lokal
• lighthouse — auditiert den Produktions-Build (benötigt die Peer-Dependency lighthouse)

Die Toolbar lässt sich mit devToolbar: false in sitelo.config.js abschalten — siehe Konfiguration.

Nützliche Optionen

sitelo --port 8888
sitelo build --outDir public --emptyOutDir
sitelo --root docs

• --port / --host / --open — Server
• --outDir / --emptyOutDir / --base — Build
• --root — Projektwurzel (praktisch für eine Website in docs/)
• --config — eigene Vite-Konfigurationsdatei
• --mode / --logLevel / --debug

Was du über mehrere Befehle hinweg wiederverwendest, gehört besser als Vite-Option in sitelo.config.js unter vite.

Ungenutzten Code finden

knip findet Dateien, Exporte und Abhängigkeiten, die nichts verwendet. In einem sitelo-Projekt braucht es einen Hinweis: Seiten und Islands werden im Dateisystem entdeckt, also importiert sie nichts — und ohne diesen Hinweis meldet knip die ganze Website als ungenutzte Dateien.

npm install -D knip

import { knipConfig } from 'sitelo/knip'

export default knipConfig()

npx knip

knipConfig() liest deine sitelo.config.js und markiert Seiten und Islands als Einstiegspunkte, genau so, wie der Build sie entdeckt — pagesDir, pageExtensions, include und exclude gelten alle. Was im Bericht übrig bleibt, ist Code, den die Website tatsächlich nie erreicht.

Eines kann es nicht sehen: ein Client-Skript, das eine Seite per URL statt per Import einbindet, etwa <script src="/js/app.js">. Diese nennst du selbst, und alles andere, was knip akzeptiert, gibst du daneben an — es wird in das Ergebnis übernommen. Das abschließende ! ist knips Kennzeichen für Produktionscode, und genau das ist ein Skript, das an den Browser ausgeliefert wird.

export default knipConfig({
  entry: ['src/js/app.js!'], // was die Seiten per <script src> laden
  ignore: ['legacy/**'], // und alles andere, was knip akzeptiert
})