Erfolgsgeschichte Migration von Hugo CMS zu Storyblok

12 Februar, 2025 von Jörn Bernhardt

TL;DR

HiveMQ ist ein Unternehmen, dass mit einem großen Expertenwissen ein technisches Produkt für IoT-Plattformen entwickelt hat. Der starke Fokus auf Entwickler spiegelte sich auch in ihrer Homepage wider, die auf einem Blog-System auf Markdown Dateien basierte (Hugo). Mit zunehmendem Wachstum der Firma wurde es wichtiger, dass sich neue Inhalte wie Blogbeiträge, Webinare und Videos auch ohne spezielles Markdown-Wissen erstellen ließen. Im Zuge einer Neuausrichtung des grundlegenden Designs der Webseite sollten wir den Tech-Stack von Hugo auf eine neue Content-Plattform (Storyblok) überführen.

Projekttyp

Migration auf Storyblok einer bestehenden und stetig wachsenden Webseite mit über 800 zum Großteil individualisierten Unterseiten und Blogbeiträgen auf Markdown-Basis.

Technologien

• HugoCMS
• Storyblok
• SvelteKit

Benutzergruppen

• Webmaster (Verantwortlich für die Veröffentlichung neuer Inhalte)
• Developer (Beitragende von neuen Inhalten)
• Marketing- / Content-Team (Zukünftig verantwortlich für neue Inhalte)

Probleme

Das bisherige Design und das Neue unterschieden sich stark. Header, Footer und Branding sollten wiedererkennbar und gleich aufgebaut sein - egal, ob man auf einer der noch zu migrierenden oder schon auf einer der neuen Seiten unterwegs ist.

Während der Implementierung der neuen Seite sollten stetig neue Inhalte von Blogs oder anderer Content-Typen weiter veröffentlicht werden können. Um bestehende Workflows nicht zu stören, musste Hugo dafür beibehalten werden, bis die neue Lösung ausgereift war.

Weiterhin war es wichtig, dass das SEO-Rating nicht groß leiden sollte. Hierzu war es wichtig, dass wir bestehende Links möglichst beibehalten konnten oder zumindest passende Redirects einbauen, um auf anderen Seiten vorhandene Backlinks zu schützen.

Lösung

Die bestehende Webseite war wenig komponentenbasiert aufgebaut und musste zunächst auf einen Zustand gebracht werden, um grundsätzliche Elemente für beide Versionen gleichsetzen zu können. Da sich die Programmierung stark unterscheidet - Hugo Templates gegenüber Svelte Komponenten - wurden Header, Footer und ähnlich globale Komponenten zunächst in beiden Technologien implementiert. Da sich aber beispielsweise Links im Menü durchaus ändern konnten, mussten wir für die Erstellung dieser Komponenten Skripte erstellen, um sie anhand neuer Vorgaben schnell und sicher zu aktualisieren.

Bei teilweise mehrmals täglich neuen Inhalten für den Blog, Einladungen zu Webinaren oder ähnlichem, hielten wir zunächst an Hugo fest, bis die Umstellung für jeweils einen bestimmten Content-Typ abschließen konnten. Dann wurde Storyblok zunächst nur für neue Inhalte verwendet, die bestehenden Inhalte wurden weiterhin über Hugo generiert. Wenn wir sehen konnten, dass Storyblok damit gut funktioniert und entsprechende Features hatte, die für bestehende Inhalte nötig waren, wurden diese dann nach und nach unterbrechungsfrei migriert.

Wichtig war also, dass in unserem Build-Prozess sowohl Storyblok als auch Hugo gut zusammenspielten. Wenn eine Seite von Storyblok bereitgestellt wurde, hatte diese Priorität gegenüber der von Hugo generierten HTML Seite. In unserem Fall haben wir es möglich gemacht, diese dann zu überschreiben und im Notfall auch wieder zurück wechseln zu können.

Innerhalb der Storyblok Inhalte konnten wir das volle Potential von SvelteKit nutzen, um eine besonders schöne Benutzererfahrung zu ermöglichen. Links von Storyblok zu Hugo-Inhalten und Links von Hugo-Inhalten zu Storyblok wurde über unseren eigens entwickelten Build-Prozess möglich. Technisch gesehen waren es dann zwei strikt getrennte Seiten, für die Besucher aber kaum merklich.

Hätten wir diese jedoch nicht so stark getrennt, hätte das teilweise auf globale Elemente angewendete CSS der bisherigen Hugo-Webseite auf das neue Design ausgewirkt und dort Probleme verursacht.

Um das SEO-Rating insgesamt verbessern zu können, haben wir viele Felder in den Storyblok-Inhalten hinzugefügt, die nur indirekt für Besucher der Webseite sichtbar sind: Meta-Angaben für das Teilen von Inhalten auf bestimmten Plattformen oder Beschreibungstexte für Suchmaschinen sind Beispiele dafür. Zudem war es wichtig, Weiterleitungen von früheren Links auf die neue Struktur zu setzen: Bestehende Links zu Blogbeiträgen oder Artikeln sollten weiterhin erreichbar bleiben. Dank unseres Buildprozess konnten wir auch sehen, welche Teilbereiche uns hier noch fehlten.

Weitere Highlights

Während wir uns der Umstellung gewidmet haben und immer weitere Inhalte produziert wurden, kam es zu keinen größeren Downtimes oder Problemen für Besucher. "Ich habe noch nie erlebt, dass eine so große Migration so reibungslos funktioniert hätte" war ein schönes Kompliment, was wir von Geschäftsführer Dominik Obermaier erhalten haben.

Ein neuer Mitarbeiter wurde seitens HiveMQ eingestellt, der sich um die Webseite zukünftig betreut. Diesen konnten wir soweit unterstützen, dass er mit dem Build-Prozess und der Migration so vertraut war, dass das inzwischen - nach Übertragung der letzten Inhalte von Hugo - der Build-Prozess entsprechend wieder verkleinert werden konnte.

Projektdauer

5 Monate+