Personalisierung: Mischkomposition by Tom Misch + Docker Setup

- Website umbenannt zu "Mischkomposition by Tom Misch" - Domain: tom.mischlabs.de - Kontakt: tom@mischlabs.de - Instagram: @Mischkomposition verlinkt - Sponsor-Bereich und Originalautor-Verweise entfernt - Google Analytics deaktiviert - Kontaktformular auf Deutsch und mit mailto - Docker Setup: Dockerfile, docker-compose.yml, nginx.conf fuer NAS Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-12 13:52:19 +02:00
parent 5434298c25
commit c885d22346
11 changed files with 138 additions and 64 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,10 @@
+_site/
+.git/
+.claude/
+node_modules/
+.sass-cache/
+.jekyll-metadata
+*.md
+!Gemfile
+docker-compose.yml
+.gitignore
--- a/Brain.md
+++ b/Brain.md
@@ -4,9 +4,14 @@
 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
- GitHub Repo: https://github.com/Kroonk/Photography.git
- Lokaler Pfad: d:\Vibecoding\Website\Photography
+## 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

 ---

@@ -19,7 +24,8 @@ Keine 1:1 Kopie, sondern eine individuell angepasste Version mit eigenen Ansprue
 | Styling | SCSS -> kompiliertes CSS |
 | JS Libraries | jQuery, Poptrox (Lightbox), EXIF.js |
 | Build-Tool | Gulp (SCSS kompilieren, JS minifizieren, Bilder resizen) |
-| Hosting | GitHub Pages (kostenlos) |
+| 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) |

@@ -82,17 +88,44 @@ Photography/
 | `gulp resize` | Bilder zu fulls (1024px) + thumbs (512px) |
 | `gulp` | Alles (build + resize) |

+## Docker / NAS Hosting
+
+- **NAS**: UGREEN mit UGOS PRO
+- **Port**: 8080 (Port 80 ist belegt)
+- **Zugriff**: `http://NAS-IP:8080` -> 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 8080:80, auto-restart
+- `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
+1. Aenderungen lokal machen (Bilder, Config, Design)
+2. Git commit & push
+3. Auf NAS: `git pull && docker compose up -d --build`
+4. Fertig - Website aktualisiert
+
 ## Anpassungs-Roadmap (TODO - mit Besitzer besprechen)

+- [x] Titel, Subtitle, Autor anpassen (Mischkomposition / Tom Misch)
+- [x] Social Media Links aktualisieren (Instagram: @Mischkomposition)
+- [x] Sponsor-Bereich entfernen
+- [x] Kontaktformular auf tom@mischlabs.de konfiguriert
+- [x] Google Analytics vom Originalautor entfernt
+- [x] Custom Domain: tom.mischlabs.de eingetragen
 - [ ] Eigene Bilder einpflegen
- [ ] Titel, Subtitle, Autor anpassen
- [ ] Social Media Links aktualisieren
- [ ] Footer-Text personalisieren
+- [ ] Footer Bio-Text schreiben (optional)
 - [ ] Farbschema/Design anpassen
- [ ] Sponsor-Bereich entfernen
- [ ] Kontaktformular konfigurieren oder entfernen
- [ ] Custom Domain einrichten (optional)
- [ ] Google Analytics ID aendern oder entfernen
 - [ ] Eigene Kategorien/Alben erstellen (Feature-Erweiterung)

 ---
--- a/2
+++ b/2
@@ -1 +1 @@
-photography.rampatra.com
+tom.mischlabs.de
--- a/21
+++ b/21
@@ -0,0 +1,21 @@
+# === Build-Phase: Jekyll kompiliert die statische Website ===
+FROM ruby:3.2-alpine AS builder
+
+RUN apk add --no-cache build-base
+
+WORKDIR /site
+
+COPY Gemfile ./
+RUN bundle install
+
+COPY . .
+
+RUN bundle exec jekyll build
+
+# === Serve-Phase: nginx liefert nur die fertigen Dateien aus ===
+FROM nginx:alpine
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=builder /site/_site /usr/share/nginx/html
+
+EXPOSE 80
--- a/Skill.md
+++ b/Skill.md
@@ -44,7 +44,11 @@ Sage mir einen Befehl und ich fuehre den Skill aus.
 | `/save` | Aenderungen speichern | Git add + commit mit Nachricht |
 | `/push` | Zum Remote pushen | Aenderungen zu GitHub pushen |
 | `/status` | Git Status | Zeigt aktuellen Git-Status und Aenderungen |
-| `/deploy` | Website deployen | Build + Push fuer GitHub Pages Deployment |
+| `/deploy` | Website deployen | Build + Push + Docker rebuild auf NAS |
+| `/docker-build` | Docker Container bauen | `docker compose up -d --build` ausfuehren |
+| `/docker-stop` | Container stoppen | `docker compose down` |
+| `/docker-logs` | Container Logs | `docker compose logs -f` anzeigen |
+| `/docker-rebuild` | Komplett neu bauen | Container neu bauen und starten nach Aenderungen |

 ## Analyse & Info

--- a/_config.yml
+++ b/_config.yml
@@ -1,30 +1,25 @@
 # Base configs
-baseurl: "https://photography.rampatra.com"
-# baseurl: "" # Comment the above line and uncomment this to test the website locally
+baseurl: "https://tom.mischlabs.de"
 image_fulls_loc: "/images/fulls"
 image_thumbs_loc: "/images/thumbs"
-google_analytics: "UA-46465113-2"
+# google_analytics: "" # Eigene ID hier eintragen wenn gewuenscht

 # UI configs
-title: "Photography by Ram Patra"
-subtitle: "See the world through my eyes!"
-author: "Ram Patra"
+title: "Tom Misch-komposition"
+subtitle: "Mischkomposition"
+author: "Tom Misch"
 header:
- title: "Photography"
- subtitle: "by Ram Patra"
+ title: "Mischkomposition"
+ subtitle: "by Tom Misch"
 footer:
- name: "Hey there, my name is Ram"
- bio: "I am a software developer and a tech aficionado. Love making teeny tiny apps solving tiny problems in life and now learning photography."
- github: "Want a website like this for yourself for free? Just <a href=\"https://github.com/rampatra/photography\">fork this repo on github</a> ;)"
+ name: "Tom Misch"
+ bio: ""
+ contact: "tom@mischlabs.de"
 web_design: "AJ"

 social_urls:
-  twitter: "https://www.twitter.com/rampatra_"
-  instagram: "https://www.instagram.com/ram_patra"
-  dribbble: "https://dribbble.com/rampatra"
-  linkedin: "https://in.linkedin.com/in/ram-patra"
-  github: "https://www.github.com/rampatra"
+  instagram: "https://www.instagram.com/Mischkomposition"

 # Configure which exif data to display
 # Tag is the actual exif tag, icon is a fontawesome icon. Use JSON notation without line breaks
-exif: '[{"tag": "Model", "icon": "fa fa-camera-retro"}, {"tag": "FNumber", "icon": "far fa-dot-circle"}, {"tag": "ExposureTime", "icon": "far fa-clock"}, {"tag": "ISOSpeedRatings", "icon": "fa fa-info-circle"}]'
+exif: '[{"tag": "Model", "icon": "fa fa-camera-retro"}, {"tag": "FNumber", "icon": "far fa-dot-circle"}, {"tag": "ExposureTime", "icon": "far fa-clock"}, {"tag": "ISOSpeedRatings", "icon": "fa fa-info-circle"}]'
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,7 @@
+services:
+  photography:
+    build: .
+    container_name: photography-website
+    ports:
+      - "8080:80"
+    restart: unless-stopped
--- a/index.html
+++ b/index.html
@@ -36,23 +36,9 @@ layout: default
            <div>
                <section>
                    <h2>{{ site.footer.name }}</h2>
+                    {% if site.footer.bio and site.footer.bio != "" %}
                    <p>{{ site.footer.bio }}</p>
-                    <p>{{ site.footer.github }}</p>
-                </section>
-                <section>
-                    <h2>Sponsor</h2>
-                    <div class="presentify">
-                        <div class="presentify-logo">
-                            <a href="https://presentifyapp.com">
-                                <img src="https://raw.githubusercontent.com/rampatra/assets/refs/heads/main/Presentify/Icons/icon_512.png"
-                                 alt="presentify-logo" />
-                            </a>
-                        </div>
-                        <div class="presentify-text">
-                            Turn your screen into a canvas when on video calls and articulate your thoughts better than
-                            ever with the <a href="https://presentifyapp.com">Presentify</a> app.
-                        </div>
-                    </div>
+                    {% endif %}
                </section>
                <section>
                    <h2>Follow me on ...</h2>
@@ -107,8 +93,8 @@ layout: default
            </div>
            <div>
                <section>
-                    <h2>Get in touch</h2>
-                    <form method="post" action="#">
+                    <h2>Kontakt</h2>
+                    <form method="post" action="mailto:tom@mischlabs.de" enctype="text/plain">
                        <div class="fields">
                            <div class="field half">
                                <input type="text" name="name" id="name" placeholder="Name" />
@@ -121,8 +107,8 @@ layout: default
                            </div>
                        </div>
                        <ul class="actions">
-                            <li><input type="submit" value="Send" class="primary" /></li>
-                            <li><input type="reset" value="Reset" /></li>
+                            <li><input type="submit" value="Senden" class="primary" /></li>
+                            <li><input type="reset" value="Zuruecksetzen" /></li>
                        </ul>
                    </form>
                </section>
--- a/nginx.conf
+++ b/nginx.conf
@@ -0,0 +1,22 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Caching fuer Bilder und Assets
+    location ~* \.(jpg|jpeg|png|gif|svg|ico|css|js|woff|woff2|ttf|eot|otf)$ {
+        expires 30d;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # SPA-Fallback
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Sicherheit
+    location ~ /\. {
+        deny all;
+    }
+}
--- a/npmfile.js
+++ b/npmfile.js
@@ -1,3 +1,3 @@
 exports.printMsg = function() {
-    console.log("Visit http://photography.rampatra.com for a demo!");
-};
+    console.log("Mischkomposition - Photography by Tom Misch");
+};
--- a/package.json
+++ b/package.json
@@ -1,30 +1,26 @@
 {
-  "name": "photography",
-  "version": "5.0.0",
-  "description": "A jekyll website for photographer cum developer",
+  "name": "mischkomposition",
+  "version": "1.0.0",
+  "description": "Mischkomposition - Photography Portfolio by Tom Misch",
  "main": "npmfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
-    "url": "git+https://github.com/rampatra/photography.git"
+    "url": "git+https://github.com/Kroonk/Photography.git"
  },
  "keywords": [
    "photography",
-    "jekyll",
-    "website",
-    "template",
-    "website template",
    "portfolio",
-    "portfolio website"
+    "mischkomposition"
  ],
-  "author": "Ram Patra",
+  "author": "Tom Misch",
  "license": "GPL-3.0",
  "bugs": {
-    "url": "https://github.com/rampatra/photography/issues"
+    "url": "https://github.com/Kroonk/Photography/issues"
  },
-  "homepage": "https://github.com/rampatra/photography#readme",
+  "homepage": "https://github.com/Kroonk/Photography#readme",
  "devDependencies": {
    "del": "^4.1.1",
    "gulp": "^4.0.2",