Hello World

Erste Notizen zur neuen Seite — Tech Stack, warum ich meinen Blog per Telegram steuere, und wie Imagen 4 das Hero-Bild gemacht hat.

metatanstackreactaicloudinaryclaudeloop-gateway
Hello World

Hello World

Neue Seite, erster Post. Ich wollte schon lang eine persönliche Seite haben die ich tatsächlich pflege und nicht nach zwei Wochen vergesse. Diesmal hab ich das anders angegangen: Die Seite ist so gebaut, dass ich sie per Chat bedienen kann. Kein CMS aufmachen, kein Editor starten. Telegram auf, Nachricht schreiben, fertig.

Klingt übertrieben? Vielleicht. Aber es funktioniert, und ich find's ziemlich gut.

Was drunter steckt

Nichts Wildes:

  • TanStack Start mit file-based Routing und Static Prerendering. Vite-nativ, kein Overhead.
  • Tailwind v4 direkt als Vite Plugin.
  • Content Collections — Posts und Portfolio Items sind .md Dateien im Repo mit Zod-Schemas. Kein CMS, kein Admin Panel.
  • Cloudinary fürs Bilder-CDN. Automatisch WebP/AVIF, automatisch komprimiert.
  • Imagen 4 generiert Hero-Bilder. Vier Varianten, ich pick eine.
  • Netlify baut und deployed bei jedem Push.

Content ist Git, Bilder sind Cloudinary, alles andere passiert im Build. Fertig.

Blog per Chat

Hier wird's interessant. Die ganze Content-Pipeline besteht aus npm Scripts die Claude Code ausführen kann:

  1. Ich sag: "Schreib was über X"
  2. Claude legt die .md Datei an — Frontmatter, Tags, alles
  3. "Mach ein Bild dazu" → npm run gen:image → vier Varianten von Imagen 4
  4. Ich schau sie mir an, sag "Nimm die Zweite"
  5. npm run lock:image → Upload nach Cloudinary, Frontmatter wird aktualisiert
  6. "Push das" → Claude committed, pushed, Netlify deployed

Das war's. Vom Gedanken zum veröffentlichten Post ohne IDE.

Loop Gateway

Aber Claude Code läuft auf meinem Rechner. Unterwegs hilft mir das wenig.

Deshalb hab ich Loop Gateway gebaut — eine Plattform die Telegram, WhatsApp oder Email mit Claude verbindet. Nachrichten kommen rein, werden an einen Agent geroutet, der in einem isolierten Docker Container arbeitet. Wenn er was Kritisches tun will (pushen, löschen), fragt er mich vorher per Chat.

Heißt konkret: Ich sitz im Bus, schreib in Telegram "Neuer Post über WebSockets vs SSE", und Loop Gateway kümmert sich um den Rest. Markdown wird erstellt, Bilder generiert, ich bekomm eine Approval-Anfrage fürs Deployment, tippe OK, und die Seite ist live.

Loop Gateway hat noch mehr unter der Haube — Agent Groups mit eigenen Budgets, einen Cron Scheduler, Multi-Agent Koordination — aber für den Blog-Workflow reicht die Telegram-Anbindung.

Und jetzt?

Ich schreib hier über Frontend, AI-Tooling, Musik, Creative Coding. Manches davon mit Claude, manches ohne. Diesen Post zum Beispiel — den Text hab ich grob diktiert und Claude hat ihn in Markdown gegossen. Das Bild oben kommt von Imagen 4.

Ob man das merkt, könnt ihr selbst entscheiden.