Aufbau einer blitzschnellen Website: Unser Tech-Stack im Detail
Wir haben gerade eine überarbeitete Version unserer Website gestartet, und der Geschwindigkeitsschub? Sagen wir einfach, es war ein Game-Changer. Wir sind so begeistert von den Leistungssteigerungen und dem optimierten Entwicklungsablauf, dass wir den Tech-Stack, der das alles ermöglicht hat, gerne teilen möchten. Denn wer liebt nicht einen guten technischen Deep Dive, oder?
Hugo: Der Geschwindigkeitsdämon im Kern
Das Herzstück der Performance unserer Website ist Hugo, ein wirklich schneller Static-Site-Generator, der mit Go entwickelt wurde. Wirklich, schnell. Er erstellt unsere gesamte Website aus Markdown-Inhalten in Millisekunden. Diese Geschwindigkeit ist entscheidend, nicht nur dafür, wie schnell wir entwickeln können, sondern auch dafür, wie schnell die Seite für unsere Besucher lädt. Wir haben uns für Hugo entschieden, weil es einfach ist, wie leicht es zu erweitern ist und ja, wegen dieser rasenden Geschwindigkeit.
Gestaltung unseres digitalen Erscheinungsbilds
Obwohl es einige coole Themes für Hugo gibt, haben wir uns entschieden, unser eigenes zu entwickeln. Dadurch hatten wir die volle Kontrolle über das Design und konnten die Stimmung unserer Marke perfekt einfangen. Wir haben uns auf jeden Fall angesehen, was es an Hugo Themes zur Inspiration gibt – es gibt einige tolle Ausgangspunkte – aber die individuelle Anpassung auf hugoplate war der richtige Schritt für uns. Besonders das Modules-Repository ist einen Blick wert.
Styling und Interaktivität: Das dynamische Duo
Für das Styling haben wir uns ganz auf Tailwind CSS konzentriert. Wenn Sie es noch nicht ausprobiert haben, verpassen Sie etwas. Der Utility-First-Ansatz ist so effizient. Wir konnten schnell Prototypen erstellen und das Design anpassen, ohne eine Menge benutzerdefiniertes CSS zu schreiben. Es ist der Traum eines Front-End-Entwicklers.
Um interaktive Elemente ohne den Ballast eines großen JavaScript-Frameworks hinzuzufügen, haben wir Alpine.js verwendet. Es ist winzig, aber es ist leistungsstark. Perfekt für Dinge wie Modals, Dropdowns und andere kleine UI-Elemente, die einen großen Unterschied machen.
Wo es lebt: Kubernetes, Rook Ceph und S3www
Unsere Website wird auf einem Kubernetes-Cluster gehostet. Dies gibt uns die Skalierbarkeit und Ausfallsicherheit, die wir benötigen, um jeden Traffic zu bewältigen, der auf uns zukommt. Aber wo speichern wir all die Dateien, die Hugo generiert?
Hier kommt Rook ins Spiel. Es ist ein Cloud-nativer Storage-Orchestrator für Kubernetes. Wir verwenden ihn, um einen Ceph-Cluster zu verwalten, der uns verteilten und hochverfügbaren Speicher bietet. Und innerhalb von Ceph haben wir eine S3-kompatible Schnittstelle, sodass wir Tools verwenden können, die bereits mit S3 funktionieren.
Um unsere Website-Dateien tatsächlich im Web bereitzustellen, verwenden wir s3www. Es ist ein praktisches Tool, das direkt von S3 innerhalb unserer Kubernetes-Umgebung bereitstellt.
Automatisierung des Ablaufs: GitHub Actions
Unser gesamter Build- und Deployment-Prozess ist mit GitHub Actions automatisiert. Wann immer wir Änderungen in das Repository pushen, übernimmt GitHub Actions. Es erstellt die Website mit Hugo, führt Tests aus und pusht dann die Dateien in unseren S3-Speicher und wird von s3www bereitgestellt. Es ist nahtlos.
Das Ergebnis: Schnell, skalierbar und einfach zu handhaben
Diese Kombination von Tools hat uns eine Website beschert, die nicht nur unglaublich schnell, sondern auch super skalierbar und einfach zu warten ist. Hugo, Tailwind und Alpine.js haben unseren Entwicklungsprozess so viel reibungsloser gemacht. Und da Kubernetes, Rook und GitHub Actions die Infrastruktur und das Deployment übernehmen, können wir uns auf die Erstellung großartiger Inhalte konzentrieren.
Wir sind sehr zufrieden damit, wie alles geworden ist. Wenn Sie Fragen haben, melden Sie sich bei uns! Wir würden uns gerne über Technik unterhalten.