Getting Started (KMU)

Diese Anleitung beschreibt, wie Sie mit GCBoK.WebStaticBuilder eine eigene, mehrsprachige, statische Website erstellen — ohne Server, Datenbank oder JavaScript-Framework.

1. Voraussetzungen

.NET 10 SDK (dotnet) — https://dotnet.microsoft.com/download
Optional: Node.js (für die Suchfunktion Pagefind). Ohne Node wird die Seite gebaut, die Suche entfällt (nicht fatal).

2. Installation

git clone <repo> build_webstatic
cd build_webstatic
./install.sh          # klont nach /opt/GitCover/webstatic (Default: Clone-Modus)

Der Clone-Modus legt ein echtes Git-Repo in /opt/GitCover/webstatic an, sodass spätere Updates via git pull (mit git stash/git stash pop für lokale Anpassungen) möglich sind. Alternativ WEBSTATIC_INSTALL_MODE=copy ./install.sh für eine reine Binary-Kopie. Nach der Installation ist webstatic im PATH verfügbar.

3. Neue Website anlegen

webstatic init mysite
cd mysite

Das erzeugt eine Vorlage (webstatic.example/) mit:

webstatic.json — Konfiguration (Sprachen, Umgebungen, Pfade)
i18n.json — UI-Übersetzungen
content/ — Markdown-Inhalte
templates/layout.html — HTML-Grundgerüst
assets/ — CSS, JS, Favicon

4. Inhalte pflegen

Jede Seite ist eine Markdown-Datei mit YAML-Frontmatter am Anfang:

---
section: start
order: 1
eyebrow: "Startseite"
title: "Startseite"
description: "Die Landing-Page"
href: /
render: true
navbar: true
---

## Einführung
Ihr Inhalt …

order steuert die Reihenfolge in Navigation und Sidebar.
order: 0 = Banner (eigene Seite, getrennt vom Hero/order: 1).
Sprachvarianten: 02-start.de.md (Default), 02-start.en.md, 02-start.vi.md (fehlende Sprache fällt auf .de.md zurück).

5. Bauen & Vorschau

webstatic build --env development   # localhost:8000
webstatic serve --port 8000         # lokaler Server (Strg+C beendet)

6. Veröffentlichen

Ziel	Befehl
Development (lokal, work/preview/review)	`webstatic build --env development`
Staging	`webstatic build --env staging`
Production	`webstatic build --env deploy`

Die erzeugte dist/-Aufgabe wird auf den jeweiligen Webspace kopiert.

7. UI übersetzen

Texte im Layout (templates/layout.html) nutzen Platzhalter {{ i18n.<bereich>.<schluessel> }}. Die Werte stehen in i18n.json (pro Sprache). Fehlende Schlüssel bleiben als Platzhalter sichtbar — so erkennen Sie Lücken sofort.

8. Machine Translation (optional)

webstatic translate --check                       # welche Sprachen fehlen?
export WEBSTATIC_TRANSLATOR_KEY=<ihr-key>         # Azure oder DeepL
webstatic translate --draft                       # Entwürfe in .translation-drafts/

Entwürfe überschreiben niemals Ihre Quelldateien — sie sind zum Nacharbeiten gedacht.

2.8 KiB Raw Blame History