bestes-wetter.de is live: outdoor stories on a fast Blazor foundation

My second website in the CARECOM family is online – a bilingual platform for hikes, travel and honestly tested gear. A look behind the scenes for everyone who enjoys not just the result, but the engineering too.

ConsultingHarald Mühlhoff 4 min read

bestes-wetter.de launch card: logo, domain and the tagline „hikes, travel, gear — honestly tested, cleanly documented“

As of today, bestes-wetter.de is live – my second website in the CARECOM family and a deliberate contrast to the consulting and photography world here on carecom.de. It is about the outdoors: about long-distance hikes such as the Alpine crossing from Garmisch to Sterzing, about cities explored on foot, and about gear that comes not from a brochure but from the mountain. The ambition is right there in the claim: honestly tested, cleanly documented.

Because this is the site of a software architect and developer, I would like to share not only what was built, but a few glimpses of how. Under the hood it is a Blazor Web App on .NET 10 – server-rendered, with interactive islands where they pay off – but don't worry, this won't turn into a whitepaper.

Old hay barn on a mountain meadow at dusk, the silhouette of the Alps behind it
Evening mood on the Alpine crossing – exactly the kind of moment the reports aim to capture.

One foundation for several websites

bestes-wetter.de stands on the same foundation as carecom.de – a shared Razor Class Library we extracted while building carecom.de. Cookie banner, multilingual support, the SEO toolkit with sitemap and hreflang, mail delivery via MailKit: all of it lives in one place and is merely re-dressed per site. By now this base carries several sibling sites – each new one is finished faster than the last, and a single improvement to the foundation benefits them all at once. That is exactly why a clean separation of foundation and façade pays off.

Content thought of as data

A tour report is more than running text. It has stages, elevation, a route, dated photos and, here and there, a piece of gear advice. So every article lives as a slim XML metadata file next to plain Markdown text. That text is rendered through Markdig, extended with custom container blocks: :::leg for a stage including distance, elevation profile and map, :::product-card for a gear recommendation, :::pros-cons for an honest weighing-up. The writing stays close to plain text, the result is structured and machine-readable all the same. And because an article's text no longer changes at runtime, each body is parsed exactly once and the finished HTML is served from a cache afterwards.

Maps and images that keep the pace

Tours want to be seen on a map. Leaflet handles that – but not in the main bundle; it is loaded on demand as soon as a page actually contains a map. The library is self-hosted on our own server, and initialisation hooks not only into the first page load but also into Blazor's Enhanced Navigation – so maps reliably appear after an in-app click too. On navigation, orphaned map instances are cleaned up again; otherwise Leaflet leaves behind resize listeners and animation loops that would later get in the way.

The photos, in turn, exist in several resolutions as WebP and are served via srcset, so a smartphone doesn't download the desktop variant. Until the sharp image arrives, a tiny, blurred preview holds its place – the photo fades in softly instead of popping in abruptly. Small things that together make the difference between „loading" and „simply there".

Two languages, from the start

The site speaks German and English, and not as an afterthought bolted on later. The interface texts live as XML and are cast into type-safe C# code at compile time by a Roslyn source generator – every text key thus becomes a property, and a typo surfaces at build time, not at the visitor. Outward-facing, the matching hreflang signals tell Google to recognise the German and English versions as equal siblings rather than mistaking them for duplicate content.

Recommendations the renderer links up

Some gear recommendations carry partner links – openly disclosed. In the Markdown there is only a source-neutral placeholder like amazon:<product-id>; only at render time does the ArticleRenderer turn it into the finished partner link, complete with rel="sponsored" and a target in a new tab. The payoff is home-grown: whoever writes a text needn't bother with tracking parameters, and switching partners is a matter of configuration rather than a search-and-replace across every article.

Come take a look

Of course it is nicest to experience all this on the thing itself. Anyone in the mood for mountains, cities and well-documented gear is warmly welcome at bestes-wetter.de. And anyone wondering how a site like this could be built for their own venture: that is precisely what CARECOM Consulting is for.

Harald Mühlhoff

An unhandled error has occurred. Reload 🗙

Rejoining the server…

Rejoin failed… trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please retry or reload the page.