OSI Global — Website-Aktualisierung

Frontend: Astro, Vue
CMS: Keystatic, Markdoc
Infrastruktur: GitHub Pages, GitHub Actions
Integrationen: HubSpot CRM

Was wir gebaut haben

Wir haben die veraltete WordPress-Installation von OSI Global abgelöst und sie durch eine blitzschnelle statische Website ersetzt. Um strenge Performance-Ziele zu erreichen, haben wir das Kernprojekt in Astro aufgesetzt und interaktive clientseitige Komponenten mit Vue erstellt. Wir hosten die Staging- und Produktionsumgebungen auf GitHub Pages und deployen automatisch über CI Pipelines.

Die Kernanforderung war ein nahtloses Content-Editing-Erlebnis ohne den Ballast einer traditionellen Datenbank. Wir haben Keystatic implementiert, das alle Inhalte – Seiten, Blogs und SEO-Metadaten – direkt im GitHub Repository speichert. Das Marketingteam bearbeitet Inhalte über eine übersichtliche UI, während Autoren Blogbeiträge in Markdoc formatieren. Wir haben ihr gesamtes historisches Blog-Archiv migriert und eine native Astro Bildoptimierung eingerichtet, um alle Inline-Post-Medien automatisch zu verarbeiten.

Der knifflige Teil war der Produktkatalog. OSI verwaltet ein riesiges Volumen an B2B Hardware SKUs. Wir haben ihre globalen Datentabellen nach Hersteller aufgeteilt, um die Seitengenerierung schnell zu halten. Dann haben wir ein benutzerdefiniertes Vue Katalog-Interface erstellt, mit Freitextsuche und erweiterter Filterung. Käufer durchsuchen den Bestand, erstellen einen Angebotskorb und senden Anfragen, die wir sofort in HubSpot routen.

Um Preise und Bestand aktuell zu halten, haben wir die manuelle Dateneingabe komplett umgangen. Wir haben einen benutzerdefinierten Sync-Button in Keystatic erstellt, der frische Katalogdaten direkt aus Google Sheets in die Data Layer der Website zieht.