Files
build_webstatic/docs/getting-started.md
T

86 lines
2.8 KiB
Markdown

# 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
```bash
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
```bash
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:
```markdown
---
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
```bash
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)
```bash
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.