Deployn

Deployn Version 3: Ein neues Kapitel

Ich habe meinen Blog neu aufgesetzt, jetzt mit Astro.js im Hintergrund und neuen Funktionen.

Deployn Version 3: Ein neues Kapitel-heroimage

Es ist soweit! Ich habe meinen Blog neu aufgesetzt und heute neu veröffentlicht.

Goodbye Gatsby.js

Vor einigen Jahren begann ich, mich mit Webdesign zu beschĂ€ftigen. Bald darauf begann ich mich fĂŒr Docker zu interessieren. Allerdings war ich von der KomplexitĂ€t vieler Tutorials und dem Mangel an umfassenden Anleitungen frustriert. Es schien, als setzten viele Autoren ein gewisses Maß an Vorwissen voraus, was mein VerstĂ€ndnis erschwerte. Vielleicht ist dafĂŒr grundsĂ€tzlich ein Informatikstudium hilfreich, mein Studium auf dem Gebiet des deutschen Rechts war dem VerstĂ€dnis jedoch nicht zutrĂ€glich. Der Mangel an guten deutschen Ressourcen zu den Themen Containerisierung und Servermanagement veranlasste mich, mit einem Blog einen Beitrag zur Community zu leisten. Es ging mir dabei nicht nur darum, meine Erfahrungen zu teilen, sondern auch um den Prozess der Erstellung eines eigenen Blogs. Zudem gab es den guten Side-Effekt, dass ich selbst nochmal spĂ€ter auf meine eigenen Anleitungen zurĂŒckgreifen konnte

Hintergrund

Im Jahr 2018 erstellte ich die erste Website fĂŒr ein Unternehmen, wobei ich WordPress fĂŒr das CMS und das Frontend verwendete. Insofern gab es fĂŒr mich grundsĂ€tzlich kein Problem damit eine Homepage im Internet bereitzustellen. Dennoch ist eine zeitlang bezĂŒglich Blogging nichts passiert. Ein grĂ¶ĂŸeres Problem hatte ich insgesamt mit der DSGVO, obwohl (oder gerade weil) ich mich damit intensiv beschĂ€ftigt habe.

2019 hatte Gatsby.js mein Interesse geweckt, was 2020 zu einem mit Gatsby.js betriebenen Testblog mit WordPress als Headless CMS fĂŒhrte. Trotz seiner Einfachheit war der Blog unattraktiv und hatte nur sehr wenige Besucher (0), vor allem weil es ihm an Inhalten fehlte und er von Suchmaschinen nicht indiziert wurde. Letztendlich habe ich das Projekt auf Eis gelegt.

Deployn wurde deployt

Anfang 2021 wurde Gatsby.js Version 3 veröffentlicht. Dies fĂŒhrte dazu, dass ich das Vorhaben eines Blogs wieder aufnehmen wollte. Ich fand das Template gatsby-theme-try-ghost von styxlab auf Github, das Ghost als Headless CMS benötigte. Nachdem ich einen VPS von Contabo und eine Domain von Netcup gemietet hatte, ĂŒberlegte ich mir, wie ich Ghost installieren möchte. Als Reverse Proxy hatte ich nur Erfahrungen mit dem Nginx Proxy Manager und ich hatte Caddy mal ausprobiert, aber ich hörte zu der Zeit sehr viel Gutes ĂŒber traefik. Ich entschied mich das mal testen. Die Konfiguration von traefik erwies sich so einfach wie die anderen (mir bereits bekannten) Optionen. Schließlich richtete ich erfolgreich eine Instanz von Ghost ein.

In Ghost habe ich dann meinen ersten Blogpost geschrieben und zwar zum Thema traefik als Proxy Server. Mir gefiel dabei insbesondere der Text Editor von Ghost, schon damals war er gut designed. ZusĂ€tzlich erstelle ich in Ghost noch den Text fĂŒr mein Impressum und meine DatenschutzerklĂ€rung.

Anschließend nahm ich ein paar Änderungen am Gatsby-Starter-Template vor und das Ganze ging dann online am 17. April 2021. Ich hatte nun einen Blog basierend auf Gatsby.js Version 3.0.0, gehostet wurde das Frontend in der Gatsby Cloud (Fastly als CDN).

Drei Tage spĂ€ter bekam der Blog auch eine Sitemap und ein Favicon. Weitere Verbesserungen wie das HinzufĂŒgen eines Inhaltsverzeichnisses fĂŒr BeitrĂ€ge und die Integration von Gatsby-Plugin-Sharp fĂŒr Inline-Bilder folgten im Mai. NatĂŒrlich kamen auch noch weitere Blogposts dazu, am Code selbst gab es aber keine grĂ¶ĂŸeren Änderungen. Der letzte Commit war dann am 7. Oktober 2021.

Im Oktober 2021 stellte Styxlab auch die Entwicklung der Vorlage ein und verlagerte seinen Schwerpunkt auf Next.js.

Neuerfindung

Im Februar 2022 begann ich mit dem Neuaufbau meines Blogs. Ich hatte ein paar gekaufte Templates, die ich gut fand. Nachdem ich Probleme mit Ghost fĂŒr den Headless-Einsatz hatte, experimentierte ich mit Strapi und Contentful. Allerdings fand ich Strapi zu einschrĂ€nkend und Contentful zu diesem Zeitpunkt zu teuer. Als Zwischenlösung speicherte ich meine BlogbeitrĂ€ge in meinem Repository als Markdown-Dateien. Zu diesem Zeitpunkt war Gatsby auf Version 4.1.4 aktualisiert worden, und ich nutzte ThemeUI fĂŒr das Styling, wĂ€hrend ich mich fĂŒr meine alten Bilder weiterhin auf Ghost CMS verließ.

Die zweite Version meines Blogs ging am 6. MĂ€rz 2022 online. In den folgenden Wochen gab es kleinere und grĂ¶ĂŸere Bugfixes und ich fĂŒgte einige Features hinzu. Im laufenden Jahr hat Next.js statische Builds verbessert, was dazu fĂŒhrte, dass Gatsby.js weniger attraktiv wurde, insbesondere hatte ich das GefĂŒhl, Gatsby.js versuche sich auf Gatsby Cloud zu konzentrieren, statt auf das eigentliche Framework. Google Trends zeigt, dass die Suchanfragen zu Next.js deutlich höher sind als die zu Gatsby.js.

Google Trends Gatsby vs Next

Anfang des Jahres 2023 fing ich an darĂŒber nachzudenken, den Blog auf Next.js umzustellen. Ich hatte bereits ein Kundenprojekt mit Next.js umgesetzt und war sehr zufrieden mit dem Framework, wenngleich es nicht perfekt war. Zudem gab es Anfang Februar 2023 die Meldung, dass Gatsby von Netlify gekauft wurde. Hierdurch ging ich davon aus, dass Gatsby.js selbst noch weniger weiterentwickelt wird als zuvor. Netlify gab im laufenden Jahr bekannt, dass sie Gatsby Cloud einstellen werden. Das war grundsĂ€tzlich fĂŒr mich in Ordnung, so hoste ich meinen Blog seit Oktober 2023 auf meinem Server in Deutschland (Netcup).

Am 15. MĂ€rz 2023 habe ich dann die Gastby Version meines Blogs erfolgrich (jedoch mĂŒhevoll) auf Version 5.6.0 angehoben. Problem war bei jedem grĂ¶ĂŸeren Update, dass viele Plugins nicht mehr kompatibel waren oder andere Probleme auftraten. Erschwerent kam hinzu, dass ich mit ThemeUI nicht richtig glĂŒcklich wurde, grundsĂ€tzlich waren mir reines CSS, SCSS oder TailwindCSS lieber. Seit diesem Zeitpunkt sehe ich in meinem Repository auch keine Commits mehr, die Änderungen am Blog betreffen, nur der Inhalt wurde aktualisiert. Jedenfalls ist das im Prinzip die Version, die bis vor wenigen Tagen online war.

Ich ĂŒberlegte, wie ich den Blog am besten auf Next.js umstellen könnte. Ich hatte damit auch bereits ein wenig angefangen. Es war jedenfalls klar, dass es nach ĂŒber zwei Jahren Zeit war, sich von Gatsby.js zu verabschieden.

Der neue Blog

Nun war es aber so, dass die Entwicklung von Next.js mich auch nicht wirklich zufriedenstellte. Viele Features wurden zu frĂŒh ausgerollt, obwohl sie nicht stabil waren. Bei einer Unternehmensseite, die ich betreue, fĂŒhrte jedes zweite Major-Update von Nextjs v13 zu irgendeinem Fehlverhalten. Außerdem hatte ich hier das GefĂŒhl, dass es bei vielen Updates um Vercel geht (Ähnliches Problem wie bei Gatsby und Gatsby Cloud bzw. jetzt Netlify). Next.js 13 hatte viele Probleme, die inzwischen mit Next.js 14 behoben wurden. Kent C. Dodds schrieb auch einen Post darĂŒber, warum er Next.js nicht nutzt. Die Antwort darauf von Lee Robinson ist auch lesenswert.

Astro.js

Mein grĂ¶ĂŸtes Problem waren aber weiterhin statische Builds von Next.js. Ich war damit anfĂ€nglich nicht zufrieden. Inzwischen ist es deutlich besser, aber nicht ideal. Ich nutze auch weiterhin Next.js fĂŒr bestimmte Projekte, aber ich fing an, mich in den letzten zwei Monaten mit Astro.js zu beschĂ€ftigen. Die großen Vorteile dabei waren, dass bei einer statischen Seite weniger JavaScript geladen werden muss, außerdem ist es möglich, weiterhin React Komponenten zu verwenden.

Google Trends Astro vs Next

Trotz der geringeren PopularitĂ€t von Astro.js im Vergleich zu Next.js laut Google Trends, habe ich mich fĂŒr Astro.js als neues Framework fĂŒr meinen Blog entschieden und hoffe, dass es sich nicht um einen Fehlgriff handelt.

Mehrsprachig

Interessant fand ich grundsÀtzlich auch die Möglichkeit einen mehrsprachigen Blog zu schreiben, um die Rechweite erhöhen zu können.

JahrBesucherwachstum
2021Beginn
2022+ 288 % (im Vergleich zum zweiten Halbjahr 2021)
2023+ 91 % (ohne BerĂŒcksichtung des Dezembers)

Sollte ich in 2024 wieder eine Steigerung von 90 % haben, wÀre ich damit sehr zufrieden.

Die Besucher kamen bisher aus folgenden LĂ€ndern:

LandAnteil
Deutschland85 %
Österreich4 %
Schweiz3 %
USA2 %
Belgien1 %
Brasilien1 %
Sonstige4 %

Template

Auf der Suche nach einem mehrsprachigen Blog entdeckte ich die astro-starter Vorlage von zankhq. Die Entwicklung bewegt sich zwar vermutlich nicht in die Richtung, die ich benötige, aber es war ein guter Startpunkt. Ich habe das Template dann am 26. November 2023 geklont und fĂŒr meine BedĂŒrfnisse angepasst. Ich habe die Blogposts im Markdown-Format ĂŒbertragen und sie insbesondere mit Hilfe von maschinellen Übersetzungstools ĂŒbersetzt (danke an dieser Stelle an DeepL und GPT). Die Übersetzungen sind sicherlich nicht perfekt, aber ich hoffe, dass sie verstĂ€ndlich sind. Das Styling wurde mit TailwindCSS und etwas SCSS realisiert.

Veröffentlichung

Vor einigen Tagen wurde Astro.js Version 4 veröffentlicht. FÜr das Update musste nichts angepasst werden, nur bei einigen Dependencies musste ich darauf warten, dass sie auch aktualisiert werden. Heute, am 20. Dezember 2023 geht die neue Version meines Blogs online. Sicherlich mĂŒssen noch einige Anpassungen vorgenommen werden, wobei die meisten Funktionen der vorherigen Version bereits implementiert sind.

Die Entwicklung im Überblick

  • Veröffentlichung von Deployn Version 1

    Der erste Blogpost ĂŒber Traefik als Reverse-Proxy wurde veröffentlicht.

  • HinzufĂŒgen der Sitemap

    Eine Sitemap wurde zur Homepage hinzugefĂŒgt.

  • Kommentarfunktion

    Die Kommentarfunktion wurde zu den Blogposts hinzugefĂŒgt.

  • Veröffentlichung von 20 Blogposts

    Insgesamt wurden 20 Blogposts veröffentlicht.

  • Beginn der Entwicklung von Deployn Version 2

    Die Entwicklung von Deployn Version 2 hat begonnen.

  • Veröffentlichung von Deployn Version 2

    Deployn Version 2 wurde gestartet.

  • Inhaltsverzeichnis-Funktion

    Ein Inhaltsverzeichnis wurde zu den Blogposts hinzugefĂŒgt.

  • Integration von Google Ads

    Google Ads wurden in die Seite integriert.

  • Veröffentlichung von 35 Blogposts

    Insgesamt wurden 35 Blogposts veröffentlicht.

  • Entfernung von Google Ads

    Google Ads wurden von der Seite entfernt.

  • Upgrade der Gatsby-Version

    Die Gatsby-Version wurde auf 5.6.0 aktualisiert.

  • Beginn der Entwicklung von Deployn Version 3

    Die Entwicklung von Deployn Version 3 hat begonnen.

  • Letztes Update fĂŒr Deployn Version 2

    Das letzte Update fĂŒr Deployn Version 2 wurde durchgefĂŒhrt.

  • Veröffentlichung von Deployn Version 3

    Deployn Version 3 wurde gestartet.

  • In den letzten drei Jahren hat sich mein Blog in Bezug auf die Codebase-Sprachen und die Performance verĂ€ndert.

    Codebase-Sprachen

    Die erste Version war vollstÀndig JavaScript-basiert.

    Sprachen Version 1

    Die zweite Version bestand hauptsÀchlich aus MDX-Dateien mit JavaScript.

    Sprachen Version 2

    Die aktuelle Version enthÀlt mehr MDX-Dateien sowie einige Astro- und JavaScript-Komponenten.

    Sprachen Version 3

    Analyse der Build-Zeit

    Ich schaue mir an, wie lange es dauert, die Seite auf meinem Computer zu erstellen. Ich kann Version 1 nicht mehr testen, da ich die Seite nicht mehr habe. Aber die Versionen 2 und 3 sind vergleichbar. In beiden FĂ€llen verwende ich Nodejs 20.9 und NPM 10.1. Ich sollte vorausschicken, dass es sicherlich Möglichkeiten gibt, die Build-Zeit durch Änderungen am Code zu optimieren, aber ich habe mich damit nicht im Detail beschĂ€ftigt. Zuerst mĂŒssen die NPM-Pakete installiert werden, das mache ich mit time npm install und dann lasse ich time npm run build laufen, um die Seite zu bauen. Ich mache das zweimal, das erste Mal, um den Cache zu erstellen und das zweite Mal, um zu sehen, wie lange es dauert, die Seite nach einer Änderung zu bauen.

    SiteNpm InstallNpm Build (First)Npm Build (Second)Bilder optimiertHTML Seiten erstellt
    Gatsby-Sitereal 0m25.914sreal 2m19.001sreal 0m25.018s835191
    Astro-Sitereal 0m11.206sreal 0m54.677sreal 0m29.649s710645

    Beim zweiten Build ist Astro.js in meinem Fall also langsamer. Aber da ich den Cache mit Gatsby sowieso immer leeren muss, wenn ich grĂ¶ĂŸere Änderungen an einem Blogbeitrag vornehme, kann ich die zusĂ€tzliche vier Sekunden Wartezeit mit Astro.js verschmerzen.

    Page Speed Insights

    Als nĂ€chstes schaue ich mir auch die Geschwindigkeit der Seite an. Dazu nehme ich Google Lighthouse zur Hilfe. Ich teste die Index Seite, die Blog-Index Seite, meinen meist aufgerufenen Blogpost ĂŒber die Installation von Paperless auf einem Synology NAS sowie die Seite mit dem Kapitalwertrechner.

    Index Seite

    Deployn Version 2 (Gatsby.js):

    GerÀtLeistungBarrierefreiheitBest PracticesSEO
    Mobil779510099
    Computer10096100100

    Deployn Version 3 (Astro.js):

    GerÀtLeistungBarrierefreiheitBest PracticesSEO
    Mobil10093100100
    Computer10095100100

    Blog Index

    Auf meiner Gatsby-Site wurden 10 Blog-EintrĂ€ge auf der Blog-Index-Seite angezeigt, auf meiner Astro-Site sind es (derzeit) ĂŒber 40, weil ich mich noch nicht um die Paginierung gekĂŒmmert habe.

    Deployn Version 2:

    GerÀtLeistungBarrierefreiheitBest PracticesSEO
    Mobil75959592
    Computer959695100

    Deployn Version 3:

    GerÀtLeistungBarrierefreiheitBest PracticesSEO
    Mobil989510098
    Computer10096100100

    AusgewÀhlter Blogpost

    Deployn Version 2:

    GerÀtLeistungBarrierefreiheitBest PracticesSEO
    Mobil44869592
    Computer57879591

    Deployn Version 3:

    GerÀtLeistungBarrierefreiheitBest PracticesSEO
    Mobil979295100
    Computer1009495100

    Kapitalwertrechner

    Auf dieser Seite befinden sich in beiden FĂ€llen zwei mit React erstellte Komponenten.

    Deployn Version 2:

    GerÀtLeistungBarrierefreiheitBest PracticesSEO
    Mobil7696100100
    Computer10096100100

    Deployn Version 3:

    GerÀtLeistungBarrierefreiheitBest PracticesSEO
    Mobil9994100100
    Computer10096100100

    Fazit

    Auf dieser Reise, die sich ĂŒber 3,5 Jahre erstreckt, habe ich viel gelernt und hoffe weiterhin, dass ich auch anderen mit meinen Blogposts helfen kann. Mit einem tieferen VerstĂ€ndnis fĂŒr verschiedene Frameworks glaube ich, dass Astro.js am besten zu meiner Vision fĂŒr die Zukunft meines Blogs passt. Ich hoffe, dass ich mit der neuen Version meines Blogs auch mehr Besucher erreichen kann. Ich freue mich auf die nĂ€chsten Jahre und hoffe, dass ich weiterhin Spaß am Bloggen habe.


    Diese Website verwendet Cookies. Diese sind notwendig, um die FunktionalitÀt der Website zu gewÀhrleisten. Weitere Informationen finden Sie in der DatenschutzerklÀrung