Wie wir den byte5-Blog gebaut haben

Wir wollten einen Blog, der sich wie der Rest von byte5.ai anfühlt: schnell, statisch, ohne Datenbank, ohne Vendor-Lock-in. Kein Headless-CMS, keine externe API — Inhalte leben als Dateien im Repository und gehen über denselben Review-Prozess wie Code.

In diesem Beitrag zeigen wir die Architektur dahinter und warum sie für ein mehrsprachiges Team gut skaliert.

Inhalte als Dateien#

Jeder Beitrag besteht aus einer MDX-Datei pro Sprache und einem typisierten Eintrag in der Registry. Die Registry hält alle sprach-unabhängigen Felder — Datum, Tags, Autor, Cover:

export const posts: BlogPostMeta[] = [
  {
    slug: "wie-wir-den-byte5-blog-gebaut-haben",
    publishedAt: "2026-05-20",
    tags: ["MDX", "Next.js", "Engineering", "byte5"],
    authorId: "christian-wendler",
    sourceLanguage: "de",
  },
];

Das Schöne daran: Filtern und Sortieren in der Übersicht laufen rein über diese typisierten Daten. Der eigentliche Fließtext bleibt dort, wo er hingehört — in der MDX-Datei.

Inhalte gehören ins Repository, nicht in eine Datenbank. So bekommt jeder Blogpost dieselbe Sorgfalt wie jede Code-Änderung: Branch, Review, Diff.

Vom Markdown zur Server-Komponente#

Die MDX-Dateien werden zur Build- bzw. Render-Zeit kompiliert und als React Server Component ausgegeben. Syntax-Highlighting macht Shiki — komplett auf dem Server, ohne ein einziges Kilobyte JavaScript im Browser:

Warum keine Client-Bibliothek?#

Highlighting, Überschriften-Anker und GitHub-Flavored-Markdown passieren alle beim Rendern. Der Browser bekommt fertiges HTML. Das hält die Seiten leicht und die Core Web Vitals grün.

Vorbereiten statt hetzen#

Ein Detail, das uns wichtig war: Beiträge mit einem Veröffentlichungsdatum in der Zukunft tauchen nicht in der Übersicht auf — die Detail-Seite ist aber schon per Link erreichbar. So lassen sich Posts in Ruhe vorbereiten und gehen automatisch live, sobald ihr Datum erreicht ist.

export const revalidate = 600;
 
export default async function BlogIndex() {
  const now = Date.now(); // immer zur Render-Zeit auswerten
  const published = getPublishedPosts(now);
  // ...
}

Mehrsprachigkeit rundet das Bild ab: Ein Beitrag wird auf Deutsch oder Englisch verfasst und in die übrigen Sprachen übersetzt. Fehlt eine Übersetzung, fällt die Seite sauber auf die Ausgangssprache zurück und zeigt ein dezentes Sprach-Badge.

Das Ergebnis ist ein Blog, der technisch langweilig ist — im besten Sinne. Genau das wollten wir.