- 3 Minuten - 552 Wörter

Der Proxy-Ansatz ist für ein statisches System wie Hugo die eleganteste Lösung. Der große Vorteil: 100 % DSGVO-Konformität ohne Cookie-Banner. Die IP-Adressen deiner Besucher verbleiben vollständig auf deinem Webserver und werden niemals an die Mastodon-Instanz übermittelt [🔍]. Da Hugo-Seiten meistens auf modernen Hosting-Plattformen oder klassischen PHP-Webspace-Paketen liegen, gibt es zwei Wege, den Proxy umzusetzen. Wähle einfach die Variante, die besser zu deiner Hosting-Infrastruktur passt:

Variante A: Der PHP-Proxy (Für klassischen Webspace)

Wenn deine Hugo-Seite auf einem normalen Webspace (z. B. bei Strato, Ionos, All-In-One) liegt, kannst du eine winzige PHP-Datei als Tunnel nutzen.

1. PHP-Datei erstellen

Erstelle im static/-Ordner deines Hugo-Projekts eine Datei namens ticker-proxy.php. Hugo kopiert diese beim Build-Prozess unverändert in das Hauptverzeichnis deiner Website.

2. JavaScript anpassen

In deiner assets/js/mastodon-stream.js (aus der vorherigen Antwort) entfällt nun der direkte Aufruf an Mastodon. Ändere die fetch-Zeile zu deiner eigenen Domain:

// ALT: fetch(https://${INSTANCE}/api/v1/accounts/...)// NEU: Ruft deine eigene, lokale PHP-Schnittstelle auf fetch(’/ticker-proxy.php’) .then(response => response.json()) .then(posts => { // … (restliche Filter- und Anzeige-Logik bleibt exakt gleich) });

Hinweis zum Live-Streaming: Da WebSockets über PHP-Proxies auf Standard-Webspace schwer zu realisieren sind, wechselt man hier vom Server-Streaming auf ein schnelles Polling. Du lässt das Skript einfach alle 30 oder 60 Sekunden im Hintergrund die ticker-proxy.php neu abfragen.

Variante B: Serverless Function (Für Netlify, Vercel & Cloudflare Pages)

Falls du deine Hugo-Seite bei einem modernen Cloud-Hoster via GitHub/GitLab verwaltest, nutzt du dafür eine Serverless Edge Function. Hier am Beispiel von Netlify:

1. Edge-Funktion anlegen

Erstelle im Hauptverzeichnis deines Hugo-Projekts den Ordner netlify/edge-functions/ und darin die Datei ticker.js:

export default async (request, context) => { const INSTANCE = “mastodon.social”; const ACCOUNT_ID = “123456789012345678”;

const response = await fetch(https://${INSTANCE}/api/v1/accounts/${ACCOUNT_ID}/statuses?limit=5, { headers: { “User-Agent”: “HugoNetlifyProxy/1.0” } });

const data = await response.json();

return new Response(JSON.stringify(data), { headers: { “content-type”: “application/json; charset=UTF-8”, “access-control-allow-origin”: “*” }, }); }; export const config = { path: “/api/ticker” };

2. JavaScript anpassen

In deinem Hugo-Frontend fragst du im JavaScript nun einfach die lokale URL /api/ticker ab:

fetch(’/api/ticker’) .then(response => response.json()) .then(posts => { /* … Logik … */ });

💡 Der ultimative Performance-Tipp: Caching einbauen

Um zu verhindern, dass bei jedem einzelnen Seitenaufruf deiner Homepage dein Server eine neue Anfrage an Mastodon schickt (was die Seite verlangsamt und das Rate-Limit von Mastodon sprengen könnte), solltest du die Antwort für 1–2 Minuten zwischenspeichern (ca-chen). Bei der PHP-Variante lässt sich das extrem einfach umsetzen, indem das PHP-Skript das Ergebnis kurz in einer temporären Textdatei ablegt:

$cache_file = DIR . ‘/ticker_cache.json’; $cache_time = 60; // 1 Minute in Sekunden

// Wenn Cache existiert und frisch ist, liefere ihn direkt aus if (file_exists($cache_file) && (time() - filemtime($cache_file) < $cache_time)) { echo file_get_contents($cache_file); exit; }

// … (Hier folgt der cURL-Code von oben) …

// Nach erfolgreichem cURL-Abruf in den Cache schreiben file_put_contents($cache_file, $response); echo $response;

Zusammenfassung der DSGVO-Vorteile

  • Keine Einwilligung nötig: Der Ticker darf sofort beim Laden der Seite aktiv sein.
  • Keine Erwähnung von Drittstaaten: Da die Datenverarbeitung (Datenweitergabe der IP) physisch gar nicht stattfindet, ist der Ticker datenschutzrechtlich „unsichtbar“.
  • Performance-Bonus: Durch das serverseitige Caching lädt deine Homepage für den Endnutzer deutlich schneller, als wenn dessen Browser erst mühsam eine Verbindung zu einer externen Mastodon-Instanz aufbauen müsste.

Um dir das Setup so leicht wie möglich zu machen, lass mich wissen:

  • Auf welcher Plattform hostest du deine Hugo-Website derzeit? (z. B. Uberspace, Strato, Netlify, GitHub Pages, eigener Server)