bestes-wetter.de ist live: Outdoor-Geschichten auf schneller Blazor-Basis

Meine zweite Website im CARECOM-Verbund ist online – eine zweisprachige Plattform für Touren, Reisen und ehrlich getestete Ausrüstung. Ein Blick hinter die Kulissen für alle, die nicht nur das Ergebnis, sondern auch die Technik mögen.

ConsultingHarald Mühlhoff 3 Min. Lesezeit

Startbild von bestes-wetter.de: Logo, Domain und der Claim „Touren, Reisen, Ausrüstung — ehrlich getestet, sauber dokumentiert“

Seit heute ist bestes-wetter.de produktiv – meine zweite Website im CARECOM-Verbund und ein bewusster Kontrast zur Beratungs- und Fotografie-Welt hier auf carecom.de. Es geht um draußen: um Fernwanderungen wie die Alpenüberquerung von Garmisch nach Sterzing, um Städte, die man zu Fuß erkundet, und um Ausrüstung, die nicht aus dem Prospekt, sondern vom Berg kommt. Der Anspruch steht schon im Claim: ehrlich getestet, sauber dokumentiert.

Weil dies hier die Seite eines Software-Architekten und -Entwicklers ist, möchte ich nicht nur erzählen, was entstanden ist, sondern auch ein paar Schlaglichter darauf werfen, wie. Unter der Haube ist es eine Blazor Web App auf .NET 10 – serverseitig gerendert, mit interaktiven Inseln dort, wo es sich lohnt – aber keine Sorge, es wird kein Whitepaper.

Alte Heuhütte auf einer Bergwiese in der Abenddämmerung, dahinter die Silhouette der Alpen
Abendstimmung auf der Alpenüberquerung – genau solche Momente sollen die Berichte einfangen.

Eine Basis für mehrere Websites

bestes-wetter.de steht auf derselben Grundlage wie carecom.de – einer gemeinsamen Razor Class Library, die wir beim Bau von carecom.de herausgelöst haben. Cookie-Banner, Mehrsprachigkeit, der SEO-Baukasten mit Sitemap und hreflang, der Mailversand über MailKit: All das liegt einmal zentral und wird pro Seite nur noch eingekleidet. Inzwischen trägt diese Basis mehrere Schwester-Seiten – jede neue ist schneller fertig als die vorige, und eine Verbesserung am Fundament kommt allen auf einmal zugute. Genau dafür lohnt sich die saubere Trennung von Fundament und Fassade.

Inhalt als Daten gedacht

Ein Tourenbericht ist mehr als ein Fließtext. Er hat Etappen, Höhenmeter, eine Route, Fotos mit Datum und mittendrin manchmal eine Ausrüstungsempfehlung. Deshalb liegt jeder Artikel als schlanke XML-Metadaten-Datei neben einem reinen Markdown-Text. Gerendert wird der über Markdig, erweitert um eigene Container-Bausteine: :::leg für eine Etappe samt Distanz, Höhenprofil und Karte, :::product-card für eine Ausrüstungsempfehlung, :::pros-cons für die ehrliche Abwägung. So bleibt das Schreiben nah an purem Text, das Ergebnis ist trotzdem strukturiert und maschinenlesbar. Und weil sich ein Artikel-Text zur Laufzeit nicht mehr ändert, wird jeder Body genau einmal geparst und das fertige HTML danach aus einem Cache bedient.

Karten und Bilder, die das Tempo halten

Touren wollen auf einer Karte gesehen werden. Dafür kommt Leaflet zum Einsatz – aber nicht im Haupt-Bundle, sondern erst bei Bedarf nachgeladen, sobald eine Seite tatsächlich eine Karte enthält. Die Bibliothek liegt selbst gehostet auf dem eigenen Server, und die Initialisierung hängt sich nicht nur an den ersten Seitenaufbau, sondern auch an Blazors Enhanced Navigation – so erscheinen Karten auch nach einem Klick im SPA-Betrieb zuverlässig. Beim Seitenwechsel werden verwaiste Karten-Instanzen wieder abgeräumt; sonst hinterlässt Leaflet Resize-Listener und Animations-Schleifen, die sich später in die Quere kämen.

Die Fotos liegen in mehreren Auflösungen als WebP vor und werden per srcset ausgespielt, sodass ein Smartphone nicht die Desktop-Variante herunterlädt. Bis das scharfe Bild da ist, hält eine winzige, unscharfe Vorschau den Platz – das Foto blendet weich ein, statt ruckartig aufzuploppen. Kleine Dinge, die zusammen den Unterschied zwischen „lädt" und „ist einfach da" ausmachen.

Zwei Sprachen, von Anfang an

Die Seite spricht Deutsch und Englisch, und zwar nicht als nachträglicher Anbau. Die Oberflächen-Texte liegen als XML und werden von einem Roslyn-Source-Generator beim Kompilieren in typsicheren C#-Code gegossen – jeder Textschlüssel wird so zu einer Eigenschaft, und ein Vertipper fliegt schon beim Build auf, nicht erst beim Besucher. Nach außen sorgen die passenden hreflang-Signale dafür, dass Google die deutsche und die englische Fassung als gleichwertige Geschwister erkennt und nicht als doppelten Inhalt missversteht.

Empfehlungen, die der Renderer verlinkt

Manche Ausrüstungsempfehlungen tragen Partner-Links – offen deklariert. Im Markdown steht dabei nur ein quell-neutraler Platzhalter wie amazon:<Produkt-ID>; erst beim Rendern macht der ArticleRenderer daraus den fertigen Partner-Link, inklusive rel="sponsored" und Ziel im neuen Tab. Der Gewinn ist hausgemacht: Wer einen Text schreibt, muss sich nicht um Tracking-Parameter kümmern, und ein Partnerwechsel ist eine Sache der Konfiguration statt eines Suchen-und-Ersetzen quer durch alle Artikel.

Schauen Sie vorbei

Am schönsten lässt sich das alles natürlich an der Sache selbst erleben. Wer Lust auf Berge, Städte und gut dokumentierte Ausrüstung hat, ist auf bestes-wetter.de herzlich willkommen. Und wer wissen möchte, wie sich eine solche Seite für das eigene Vorhaben umsetzen lässt: Genau dafür gibt es das CARECOM Consulting.

Ihr Harald Mühlhoff

Es ist ein Fehler aufgetreten. Neu laden 🗙

Verbindung wird wiederhergestellt …

Wieder­verbindung fehl­geschlagen – nächster Versuch in Sekunden.

Wieder­verbindung fehl­geschlagen.
Bitte erneut versuchen oder die Seite neu laden.

Die Sitzung wurde vom Server pausiert.

Sitzung konnte nicht fort­gesetzt werden.
Bitte erneut versuchen oder die Seite neu laden.