Files

Kroonk 62f85e2132 Port auf 8090 geaendert (8080 war belegt auf NAS)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-04-12 14:32:58 +02:00

5.9 KiB

Raw Blame History

Brain.md - Projekt-Wissensdatenbank

Projektziel

Eine eigene Fotografie-Portfolio-Website basierend auf dem Template von rampatra/photography. Keine 1:1 Kopie, sondern eine individuell angepasste Version mit eigenen Anspruechen.

Besitzer & Kontakt

Name: Tom Misch
Marke: Mischkomposition
Domain: tom.mischlabs.de
E-Mail: tom@mischlabs.de
Instagram: @Mischkomposition
GitHub Repo: https://github.com/Kroonk/Photography.git
Lokaler Pfad: d:\Vibecoding\Website\Photography

Technologie-Stack

Komponente	Technologie
Static Site Generator	Jekyll (Ruby-basiert)
Templating	Liquid Templates
Styling	SCSS -> kompiliertes CSS
JS Libraries	jQuery, Poptrox (Lightbox), EXIF.js
Build-Tool	Gulp (SCSS kompilieren, JS minifizieren, Bilder resizen)
Hosting	UGREEN NAS (Docker) via nginx
Containerisierung	Docker Multi-Stage (Jekyll Build + nginx)
Fonts	FontAwesome, Google Fonts (Source Sans Pro)
Paketmanager	npm (Node), Bundler (Ruby)

Projektstruktur

Photography/
├── _config.yml          # Zentrale Konfiguration (Titel, Social Links, EXIF etc.)
├── _layouts/
│   └── default.html     # Basis-Layout (Head + Body + Scripts)
├── _includes/
│   ├── header.html      # <head> Bereich: CSS, Fonts, Google Analytics
│   └── footer.html      # Script-Einbindungen (jQuery, Poptrox, EXIF, Main)
├── index.html           # Hauptseite: Header, Galerie-Grid, Footer/About
├── assets/
│   ├── css/             # Kompilierte CSS-Dateien (.min.css)
│   ├── sass/            # SCSS Quelldateien
│   │   ├── base/        # Reset, Typography, Page
│   │   ├── components/  # Buttons, Forms, Icons, Panels, Poptrox
│   │   ├── layout/      # Header, Footer, Main, Wrapper
│   │   └── libs/        # Breakpoints, Mixins, Vars, Functions
│   ├── js/              # JavaScript (jQuery, Poptrox, EXIF, Main)
│   ├── fonts/           # FontAwesome Fonts
│   └── webfonts/        # FA5 Webfonts
├── images/
│   ├── fulls/           # Vollaufloesung Bilder
│   └── thumbs/          # Thumbnails (512px)
├── gulpfile.mjs         # Build: SCSS->CSS, JS minify, Image resize
├── package.json         # Node Dependencies
├── Gemfile              # Ruby Dependencies (jekyll)
└── CNAME                # Custom Domain Config

Wie die Galerie funktioniert (Dynamisch)

Bilder hochladen: Fotos in Nextcloud-Ordner Websitebilder ablegen
Volume-Mount: Docker mountet den Nextcloud-Ordner als /images/fulls/ (read-only)
Thumbnails: entrypoint.sh generiert automatisch 512px Thumbnails via ImageMagick
Thumbnail-Check: Alle 60 Sekunden prueft der Container auf neue Bilder
nginx autoindex: Liefert JSON-Liste aller Dateien in /images/fulls/
JavaScript (main.js): Fetcht die JSON-Liste und baut dynamisch <article class="thumb"> Elemente
Poptrox-Lightbox: Klick oeffnet Vollbild + EXIF-Daten (clientseitig via exif.js)

Nextcloud-Integration

Nextcloud-Pfad: /volume1/nextcloud/data/Tom/files/Websitebilder
Mount im Container: /usr/share/nginx/html/images/fulls:ro
Thumbnails-Volume: Docker-Volume thumbs (persistent)
Workflow: Bild in Nextcloud hochladen -> max. 60s warten -> Seite neu laden -> fertig

Wichtige Konfiguration (_config.yml)

baseurl: URL der Website (leer fuer lokal)
title, subtitle, author: Seitentitel und Autor
header.title/subtitle: Header-Anzeige
footer.name/bio/github: Footer-Infos
social_urls: Links zu Social Media
exif: Welche EXIF-Tags angezeigt werden (Model, FNumber, ExposureTime, ISO)
google_analytics: Tracking-ID

Build-Befehle

Befehl	Aktion
`bundle install`	Ruby Dependencies installieren
`bundle exec jekyll serve`	Lokaler Dev-Server
`npm install`	Node Dependencies installieren
`gulp build`	SCSS kompilieren + JS minifizieren
`gulp resize`	Bilder zu fulls (1024px) + thumbs (512px)
`gulp`	Alles (build + resize)

Docker / NAS Hosting

NAS: UGREEN mit UGOS PRO
Port: 8090 (Port 80 ist belegt)
Zugriff: http://NAS-IP:8090 -> spaeter https://tom.mischlabs.de
Domain: tom.mischlabs.de (Reverse Proxy auf NAS einrichten)

Docker-Dateien

Dockerfile - Multi-Stage: Ruby/Jekyll baut Site -> nginx serviert statische Dateien
docker-compose.yml - Container-Definition, Port 8090:80, Nextcloud-Volume, auto-restart
entrypoint.sh - Thumbnail-Generierung + periodischer Check (alle 60s)
nginx.conf - Webserver-Config mit Caching und Sicherheit
.dockerignore - Haelt Build-Context klein (kein .git, node_modules etc.)

Docker-Befehle

Befehl	Aktion
`docker compose up -d --build`	Container bauen und starten
`docker compose down`	Container stoppen
`docker compose logs -f`	Logs anzeigen
`docker compose up -d --build --force-recreate`	Neu bauen nach Aenderungen

Deployment-Workflow

Aenderungen lokal machen (Bilder, Config, Design)
Git commit & push
Auf NAS: git pull && docker compose up -d --build
Fertig - Website aktualisiert

Anpassungs-Roadmap (TODO - mit Besitzer besprechen)

Titel, Subtitle, Autor anpassen (Mischkomposition / Tom Misch)
Social Media Links aktualisieren (Instagram: @Mischkomposition)
Sponsor-Bereich entfernen
Kontaktformular auf tom@mischlabs.de konfiguriert
Google Analytics vom Originalautor entfernt
Custom Domain: tom.mischlabs.de eingetragen
Nextcloud-Integration (Bilder aus Websitebilder-Ordner)
Dynamische Galerie (JS statt Jekyll-Loop)
Automatische Thumbnail-Generierung
Footer Bio-Text schreiben (optional)
Farbschema/Design anpassen
Eigene Kategorien/Alben erstellen (Feature-Erweiterung)

Letzte Aktualisierung: 2026-04-12

5.9 KiB Raw Blame History