Der technische Aufbau meines eigenen CMS

Meine Webseite basiert nicht auf einem fertigen System wie WordPress. Stattdessen habe ich ein eigenes Content-Management-System entwickelt, das genau auf meine Anforderungen zugeschnitten ist. Dabei war mir wichtig, dass das System übersichtlich bleibt, auf verschiedenen Geräten funktioniert und später problemlos erweitert werden kann. Für die technische Umsetzung verwende ich mehrere moderne Technologien, die jeweils eine bestimmte Aufgabe übernehmen.

Die wichtigsten Bestandteile

• Next.js 16: Grundlage der öffentlichen Webseite und des Dashboards

• TypeScript: Sorgt für einen besser strukturierten und zuverlässigeren ProgrammcodeTailwind

• CSS: Verantwortlich für Design und responsive Darstellung

• Prisma und Neon PostgreSQL: Speichern Artikel, Benutzer, Themen und weitere Daten

• Tiptap: Rich-Text-Editor zum Schreiben und Formatieren der Artikel

• NextAuth: Geschützter Login für das Dashboard

• Vercel Blob: Speicherung der hochgeladenen Bilder

• Vercel: Bereitstellung und Betrieb der Webseite

Next.js als Grundlage

Das Herzstück meiner Webseite ist Next.js 16. Das Framework bildet sowohl die öffentlich sichtbare Webseite als auch den geschützten Verwaltungsbereich ab. Besucher können auf der öffentlichen Seite meine veröffentlichten Artikel lesen. Im Dashboard kann ich dagegen neue Beiträge erstellen, vorhandene Inhalte bearbeiten und verschiedene Einstellungen verwalten. Dadurch befinden sich Webseite und CMS in einem gemeinsamen System. Ich muss also nicht zwei voneinander getrennte Anwendungen entwickeln und pflegen.

TypeScript für einen zuverlässigeren Code

Als Programmiersprache verwende ich TypeScript. Es erweitert JavaScript um feste Datentypen und hilft dabei, viele Fehler bereits während der Entwicklung zu erkennen. Das ist besonders hilfreich, wenn das CMS mit der Zeit wächst. Neue Funktionen lassen sich dadurch kontrollierter ergänzen, und bestehender Code bleibt leichter nachvollziehbar.

Gestaltung mit Tailwind CSS

Für das Design kommt Tailwind CSS zum Einsatz. Damit lassen sich Benutzeroberflächen direkt innerhalb der einzelnen Komponenten gestalten. Ich verwende Tailwind sowohl für die öffentliche Webseite als auch für das Dashboard. Ein wichtiger Punkt ist dabei die responsive Darstellung: Die Inhalte sollen auf einem Desktop-PC genauso gut funktionieren wie auf einem Tablet oder Smartphone.

Prisma und Neon PostgreSQL als Datenbasis

Artikel, Benutzer, Themen und weitere Informationen müssen dauerhaft gespeichert werden. Dafür verwende ich eine PostgreSQL-Datenbank von Neon. Prisma stellt die Verbindung zwischen der Anwendung und der Datenbank her. Vereinfacht gesagt sorgt Prisma dafür, dass mein CMS Daten lesen, erstellen, aktualisieren und löschen kann, ohne dass ich jede Datenbankabfrage vollständig selbst schreiben muss. Wenn ich beispielsweise einen neuen Artikel speichere, werden unter anderem der Titel, der Inhalt, der Veröffentlichungsstatus und das zugehörige Thema in der Datenbank abgelegt.

Tiptap als Artikel-Editor

Zum Schreiben meiner Beiträge verwende ich Tiptap. Dabei handelt es sich um einen flexiblen Rich-Text-Editor, den ich direkt in das Dashboard eingebunden habe. Damit kann ich Texte ähnlich wie in einem klassischen Schreibprogramm bearbeiten. Unter anderem lassen sich Überschriften, Listen, Links und weitere Formatierungen einfügen. Der Editor ist besonders wichtig, weil ich meine Artikel nicht direkt als Programmcode schreiben möchte. Das Veröffentlichen eines Beitrags soll sich möglichst einfach und komfortabel anfühlen.

Geschützter Zugang mit NextAuth

Das Dashboard ist nicht öffentlich zugänglich. Für die Anmeldung verwende ich NextAuth. Nur registrierte Benutzer können sich einloggen und auf den Verwaltungsbereich zugreifen. Dort lassen sich Artikel und andere Inhalte bearbeiten. Die eigentliche Webseite bleibt dagegen für alle Besucher frei erreichbar. Damit sind die redaktionellen Funktionen klar von den öffentlich sichtbaren Inhalten getrennt.

Bilder mit Vercel Blob speichern

Bilder werden nicht direkt in der Datenbank gespeichert. Dafür nutze ich Vercel Blob. Wenn ich im CMS ein Bild hochlade, wird die Bilddatei in einem separaten Speicher abgelegt. In der Datenbank muss anschließend nur noch die zugehörige Adresse gespeichert werden. Das hält die Datenbank schlanker und ermöglicht es, Bilder effizient auf der Webseite auszuliefern.

Veröffentlichung über Vercel

Die fertige Anwendung wird über Vercel bereitgestellt. Dort wird die Webseite automatisch gebaut und veröffentlicht. Wenn ich eine neue Version meines CMS in meinem GitHub-Repository speichere, kann Vercel die Änderungen übernehmen und anschließend online bereitstellen. Dadurch lassen sich neue Funktionen und Verbesserungen vergleichsweise schnell veröffentlichen.

So arbeiten die Komponenten zusammen

Beim Erstellen eines Artikels greifen mehrere Teile des Systems ineinander:

1. Ich melde mich über den geschützten Login im Dashboard an.

2. Den Artikel schreibe und formatiere ich im Tiptap-Editor.

3. Hochgeladene Bilder werden in Vercel Blob gespeichert.

4. Texte und weitere Artikeldaten werden über Prisma in der Neon-Datenbank abgelegt.

5. Next.js stellt den veröffentlichten Artikel auf der öffentlichen Webseite dar.

6. Vercel sorgt dafür, dass die Anwendung im Internet erreichbar ist.

Für Besucher bleibt dieser technische Ablauf unsichtbar. Sie sehen am Ende lediglich den fertigen Artikel.

Warum ich mich für diesen Aufbau entschieden habe

Ein eigenes CMS zu entwickeln ist aufwendiger, als ein fertiges System zu installieren. Dafür kann ich selbst bestimmen, welche Funktionen enthalten sind und wie sie umgesetzt werden. Ich muss keine Erweiterungen installieren, die mehr Funktionen mitbringen, als ich tatsächlich benötige. Stattdessen kann ich das System Schritt für Schritt ausbauen und genau an meine Arbeitsweise anpassen. Gleichzeitig lerne ich bei jeder neuen Funktion mehr über Webentwicklung, Datenbanken, Benutzerverwaltung und den Betrieb moderner Webseiten. Mein CMS ist deshalb nicht nur die technische Grundlage von davidwelt.de, sondern auch ein langfristiges persönliches Entwicklungsprojekt.