Eigebroetlerei – Bäckerei Website

Statische Website für die Bäckerei „Eigebroetlerei". Premium-Brote mit langer Teigführung, ohne Zusatzstoffe.

Schnellstart

Lokal ohne Docker

# Im Projektverzeichnis
python3 -m http.server 8080

# Browser öffnen: http://localhost:8080

Lokal mit Docker

# Image bauen
docker build -t eigebroetlerei .

# Container starten
docker run -p 8080:8080 eigebroetlerei

# Browser öffnen: http://localhost:8080

Deployment auf Deplo.io

Die Website ist für Deplo.io vorbereitet:

1. Mit Dockerfile (empfohlen):

   • Push zu GitHub
   • In Deplo.io: Repository verbinden
   • Deplo.io erkennt das Dockerfile automatisch
   • Der Container bindet auf 0.0.0.0:$PORT (wird von Deplo.io gesetzt)

2. Als Static Site (Alternative):

   • Deplo.io erkennt index.html im Root
   • Kein Dockerfile nötig
   • Siehe: https://docs.nine.ch/docs/deplo-io/languages/static

Wichtig für Deplo.io

• Container muss auf 0.0.0.0 binden (nicht localhost)
• $PORT Environment-Variable wird von Deplo.io gesetzt
• Dockerfile respektiert beides automatisch

Brote bearbeiten

Die Brotdaten liegen in /data/breads.json.

Neues Brot hinzufügen

{
  "id": "eindeutige-id",
  "name": "Brotname",
  "shortDescription": "Kurzbeschreibung für Card (1-2 Sätze)",
  "longDescription": "Ausführliche Beschreibung für Modal",
  "ingredients": ["Zutat 1", "Zutat 2"],
  "allergens": ["Gluten (Weizen)"],
  "weightGrams": 750,
  "crust": "kräftig",
  "sourdough": true,
  "fermentationHours": 24,
  "availability": "täglich",
  "bestWith": ["Butter", "Käse"],
  "image": "images/dein-bild.jpg"
}

Bild hinzufügen

1. Bild in /images/ ablegen
2. Pfad im JSON anpassen: "image": "images/dein-bild.jpg"
3. Empfohlen: Bilder vor Upload komprimieren (WebP, max 200KB)

Fallback bei fehlendem Bild

Falls ein Bild nicht geladen werden kann, wird automatisch ein Platzhalter angezeigt.

Kontaktdaten anpassen

In index.html folgende Platzhalter ersetzen:

• [BAKERY_ADDRESS] – Straße, PLZ Ort
• [BAKERY_OPENING_HOURS] – z.B. "Mo–Fr: 6:30–18:00\nSa: 7:00–14:00"
• [BAKERY_PHONE] – z.B. "+41 44 123 45 67"
• [BAKERY_EMAIL] – z.B. "hallo@eigebroetlerei.ch"

Bildoptimierung

Die Originalbilder sind sehr groß (~15–20 MB). Vor dem Deployment:

# Mit ImageMagick (Beispiel)
mogrify -resize 1200x1200 -quality 85 images/*.jpg

# Oder WebP konvertieren (noch kleiner)
for f in images/*.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

Projektstruktur

/
├── index.html          # Hauptseite
├── css/
│   └── style.css       # Alle Styles
├── js/
│   └── main.js         # Vanilla JavaScript
├── data/
│   └── breads.json     # Brot-Daten
├── images/             # Brotbilder
├── Dockerfile          # Für Deplo.io
└── README.md

Technologie

• HTML5 – Semantisch, Accessible
• CSS3 – Custom Properties, Grid, Flexbox
• Vanilla JS – Keine Frameworks, ~150 Zeilen
• Python – http.server im Docker-Container

Browser-Support

Moderne Browser (Chrome, Firefox, Safari, Edge – letzte 2 Versionen).