# Live-Deployment — markemacht.de

Kurzanleitung für den Upload auf den Produktionsserver (Apache + `.htaccess`).

---

## Server-Anforderungen

| Komponente | Erforderlich |
|------------|--------------|
| **Webserver** | Apache mit `mod_rewrite`, `mod_headers`, `mod_expires`, `mod_deflate` |
| **PHP** | 8.1+ (nur für Kontaktformular unter `assets/php/`) |
| **HTTPS** | Pflicht — wird per `.htaccess` erzwungen |
| **Optional** | `mod_brotli` (zusätzliche Kompression) |

Domain: **https://markemacht.de** (ohne `www`).

---

## Deploy-Ablauf (Checkliste)

### 1. Vor dem Upload (lokal)

```bash
cd _markemacht.de

# Bei CSS/JS-Änderungen: Version erhöhen
# → assets/version.txt (z. B. 20250610)

# Head, Header, Footer in alle HTML-Seiten einspielen
python3 scripts/build-site.py

# PHP-Abhängigkeiten (nur wenn Formular genutzt wird)
php composer install --no-dev --optimize-autoloader

 /usr/bin/php84 /usr/bin/composer 
```

### 2. Auf den Server hochladen

Document Root = Inhalt von `_markemacht.de/` (alle Dateien im Root der Domain).

### 3. Nach dem Upload (einmalig / bei Formular)

```bash
# Auf dem Server, im Ordner assets/php/:
cp config.example.php config.php
# → SMTP-Zugangsdaten eintragen (nicht ins Git committen)
```

### 4. Kurz testen

- [ ] https://markemacht.de/ lädt korrekt
- [ ] Wirkungs-Umschalter (monolithisch / editorial) funktioniert
- [ ] Anfrage-Modal öffnet sich, Formular sendet (oder Fehlermeldung bei fehlender SMTP-Config)
- [ ] https://markemacht.de/robots.txt erreichbar
- [ ] https://markemacht.de/sitemap.xml erreichbar
- [ ] Ungültige URL zeigt `404.html`
- [ ] Alte URLs leiten um: `/denken-agilitaet.html` → `/denken.html`

---

## Was hochladen — was nicht

### Mit hochladen

- Alle `*.html` im Root (inkl. `404.html`)
- `.htaccess`
- `robots.txt`, `sitemap.xml`
- `assets/` (css, js, fonts, img, icons.svg, components, php)
- `vendor/` — **nur wenn** das Kontaktformular aktiv ist

### Nicht öffentlich / nicht nötig auf Static-Only-Hosting

| Pfad | Grund |
|------|--------|
| `scripts/` | Build-Skript — wird per `.htaccess` blockiert |
| `docker/` | Nur für lokale Entwicklung |
| `vendor/` | Nur für PHP-Formular nötig |
| `assets/php/config.php` | Enthält SMTP-Passwort — nur auf Server anlegen |
| `*.md` (außer intern) | Werden per `.htaccess` blockiert |
| `composer.json` / `composer.lock` | Werden blockiert |

Die **vollständigen Font-Archive** unter `assets/fonts/*/` können auf dem Server liegen bleiben (Reserve). Beim Seitenaufruf werden nur die reduzierten Theme-Bundles geladen (`fonts-monolith.css` / `fonts-editorial.css` + `fonts-shared.css`).

---

## Build-System & Komponenten

Die Seite nutzt **kein** Build-Tool wie Webpack. Stattdessen:

### Quell-Dateien (hier bearbeiten)

| Datei | Inhalt |
|-------|--------|
| `assets/components/head-common.html` | OG-Tags, Favicon, Theme-Init, CSS, Analytics, JSON-LD |
| `assets/components/header.html` | Navigation, Mobile Drawer |
| `assets/components/footer.html` | Footer + Anfrage-Modal |

### Build ausführen

```bash
python3 scripts/build-site.py
```

Das Skript:

1. Spiegelt `head-common.html` in alle HTML-Seiten (ab `og:locale`)
2. Bettet Header und Footer direkt in jede Seite ein (kein JS-Fetch mehr)
3. Setzt Cache-Busting an `app.js?v=…` aus `assets/version.txt`
4. Ergänzt auf `index.html` das LCP-Preload für das Hero-Bild

**Wichtig:** Nach Änderungen an den drei Komponenten immer Build ausführen, sonst sind die Live-HTML-Dateien veraltet.

### Cache-Busting

- Version steht in `assets/version.txt` (z. B. `20250609`)
- `head-common.html` nutzt Platzhalter `{{VERSION}}` für `app.css?v={{VERSION}}`
- Bei jedem Deploy mit CSS/Änderungen: **Version erhöhen** → Build → Upload

---

## Apache (`.htaccess`)

Die Live-Konfiguration liegt in `.htaccess` im Root. Wichtigste Regeln:

- **HTTPS + non-www** — Redirect auf `https://markemacht.de`
- **301-Redirects** — alte Denken-Artikel → `denken.html`
- **404** — `ErrorDocument 404 /404.html`
- **Gzip + optional Brotli**
- **Cache** — HTML: `no-cache`; Assets unter `/assets/`: 7 Tage `immutable`
- **Security-Header** — CSP, `X-Frame-Options`, `Referrer-Policy` u. a.
- **CSP** erlaubt Analytics von `https://sys.adametz.media`

Geschützte Pfade: `/scripts/`, `/vendor/`, `/docker/`, `/assets/version.txt`

---

## Kontaktformular (PHP)

Endpoint: `assets/php/send-anfrage.php`  
Konfiguration: `assets/php/config.php` (aus `config.example.php` kopieren)

```bash
composer install --no-dev
cp assets/php/config.example.php assets/php/config.php
# config.php mit SMTP-Daten füllen
```

`config.php` ist per `.htaccess` in `assets/php/` vor direktem Download geschützt.

Das Modal liegt im Footer (`assets/components/footer.html`) — nach Änderungen Build ausführen.

---

## Schriften & Icons

- **Keine Google Fonts** — alles lokal unter `assets/fonts/`
- **Theme-Fonts** — Inline-Script in `head-common.html` setzt Theme, lädt Fonts und LCP-Preload; beim Wechsel lädt `app.js` das andere Bundle nach
- **Icons** — SVG-Sprite `assets/icons.svg` (kein Icon-Font mehr)

---

## Analytics

Umami (selbst gehostet), eingebunden in `head-common.html`:

```html
<script defer src="https://sys.adametz.media/config.js" data-website-id="40125fcf-49c4-43f3-a9a5-9eec5eb55696"></script>
```

Keine Cookies. In der Datenschutzerklärung bereits beschrieben.

---

## SEO-Dateien

| Datei | URL |
|-------|-----|
| `robots.txt` | https://markemacht.de/robots.txt |
| `sitemap.xml` | https://markemacht.de/sitemap.xml |
| OG-Share-Bild | `assets/img/og-share.webp` (1200×630) |

Bei neuen indexierbaren Seiten: `sitemap.xml` manuell ergänzen.

---

## Bilder

- Hero- und Split-Bilder als **WebP** unter `assets/img/`
- Benennung: `{seite}-monolith.webp` / `{seite}-editorial.webp`
- Lazy Load über `app.js` (Intersection Observer)

Neue Bildpaare: in `assets/css/app.css` unter `.hero--*` bzw. `.split-visual .monolith` eintragen.

---

## Datenschutz & Cookies

- **Keine Cookies**
- Wirkungs-Modus wird in **`localStorage`** gespeichert (`mm-wirkung`) — in Datenschutzerklärung dokumentiert
- Beim Moduswechsel wird ein eventuelles Legacy-Cookie einmalig gelöscht (`app.js`)

---

## Typische Probleme

| Symptom | Lösung |
|---------|--------|
| Altes CSS/JS nach Deploy | `assets/version.txt` erhöhen, `build-site.py` ausführen, neu hochladen |
| Header/Footer veraltet | Komponente bearbeitet, aber Build vergessen |
| Formular sendet nicht | `config.php` auf Server prüfen, `vendor/` vorhanden, PHP-Fehlerlog |
| 500 nach Upload | `.htaccess`-Module prüfen (`mod_rewrite`, `mod_headers`); PHP-Version |
| CSP blockiert Script | Nur `self`, inline und `sys.adametz.media` erlaubt — keine fremden Scripts ohne CSP-Anpassung |
| Fonts laden nicht | `assets/fonts/fonts-*.css` und zugehörige `.woff2` mit hochladen |

---

## Schnellreferenz — Änderungstyp → Schritte

| Änderung an … | Schritte |
|---------------|----------|
| `app.css` | Version ↑ → optional Build → Upload `app.css` + HTML (wegen `?v=`) |
| `app.js` | Version ↑ → Build → Upload |
| `head-common.html` | Bearbeiten → **Build** → alle HTML hochladen |
| `header.html` / `footer.html` | Bearbeiten → **Build** → alle HTML hochladen |
| Einzelne Inhaltsseite `*.html` | Direkt bearbeiten → hochladen (Head/Footer nur via Build sync) |
| Neues Hero-Bild | WebP ablegen → CSS anpassen → Upload |
| SMTP / Formular | Nur `config.php` auf Server |

---

*Stand: Juni 2025 — Projekt `_markemacht.de`*
