Warum existiert diese Seite?

Ein seit Langem bestehendes Problem beim Erlernen jeder neuen Technologie ist, dass die meisten Dokumentationen und Beispiele, die man im Internet oder von AIs bekommt, so trivial sind, dass sie einem keine Vorstellung davon geben, ob die Technologie oder die eigene Implementierung einer echten, komplexen Arbeitslast standhält. Ein Beispiel dafür sind die zahlreichen To-do-Listen-Beispiele.

Ich habe ein SASS-Projekt geplant, das auf mehreren Technologieannahmen basiert, die getestet werden müssen, bevor überhaupt versucht wird, das echte Projekt zu bauen, und eine persönliche Profilseite wie diese, die von einem vollständigen CMS-Backend angetrieben wird, ist gerade komplex genug, um einen ordentlichen Production-Buildout zu rechtfertigen, und zugleich einfach genug, um nicht zu lange in der Umsetzung zu dauern; mit dem zusätzlichen Vorteil, dass ich, wenn alles gut läuft, eine Profilseite bekomme, die gut performt und eine gute Testumgebung für weitere technische Experimente sein wird.

Cloudflare als Deployment-Ziel

Cloudflare Workers https://workers.cloudflare.com/ scheinen auf den ersten Blick eine extrem günstige Möglichkeit zu sein, eine komplexe Anwendung zu deployen. Back-End-Entwicklung wirkt einfach und robust, und das OpenNext-Paket https://opennext.js.org/ scheint eine effiziente Möglichkeit zu bieten, das Front-End in Next.js https://nextjs.org/ zu entwickeln und zu Cloudflare zu deployen.

Ich bezweifle, dass diese Seite viel menschlichen Traffic anziehen wird; allerdings werde ich versuchen, so viel Websuche- und AI-Crawler-Traffic wie möglich darauf zu lenken. So sollte ich die tatsächlichen Kosten für den Betrieb einer stark frequentierten Seite auf Cloudflares Plattform herausfinden können.

Diese Seite komplizierter machen, als sie sein sollte

Content-Management-Backend (CMS)

Ganz ehrlich: Diese Seite könnte in ihrem aktuellen Zustand mit einem Coding-Agent in ein paar Stunden zusammengebastelt werden; ein ernstzunehmendes System sollte jedoch kein Deployment benötigen, um grundlegende Inhalte zu ändern. Daher verwendet diese Seite ein vollständiges CMS auf Basis von Payload CMS (https://payloadcms.com/), das als separater Cloudflare Worker deployt wird.

Payload selbst verwendet eine SQL-Datenbank, die wiederum als CloudFlare D1 SQLite-Datenbankinstanz https://developers.cloudflare.com/d1/ deployt werden muss und mit Datenbankmigrationen sauber verwaltet werden muss, um den Entwicklungslebenszyklus zu unterstützen.

Automatisierte Übersetzungen

Diese Seite unterstützt 20 Sprachen. Da die Website ein einfaches Gerüst für die CMS-Inhalte ist, wird die i18n-Seite während der Entwicklung mit einem Coding-Agent (Co-pilot und Claude Opus 4.5) umgesetzt.

Damit bleibt, dass alle aktuellen und zukünftigen CMS-Inhalte automatisch übersetzt werden müssen, sobald sich irgendwelche englischen Inhalte ändern.

Queue- und Cron-basierter Worker

Die Übersetzungsanforderung erfordert einen einigermaßen komplizierten Prozess, der:

• Auf einem Cron-Timer triggern wird.
• Inhalte identifiziert, die eine neue Übersetzung benötigen.
• Eine Übersetzung zuverlässig ausführt.
• Sich zuverlässig von einem Fehler erholt.

Daher wird eine weitere CloudFlare D1-Instanz verwendet, um Übersetzungsarbeit zu verfolgen, und Cloudflare Queues (https://developers.cloudflare.com/queues/) werden mit einem Cron-basierten Producer-Consumer-Pattern genutzt, um die Tasks zu verwalten und zu skalieren. OpenAIs gpt-5.2 API wird aufgerufen, um die Übersetzungen zu erledigen, und AI.SDK https://ai-sdk.dev/ verbindet alles miteinander.

Für diese Seite ist das Overkill, aber jedes Production-System, in jeder Größenordnung, braucht ein robustes Muster, um Hintergrundverarbeitung zu orchestrieren.

Frühere Versionen dieser Seite

Ich habe diese Seite bereits zweimal als Werkzeug umgesetzt, um neue Technologien zu lernen:

2013 - Ruby und AWS lernen

• Ruby on Rails v4.0.0.
• Bootstrap-Styling v3.
• CoffeeScript für die UI.
• Backbone Marionette VMC-Front-End-Pattern.
• Deployt auf einem AWS-Host.

2017 - React lernen

• React v16.0.0 für die UI.
• Redux und Thunk für asynchrone Operationen.
• Semantic UI für das Styling.

Wie geht es weiter

Die Seite ist sauber für SEO angebunden, und es braucht eine regelmäßige Kadenz an neuen Inhalten, um Crawler-Traffic zu erzeugen. Ich werde detailliertere Artikel zu den verschiedenen verwendeten Technologien und Lösungen veröffentlichen.