tl:dr: Der Engineering Kiosk hat nach 22 Podcast-Episoden eine eigene Website. Gebaut mit dem static site builder Astro. Source code ist auf GitHub:EngineeringKiosk/webpage verfügbar.
Nach fünf Monaten und 22 Podcast-Episoden mit insgesamt über 20 Stunden Audio-Content, launcht der Engineering Kiosk seine eigene Website.
Warum erst jetzt und nicht mit dem Start vom Podcast, wieso wir überhaupt eine Website brauchen, wenn es doch Spotify gibt und wie der technische Unterbau aussieht, all das klären wir in diesem Blog post.
Warum haben wir erst jetzt eine eigene Website?
Der Engineering Kiosk ist als Side Project von Andy und Wolfgang gestartet, welcher neben dem Beruf, Familie und weiteren Verpflichtungen betrieben wird. Die oberste Priorität lautete: Lean (schlank) starten und iterativ arbeiten. Dieses bedeutet ein ständiges Hinterfragen, ob eine Funktion für den Start wirklich nötig, oder doch nur nice to have ist. Die Website war nice to have, da die Priorität auf dem Podcast selbst lag: Das Kernprodukt.
Weiterhin benötigt die Erstellung und Aufbau einer eigenen Website Zeit. Zeit, die wir zu Anfang primär in die Aufnahme neuer Episoden und den Aufbau einer Hörerschaft investiert haben. Natürlich gibt es sehr gute Website-Baukästen wie Wix oder Jimdo oder gute (Content Management)-Systeme wie Wordpress. Dennoch ist es nur selten innerhalb von wenigen Stunden getan.
Zu guter letzt benutzen wir RedCircle als Plattform für das Hosting und die Verteilung von Podcasts. Eines der Features ist eine simple Website: Engineering Kiosk Podcast auf RedCircle. Diese Webseite war für den Start “gut genug”.
Warum braucht der Engineering Kiosk überhaupt eine eigene Website?
Die Engineering Kiosk Podcast von RedCircle war für den Start ausreichend, hat jedoch einige Nachteile:
- Funktionsumfang der Website ist sehr begrenzt
- Anpassungen sind nicht möglich
- Content-Fokus alleinig auf den Podcast (keine Zusatzinfos zu z.b. uns als Podcast Hosts)
- Keine analytischen Daten (z.B. Wie viele Personen besuchen die Website? Wer drückt bei welcher Episode auf Play?)
- Keine Kontrolle
Diese Nachteile waren uns zum Start vom Engineering Kiosk bewusst. Es war gut genug. Mittel- und Langfristig limitieren diese Nachteile jedoch das Potential vom Engineering Kiosk. Mit unserer eigenen Website erhoffen wir uns:
- Neue Hörer zu akquirieren
- Themen aus unseren Episoden als Blog Artikel zu veröffentlichen (automatisches Transkription der Podcast-Episoden mit unserem Dialekt ist schwierig)
- Das Projekt “Engineering Kiosk” auch im Suchmaschinen-Ranking auftauchen zu lassen
- Durch analytische Daten mehr Einblick zu bekommen, vor allem in die Interessen unserer Hörerinnen und Hörer
- Die Kontrolle über unseren eigenen Content zu behalten
#21 Static Site Generators & DIE Webseite
Statische Websites sind wieder cool und wir springen mit der eigenen Website direkt auf den Hype. Eine Episode mal in (teilweise) eigener Sache: Nach 6 Monaten und 20 Episoden haben wir eine eigene...
Womit ist die Engineering Kiosk Website gebaut?
Für das Design haben wir das Flex Template von Shuffle genutzt, welches auf Tailwind CSS basiert. Primär weil
- Wolfgang und Andy keine Designer oder Frontend-Engineers sind
- andere dies deutlich besser können
- Tailwind CSS recht simpel zu nutzen ist, dabei aber auch gut erweiterbar ist
Als Plattform kam Astro, ein neuer Static Site Builder, zum Einsatz. Ein auf JavaScript und Komponenten basierter Static Site Generator mit einem breiten Featureset (z.B. Server Side Rendering) und einem hohen Fokus auf Developer Experience. Warum?
- Das JavaScript Eco-System ist groß und bietet viele Integrationen out of the box
- Wolfgang bevorzugte eine JavaScript basierte Lösung und Andy hatte bereits minimale Erfahrungen mit Astro (durch den trivago tech blog)
- Astro bietet viele Vorlagen unter astro.new
- Astro hat trotz hoher Flexibilität einen simplen Content und Routing Ansatz
- Astro verfolgt einen Partial Hydration Ansatz, der eine Webseite ohne JavaScript auf der Client-Seite erlaubt.
Beim Hosting verlassen wir uns Netlify. Mit der direkten Anbindung an GitHub werden sogar bei Pull Requests Vorschau-Umgebungen automatisch erzeugt.
Als Entwicklungs- und Kollaborations-Plattform nutzen wir Github. Der Source Code ist auch öffentlich zugänglich: Engineering Kiosk Webpage @ GitHub.
- Template von shuffle https://shuffle.dev/
- Plattform / Static Site Generator
Boring Software und der Begriff astro bei Google
Wir sind große Verfechter von Boring Software. Dies bedeutet, dass wir gerne Software einsetzen, die ein gewissen Grad an Reife erreicht hat und wo die Fehlerfälle industrieweit verstanden und gelöst sind. Das direkte Gegenteil von Hacker News driven development.
Bei Astro trifft dies jedoch nicht zu. Primär weil
- das Projekt noch sehr jung ist
- bei unseren Freizeit-Projekten auch der Spaß und das Lernen von neuen Technologien im Vordergrund steht
- der Engineering Kiosk keine mission critical Software ist (z.B. wo keine Rufbereitschaft notwendig ist)
Weil dieses Projekt noch recht jung (und innovative) ist und das Wort Astro ein Teil des Wortes Astrologie ist, war die klassische Investigation von Fehlern durch Google nicht ganz einfach. Die meisten Suchtreffer hatten bei dem Wort Astro etwas mit Horoskopen und dem Weltraum zu tun. Das GitHub-Repository withastro/astro, die Dokumentation oder die Discord Community waren deutlich hilfreicher.
#21 Static Site Generators & DIE Webseite
Statische Websites sind wieder cool und wir springen mit der eigenen Website direkt auf den Hype. Eine Episode mal in (teilweise) eigener Sache: Nach 6 Monaten und 20 Episoden haben wir eine eigene...
Euer Feedback
Wir hoffen, dass euch die eigene Website gefällt. Feedback ist gerne via E-Mail oder twitter (@EngKiosk) gesehen.