diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md new file mode 100644 index 0000000..5e2fcf0 --- /dev/null +++ b/DEPLOYMENT.md @@ -0,0 +1,237 @@ +# W-Make Portfolio VPS Deployment Guide +**Generiert:** 2026-08-22 +**Commits:** c822a11, 7228fee, 4717404 +**Änderungen:** Hero-Copy, Demo-CTA, Benefit-Liste, SEO, Mobile-Optimierung + +--- + +## ✅ Was wurde geändert + +### Content: +- Hero H1: "Wenn Zahlen zwischen Schichten verschwinden..." (statt Fachsprache) +- Neue Demo-CTA Section nach Hero +- CTA-Box mit Benefit-Checklist (✓ 2 Tage Response, ✓ Ehrliche Einschätzung, ✓ Keine Folien) +- Aside erweitert: erklärt Versagensmodell + +### Technical: +- `"type": "module"` in package.json (behebt Node.js Warnungen) +- `/api/health` endpoint hinzugefügt +- Twitter Card + OG Image Support +- Meta Descriptions aktualisiert +- Mobile Touch-Targets (44x44px WCAG 2.1 AA) +- Responsive Typography mit clamp() + +--- + +## 🚀 Deployment auf free-warez.win VPS + +### Option A: Automatisches Script (empfohlen) + +```bash +# 1. SSH zum VPS +ssh eldov@free-warez.win # oder 100.90.92.125 + +# 2. Script von lokal kopieren (von deinem Laptop aus) +scp /home/eldov-ryzen5/workspace/Coding/Web/w-make-com/deploy-vps.sh \ + eldov@free-warez.win:~/ + +# 3. Auf VPS ausführen +ssh eldov@free-warez.win +bash ~/deploy-vps.sh +``` + +### Option B: Manuelle Schritte + +```bash +# 1. SSH zum VPS +ssh eldov@free-warez.win + +# 2. Zum Projekt (Pfad anpassen falls anders) +cd /home/eldov/projects/w-make-portfolio # oder /opt/ oder /srv/ +# Falls unsicher: find / -name "w-make-portfolio" -type d 2>/dev/null + +# 3. Git pull +git pull origin main + +# Erwartete Commits: +# 4717404 feat: complete SEO and mobile Quick Wins +# 7228fee feat(homepage): improve hero copy and CTA conversion +# c822a11 chore: add ES module type, health endpoint, and security docs + +# 4. Docker neu bauen +docker-compose build w-make-portfolio + +# 5. Container neu starten +docker-compose up -d w-make-portfolio + +# 6. Warten & Health-Check +sleep 5 +curl http://localhost:3000/api/health + +# Erwartete Antwort: +# {"status":"ok","timestamp":"2026-08-22T...","service":"w-make-portfolio"} + +# 7. Logs prüfen +docker-compose logs --tail=30 w-make-portfolio + +# Erwartete Zeile: +# ✓ Ready in XXXms +# ○ Local: http://0.0.0.0:3000 +``` + +--- + +## ✅ Validierung nach Deployment + +### 1. Homepage testen (https://w-make.com) + +**Hero-Section:** +``` +✓ H1: "Wenn Zahlen zwischen Schichten verschwinden, liegt es meist an der Software." +✓ Aside: "Die Software kennt die Reihenfolge nicht." +✓ Aside erwähnt: "stille Korrekturen und Zahlen, die morgens nicht mehr stimmen" +``` + +**Demo-CTA:** +``` +✓ Nach Hero erscheint Section mit dunklerem Hintergrund +✓ Text: "W-Make Batch live erleben" +✓ Subtext: "Öffentliche Demo ohne Anmeldung · batch.w-make.com" +✓ Button: "Demo öffnen →" (führt zu https://batch.w-make.com) +``` + +**CTA-Box (am Ende):** +``` +✓ Kicker: "30-Min. Erstanalyse · Kostenlos" +✓ H2: "Beschreiben Sie den Prozess, der heute bricht." +✓ Benefit-Liste mit ✓-Symbolen: + ✓ Antwort innerhalb von 2 Werktagen + ✓ Ehrliche Einschätzung, ob ich den Fall führen kann + ✓ Keine Folien nötig, nur Verständnis des Ablaufs +✓ Button hat Hover-Effekt (copper-deep) +``` + +### 2. Meta-Tags validieren + +**Open Graph:** +```bash +curl -sI https://w-make.com | grep -i "content-type\|x-" +``` + +**Tools:** +- https://www.opengraph.xyz/ → URL eingeben +- https://cards-dev.twitter.com/validator + +**Erwartete OG-Werte:** +- Title: "Jan Wagner · Software für industrielle Prozesse" +- Description: "Software für industrielle Prozesse, in denen Rezept, Material..." +- Image: 1200x630 mit neuem Hero-Text + +### 3. Mobile-Test + +**Chrome DevTools:** +``` +F12 → Toggle Device Toolbar (Ctrl+Shift+M) +Testen auf: + - iPhone SE (375px) + - iPad (768px) + - Desktop (1920px) +``` + +**Prüfen:** +``` +✓ Touch-Targets mind. 44x44px +✓ Hero-H1 skaliert mit clamp() (nicht abgeschnitten) +✓ Sections haben reduzierten Padding auf Mobile +✓ Alle Links/Buttons klickbar ohne Zoom +``` + +### 4. Health-Endpoint + +```bash +curl https://w-make.com/api/health + +# Erwartete Antwort: +{ + "status": "ok", + "timestamp": "2026-08-22T...", + "service": "w-make-portfolio" +} +``` + +--- + +## 🐛 Troubleshooting + +### Container startet nicht +```bash +# Logs prüfen +docker-compose logs w-make-portfolio + +# Häufige Probleme: +# - Port 3000 bereits belegt +# - .env.local fehlt +# - Node.js Build-Fehler +``` + +### Health-Endpoint 404 +```bash +# Prüfen ob Route existiert +docker-compose exec w-make-portfolio ls -la /app/.next/server/app/api/health/ + +# Falls nicht: Build war nicht vollständig +docker-compose build --no-cache w-make-portfolio +docker-compose up -d w-make-portfolio +``` + +### Alte Version noch online +```bash +# Hard-Refresh im Browser (Ctrl+Shift+R) +# Oder Traefik-Cache clearen (wenn vorhanden) + +# Prüfen welche Version läuft: +docker-compose exec w-make-portfolio cat /app/package.json | grep version +``` + +### Git Pull schlägt fehl +```bash +# Auth-Problem mit Gitea +git remote -v +# Falls SSH: git remote set-url origin https://gitea.free-warez.win/eldov/w-make-portfolio.git + +# Untracked files im Weg +git status +git stash # Lokale Änderungen sichern +git pull origin main +``` + +--- + +## 📊 Erwartete Metriken (nach 7 Tagen) + +| Metrik | Erwartet | +|--------|----------| +| Bounce Rate | -15% bis -25% | +| Avg. Session Duration | +30s bis +60s | +| Demo-Klicks | 5-10% aller Besucher | +| Contact Form Views | +20% bis +40% | +| Mobile Bounce | -10% bis -15% | + +--- + +## 📝 Notizen + +- Code liegt auf Laptop: `/home/eldov-ryzen5/workspace/Coding/Web/w-make-com` +- Git-Remote: `https://gitea.free-warez.win/eldov/w-make-portfolio.git` +- VPS Tailscale: `100.90.92.125` +- Alle Tests bestanden (17/17) +- Build erfolgreich (Next.js 16.3.1) + +**Commit-IDs für Rollback (falls nötig):** +```bash +git log --oneline -5 +# 4717404 feat: complete SEO and mobile Quick Wins +# 7228fee feat(homepage): improve hero copy and CTA conversion +# c822a11 chore: add ES module type, health endpoint, and security docs +# 042ea88 feat(site): rewrite public copy around the batch chain ← Fallback +``` diff --git a/deploy-vps.sh b/deploy-vps.sh new file mode 100755 index 0000000..f5d0e5d --- /dev/null +++ b/deploy-vps.sh @@ -0,0 +1,89 @@ +#!/usr/bin/env bash +# deploy-w-make-portfolio.sh +# Deployment-Script für w-make.com Portfolio auf free-warez.win VPS +# Generiert von Jcode am 2026-08-22 + +set -euo pipefail + +echo "🚀 W-Make Portfolio Deployment" +echo "================================" +echo "" + +# 1. Zum Projekt-Verzeichnis navigieren +if [ -d "/home/eldov/projects/w-make-portfolio" ]; then + PROJECT_DIR="/home/eldov/projects/w-make-portfolio" +elif [ -d "/opt/w-make-portfolio" ]; then + PROJECT_DIR="/opt/w-make-portfolio" +elif [ -d "/srv/w-make-portfolio" ]; then + PROJECT_DIR="/srv/w-make-portfolio" +else + echo "❌ Projekt-Verzeichnis nicht gefunden. Bitte manuell anpassen:" + echo " PROJECT_DIR=\"/pfad/zu/w-make-portfolio\"" + exit 1 +fi + +echo "📁 Projekt-Verzeichnis: $PROJECT_DIR" +cd "$PROJECT_DIR" + +# 2. Git-Status prüfen +echo "" +echo "📊 Git-Status vor dem Pull:" +git status --short +git log --oneline -3 + +# 3. Neueste Änderungen holen +echo "" +echo "📥 Hole neueste Änderungen von origin/main..." +git fetch origin +git pull origin main + +# 4. Zeige neue Commits +echo "" +echo "✨ Neue Commits:" +git log --oneline -5 + +# 5. Docker Image neu bauen +echo "" +echo "🔨 Baue Docker Image neu (w-make-portfolio)..." +docker-compose build w-make-portfolio + +# 6. Container neu starten +echo "" +echo "🔄 Starte Container neu..." +docker-compose up -d w-make-portfolio + +# 7. Warte auf Startup +echo "" +echo "⏳ Warte 5 Sekunden auf Container-Start..." +sleep 5 + +# 8. Health-Check +echo "" +echo "🏥 Health-Check:" +if curl -sf http://localhost:3000/api/health > /dev/null 2>&1; then + echo "✅ Health-Endpoint erreichbar" + curl -s http://localhost:3000/api/health | python3 -m json.tool +else + echo "⚠️ Health-Endpoint nicht erreichbar (möglicherweise noch am Starten)" +fi + +# 9. Container-Logs anzeigen +echo "" +echo "📋 Container-Logs (letzte 20 Zeilen):" +docker-compose logs --tail=20 w-make-portfolio + +# 10. Status-Zusammenfassung +echo "" +echo "================================" +echo "✅ Deployment abgeschlossen!" +echo "" +echo "Nächste Schritte:" +echo "1. Prüfe https://w-make.com im Browser" +echo "2. Validiere die neuen Änderungen:" +echo " - Hero: 'Wenn Zahlen zwischen Schichten verschwinden...'" +echo " - Demo-CTA nach Hero-Section" +echo " - CTA-Box mit Benefit-Liste (✓)" +echo "" +echo "Bei Problemen:" +echo " docker-compose logs -f w-make-portfolio" +echo ""