Headless CMS: Technische Umsetzung mit Storyblok der Bruker Alloytester Website
Detaillierte Einblicke in die Technologie und Implementierungsstrategie
Neugestaltung der Frontend-Infrastruktur
Unsere technische Neuausrichtung für die Bruker-Alloytester-Website konzentrierte sich auf die Integration moderner Webtechnologien, um eine flexible und komponentenbasierte Architektur zu schaffen. Wir wollten sicherstellen, dass Inhalte zentral gepflegt und international ausgespielt werden können – schnell und unabhängig vom Code. Hierbei wurde Storyblok als Headless CMS integriert, um die nahtlose Verwaltung von Content in verschiedenen Sprachen über eine intuitive Benutzeroberfläche zu ermöglichen – ohne harte Backend-Anpassungen. Ein flexibler Aufbau, der eigenständige Pflege ermöglicht – ganz ohne zusätzliche Entwicklungsaufwände.
Nutzung von Nuxt und VueJS im Frontend
Für die Umsetzung der Benutzeroberfläche haben wir uns für ein modernes Tech-Stack entschieden: Nuxt in Verbindung mit VueJS. Ein entscheidender Vorteil dieser Kombination ist das serverseitige Rendering (SSR). Dadurch werden Seiteninhalte bereits auf dem Server generiert und blitzschnell an die Nutzer ausgeliefert. Was das bedeutet?
Schnellere Ladezeiten
Optimale User Experience, auch bei langsameren Verbindungen
Doch darüber hinaus haben wir smarte Strukturen geschaffen, mit denen technische Integrationen zentral gesteuert werden können.
Strukturierung durch Site Config Blocks
Zur Verwaltung von Tag IDs wie Google Tag Manager (GTM) und Cookielaw wurden sogenannte Site Config Blocks erstellt. Hierzu wurde das folgende Setup implementiert:
<script setup lang="ts">
...
// Abruf und Verarbeitung der Site-Konfiguration
const { data } = await storyblokApi.get('cdn/stories/site-config', { ... });
const { gtmId, cookielawId } = data?.story?.content || {};
...
// Integration des GTM-Skriptes sowie Cookielaw-JS
useHead({
script: [ {
src:https://cdn.cookielaw.org/consent/${cookielawId}/otSDKStub.js,
...
}, {
// GTM Skript-Einbindung
hid: 'gtmHead',
innerHTML: (function(w,d,s,l,i{...}),
},
],
noscript: [ {
children: <iframe src="...ns.html?id=${gtmId}" ...></iframe>,
tagPosition: 'bodyOpen',
},
],
})
</script>JavaScript
So können Änderungen an IDs oder Skripten vollständig über das CMS erfolgen – ohne Codeänderung. Das ist effizient, sicher und entlastet das Development-Team bei jeder kleinen Tracking-Anpassung.
Form-IDs Verwaltung über definierte Blöcke
Die Einbindung von Formularen – etwa für Newsletter-Anmeldungen oder Leadgenerierung – sollte ebenso flexibel sein. Gerade bei internationalem Rollout braucht es die Möglichkeit, IDs und Formularvarianten je nach Region oder Sprache dynamisch auszutauschen.
Hierfür haben wir einen sogenannten Form Block entwickelt, der verschiedene ID-Konstellationen unterstützt (inkl. Fallbacks) und auch bei der Einbindung von Marketo-Formularen hilft:
const props = defineProps<...>
...
const munchkinId = props.blok.munchkinId || ...
let formId = props.blok.formId
...
const domFormId = computed(() => mktoForm_${formId})
...
onMounted(() => loadMarketoForm())
...JavaScript
Dank dieses Aufbaus lassen sich Formulareinbindungen zentral über das CMS steuern – ein klarer Vorteil für Bruker, wenn man bedenkt, wie viele verschiedene Spracheinbindungen und Formularvarianten das Unternehmen weltweit verwendet.
Continuous Integration und Deployment mit Cloudflare Workers
Damit die Website nicht nur sauber entwickelt, sondern auch zuverlässig ausgeliefert wird, haben wir eine automatisierte CI/CD-Pipeline eingerichtet. Sie sorgt dafür, dass jederzeit neue Inhalte oder Funktionen sicher auf die Live-Seite gelangen – ohne Downtime, ohne manuelle Fehler.
Die Bereitstellung erfolgt über Cloudflare Workers, was zusätzlich Performance und Sicherheit verbessert – u. a. durch Secret Management und Edge Routing.
...
deploy_production:
stage: deploy_production
environment: production
script:
- yarn install # Abhängigkeiten installieren
- NITRO_PRESET=cloudflare yarn build # App Build für Cloudflare
- echo $ENVIRONMENT | yarn wrangler secret put ENVIRONMENT --config ...
...
- yarn wrangler deploy --config config/production.toml # Entwickelte Anwendung deployen
rules:
- if: '$CI_COMMIT_BRANCH == "main"'
when: manual
- if: '$CI_COMMIT_BRANCH != "main"'
when: neverYaml
Was bringt das konkret?
Durch die automatisierte Bereitstellung mit Hilfe moderner CI/CD-Prozesse entfallen manuelle Eingriffe bei Deployments – neue Inhalte oder Funktionen können mit nur wenigen Schritten live gestellt werden. Auch der Schutz sensibler Daten wie Umgebungsvariablen („Secrets“) wird dank integriertem Secret Management zuverlässig gewährleistet. Gleichzeitig sorgt das Edge Deployment dafür, dass die aktuellste Version der Website weltweit blitzschnell bei den Nutzern ankommt – unabhängig von Region oder Endgerät.
Was Bruker durch diese technische Lösung gewinnt
Die neu entwickelte Plattform überzeugt nicht nur mit einem modernen, ansprechenden Design, sondern vor allem durch ihr leistungsfähiges technisches Fundament. Bruker profitiert von maximaler Flexibilität in der Pflege und Verwaltung der Inhalte – inklusive mehrsprachiger Ausspielung.
Die performante Architektur sorgt für schnelle Ladezeiten und eine stabile User Experience, selbst bei hohem internationalen Traffic. Dank des sicheren, automatisierten Deployments wird zudem der Alltag des Entwicklerteams erheblich erleichtert. Und weil viele redaktionelle Aufgaben nun unabhängig vom Development durchgeführt werden können, werden Prozesse insgesamt schlanker, effizienter und reaktionsschneller.
Kurz gesagt: Die neue Website ist nicht nur zukunftssicher und skalierbar, sondern auch wartungsarm. Damit erfüllt sie alle Anforderungen, die ein global agierendes Unternehmen wie Bruker heute an eine zukunftsorientierte Webplattform stellt.
Neugierig, wie das Ergebnis aussieht?
Werfen Sie einen Blick auf die live geschaltete Bruker Alloytester Website:
Sie möchten erfahren, wie Ihr Unternehmen von solch einer Architektur profitieren kann?
Kontaktieren Sie uns für ein unverbindliches Erstgespräch – wir beraten Sie gern.