Cómo construimos el blog de byte5

Queríamos un blog que se sintiera como el resto de byte5.ai: rápido, estático, sin base de datos, sin lock-in de proveedor. Sin CMS headless, sin API externa — el contenido vive como archivos en el repositorio y pasa por el mismo proceso de revisión que el código.

Este artículo recorre la arquitectura que hay detrás y por qué escala bien para un equipo multilingüe.

El contenido como archivos#

Cada artículo es un archivo MDX por idioma más una entrada tipada en el registro. El registro contiene todos los campos independientes del idioma — fecha, etiquetas, autor, portada:

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",
  },
];

Lo bueno: filtrar y ordenar en la vista general funcionan puramente con estos datos tipados. El texto en sí permanece donde corresponde — en el archivo MDX.

El contenido pertenece al repositorio, no a una base de datos. Así cada artículo recibe el mismo cuidado que cualquier cambio de código: rama, revisión, diff.

De markdown a un componente de servidor#

Los archivos MDX se compilan en tiempo de build/render y se renderizan como un React Server Component. El resaltado de sintaxis lo gestiona Shiki — completamente en el servidor, sin enviar un solo kilobyte de JavaScript al navegador:

¿Por qué ninguna librería de cliente?#

El resaltado, los anclajes de encabezados y el markdown con sabor GitHub ocurren todos en tiempo de render. El navegador recibe HTML terminado. Eso mantiene las páginas ligeras y los Core Web Vitals en verde.

Preparar, no apresurar#

Un detalle que nos importaba: los artículos con una fecha de publicación futura no aparecen en la vista general — pero la página de detalle ya es accesible por enlace. Así los artículos pueden prepararse con calma y publicarse automáticamente cuando llega su fecha.

export const revalidate = 600;
 
export default async function BlogIndex() {
  const now = Date.now(); // evaluar siempre en tiempo de render
  const published = getPublishedPosts(now);
  // ...
}

El soporte multilingüe completa el cuadro: un artículo se escribe en alemán o inglés y se traduce a los demás idiomas. Si falta una traducción, la página recurre limpiamente al idioma de origen y muestra una discreta insignia de idioma.

El resultado es un blog técnicamente aburrido — en el mejor sentido. Eso es exactamente lo que queríamos.