Blogposts mit Vite und Frontmatter

Vite bringt mit import.meta.glob bereits den wichtigsten Baustein mit: Mehrere Dateien lassen sich während des Builds gesammelt importieren. Für einen kleinen Blog reicht das zusammen mit einem Frontmatter-Parser und einem Markdown-Renderer aus.

Der Aufbau

Dieser Beispielbeitrag liegt als gewöhnliche Markdown-Datei unter docs/blog. Der Dateiname wird zum URL-Slug, während das Frontmatter die Metadaten der Seite liefert:

---
title: Blogposts mit Vite und Frontmatter
date: 2026-08-16
description: Ein kleines vollständiges Beispiel.
tags:
  - Vite
  - Markdown
---

Die Website liest die Dateien über einen statischen Glob ein:

const sources = import.meta.glob<BlogPostModule>("/docs/blog/*.md", {
  query: "?blog-post",
  import: "default",
  eager: true,
});

gray-matter trennt anschließend die Metadaten vom Inhalt. react-markdown rendert den verbleibenden Text als React-Komponenten, ohne ungeprüftes HTML einzufügen.

Von der Datei zur Seite

Die Route /blog/$slug sucht den Beitrag anhand seines Dateinamens. TanStack Start rendert die Route zunächst serverseitig. Beim Produktions-Build folgt der Prerenderer den Links aus der Blogübersicht und erzeugt für jeden veröffentlichten Beitrag eine statische HTML-Datei.

Damit bleibt der Schreibprozess angenehm einfach: eine neue Markdown-Datei hinzufügen, verlinken lassen und bauen.