db-trocken-innenausbau.de

Quellcode der Firmenwebsite von Dominik Bremer Trocken- und Innenausbau in Neustadt am Rübenberge.

🔗 Live: db-trocken-innenausbau.de

Über die Website

Statische Website, gebaut mit Hugo, für einen Handwerksbetrieb im Bereich Trockenbau, Innenausbau, Renovierung/Sanierung sowie Schallschutz & Dämmung.

Tech-Stack

• Hugo 0.165+ Extended (Pflicht — wird für WebP-Bildverarbeitung und css.TailwindCSS gebraucht)
• Tailwind CSS v4, kompiliert über Hugo Pipes (css.TailwindCSS) direkt im Build — kein separater Watch-Prozess, kein Standalone-CLI
• Node.js 22+ / npm — nur als Werkzeug für Tailwind und die Prüfskripte, keine Laufzeitabhängigkeit der ausgelieferten Seite

Voraussetzungen

• Hugo Extended 0.165 oder neuer
• Node.js 22+ und npm
• Für die Prüfskripte (npm run a11y, npm run shots): npx playwright install chromium einmalig ausführen
• Für den Deploy: ein SSH-Schlüssel mit Zugriff auf den Server (siehe deploy/README.md)

Lokale Entwicklung

git clone https://git.streifling.com/jason/db-trocken-innenausbau.de-hugo.git
cd db-trocken-innenausbau.de-hugo

npm ci
npm run dev

Die Seite ist danach unter http://localhost:1313 erreichbar. Tailwind läuft dabei innerhalb des Hugo-Builds (layouts/_partials/head/css.html ruft css.TailwindCSS auf) — es braucht kein zweites Terminal und keinen Watch-Prozess mehr.

Build & Prüfung

npm run build    # hugo --gc --minify -> public/
npm run check    # Struktur-Prüfung: h1, alt-Texte, Titel, Meta-Description, JSON-LD, CSP-Konformität
npm run a11y      # axe-core über alle Seiten, Desktop + Mobil
npm run verify    # build + check + a11y in einem Rutsch
npm run shots     # Screenshots aller Seiten auf drei Breakpoints nach .screens/

Beim Build erscheinen rund 24 Zeilen WARN image <datei>.webp is only 518px wide. Das ist Absicht, kein Fehler — jedes aktuelle Foto ist auf 518×518 Pixel zugeschnitten, und diese Warnung ist die Nachliefer-Liste für die noch ausstehenden hochauflösenden Original-Fotos. Ein Build ganz ohne diese Warnungen bedeutet, dass die Liste abgearbeitet ist — nicht, dass vorher etwas kaputt war.

Projektstruktur

.
├── archetypes/          # Vorlage für neue Content-Dateien
├── assets/
│   ├── css/main.css     # Tailwind-Quelle inkl. @theme-Tokens
│   ├── icons/           # Inline-SVG-Icons (über das icon-Partial eingebunden)
│   ├── images/          # Foto-Originale — Hugo verarbeitet sie zu srcset-Varianten
│   └── js/               # nav.js, testimonials.js, gallery.js — Progressive
│                          # Enhancement, über das js.html-Partial (js.Build) kompiliert
├── content/              # Seiteninhalte als Markdown + Shortcodes
├── data/testimonials.yaml
├── deploy/
│   ├── nginx/            # nginx-Konfigurationsvorlage (Snippets, Site-Config, Vorschau)
│   └── README.md         # Vollständiger Umstiegs-/Deploy-Ablauf
├── layouts/
│   ├── _partials/        # head/*, band, split, gallery, services, testimonials, ...
│   └── _shortcodes/       # band, col, gallery, services, testimonials, contact, param, ...
├── scripts/               # deploy.sh, check.mjs, a11y.mjs, shots.mjs
├── static/favicon/        # Favicons, site.webmanifest (nicht über die Bildpipeline)
├── hugo.toml              # Hugo-Konfiguration inkl. [params] für alle Firmendaten
└── public/                # Build-Output (generiert, nicht versioniert)

Inhalte pflegen

• Neue Seite: content/<name>.md anlegen, menus.main.weight im Frontmatter setzen für die Hauptnavigation.
• Bilder gehören nach assets/images/, nicht nach static/ — nur Dateien dort laufen durch die Bildpipeline (srcset, width/height, Lazy Loading). alt ist Pflicht; ein Bild ohne alt bricht den Build ab (bewusst, siehe layouts/_partials/image.html).
• Firmendaten (Adresse, Telefon, E-Mail, Umsatzsteuer-ID, …) stehen ausschließlich in hugo.toml unter [params]. Nirgendwo sonst im Code duplizieren.
• Der Baustein-Katalog (band, split/col, gallery, services, testimonials, contact-buttons) ist in den vorhandenen content/*.md-Dateien am besten durch Beispiel zu lernen.

Datenschutz

Die Seite lädt keine externen Ressourcen — keine Schriftarten-CDN, kein Analytics, kein eingebettetes Drittanbieter-Widget. Das ist eine bewusste DSGVO-Entscheidung und wird von npm run check erzwungen (Prüfung 7: kein src/href auf eine fremde Herkunft). Die nginx-Vorlage in deploy/nginx/ setzt dazu eine strikte Content-Security-Policy ohne unsafe-inline. Bitte diese Eigenschaft beim Weiterentwickeln bewusst erhalten — siehe auch CLAUDE.md.

Deployment

Ein-Befehl-Deploy per scripts/deploy.sh auf einen VPS mit nginx, atomar über Release-Verzeichnisse und einen Symlink-Wechsel:

cp .env.deploy.example .env.deploy && "$EDITOR" .env.deploy
./scripts/deploy.sh              # Trockenlauf, verändert nichts
./scripts/deploy.sh --stage      # hochladen, noch nicht live schalten
./scripts/deploy.sh --yes        # hochladen und live schalten

Rücksprung auf das vorherige Release, ohne nginx anzufassen:

./scripts/deploy.sh --rollback

Vollständiger Ablauf inklusive einmaliger Server-Einrichtung, nginx-Vorlage und dem Umstiegsverfahren auf eine bereits laufende Seite: deploy/README.md.

Lizenz

Der Quellcode dieses Projekts steht unter der MIT-Lizenz.

Ausgenommen davon sind:

• Firmenname, Logo und Markenzeichen von Dominik Bremer Trocken- und Innenausbau
• Redaktionelle Inhalte, Texte, Kundenstimmen und Fotos auf der Website

Diese bleiben urheberrechtlich geschützt und dürfen nicht ohne Zustimmung weiterverwendet werden.

Kontakt

Dominik Bremer Trocken- und Innenausbau Hagener Straße 18, 31535 Neustadt

📞 0174 / 9279 364 📧 info@db-trocken-innenausbau.de