Boehrsi.de - Blog

Ein weiterer Beitrag zu meinen Erfahrungen mit dem Static Site Generator Hugo im Rahmen der Entwicklung meines Blogs steht an. Das Thema ist kurz und knapp, aktualisiert Hugo häufig und passt euren Code entsprechend der letzten Änderungen an. Selbiges tat ich gestern, auf die aktuelle Version v0.48 und das Ergebnis ist ein Viertel weniger Build-Zeit und wesentlich sauberer Code an diversen stellen.
Dabei half vor allem das letzte Update, welches es ermöglicht Variablen zu überschreiben open_in_new. Bis dato war dafür die Nutzung von .Scratch Variablen open_in_new nötig, was ich persönlich etwas anstrengend fand. Zusätzlich setze ich umfangreich auf resources.Get, was die Basis für die Minification von CSS und JS Dateien open_in_new ist. Außerdem verwende ich nun .Site.GetPage open_in_new an diversen Stellen. Dadurch kann man schnell und einfach für einen konkreten Pfad die gesamte Seite, inklusive des jeweiligen Kontexts, laden und verwenden. Letzteres half mir z.B. dabei fehlerhafte Links zu beheben, welche durch Slashes in Kategorien oder Tags auftraten.
Die Generierung meiner Seite ist nun zusätzlich mit einem weiteren Parameter versehen. Ich führe den Build-Prozess nun mittels hugo –minify open_in_new aus. Dies sorgt dafür das alle möglichen Ressourcen, wie z.B. HTML Seiten, verkleinert werden. Dies minimiert die Ladezeiten, da die eigentliche Seite kleiner ist. Alles in allem habe ich nun ordentlicheren Code, welcher entsprechend besser wartbar ist und zusätzlich sollte die Seite schneller laden und weniger Fehler beinhalten. All diese Verbesserungen basieren grundlegend auf den Verbesserungen an Hugo bzw. der Programmiersprache Go. Solltet ihr also Hugo nutzen, habt ruhig ein Auge auf die Releases im Github Projekt, welche ihr in den Related Links findet. Selbige sind immer recht umfangreich beschrieben und vermitteln schnell eine Idee, ob das Update für einen selbst hilfreich sein könnte.

• Hugo Website open_in_new
• Hugo Documentation open_in_new
• Hugo Releases open_in_new

Eine frische Top 10 Sammlung habe ich für euch zusammengestellt. Diese findet ihr wie gewohnt im unteren Teil der News, in absteigend sortierter Reihenfolge, wobei das Sortierkriterium die Anzahl der Aufrufe war.
Wie immer ist es eine bunte Mischung, welche dieses Mal allerdings eher im aktuellen Bereich meiner News angesiedelt ist. Ausgenommen davon ist interessanterweise der erste Platz, welcher vor ca. sieben Jahren erstellt wurde. Schaut einfach mal rein, vielleicht habt ihr etwas Interessantes verpasst.

Während der Entwicklung meines neuen Blogs bin ich natürlich über diverse Dinge gestolpert, vor allem im Bereich der Entwicklung mit Hugo. Dies bezieht sich sowohl auf das Tool selbst, wie auch auf die Templating-Engine. In diesem Beitrag möchte ich etwas auf beide Themen eingehen.
Beginnen möchte ich mit Hugos Command Line Interface (CLI) open_in_new, denn dies ist der Weg um Hugo zu steuern. Für die Entwicklung nutze ich meistens hugo server. Dadurch wird ein Server erstellt der schnell und flexibel, mit automatischem Reload bei Änderungen, eure Website lokal verfügbar macht. Solltet ihr umfangreichere Änderungen machen, die vielleicht nicht immer komplett erkannt werden, kann durch hugo server –disableFastRender der schnelle Rendering Modus deaktiviert werden. Dadurch dauert das erneute bauen etwas länger, Änderungen werden aber besser erkannt und umgesetzt. Solltet ihr einfach nur neuen Content hinzufügen und nicht am Template arbeiten, reicht übrigens meistens hugo server.
Um die Seite zu bauen reicht es hugo aufzurufen, dadurch wird im /public Ordner die gesamte Seite erstellt, sodass ihr sie direkt hochladen könnt. Bevor ihr dies tut kann man übrigens mittels hugo benchmark und hugo –templateMetrics herausfinden wie lange eure Seite und die einzelnen Komponenten zum Bauen brauchen. Dadurch findet man Bottlenecks und kann entsprechend optimieren. Ich konnte meine Build-Zeit dadurch vor kurzem von 140 Sekunden auf 40 drücken, wofür ich nur Änderungen in weniger als zehn Zeilen brauchte.

• Hugo Website open_in_new
• Hugo Documentation open_in_new

Das Aussehen einer Website definiert maßgeblich ob Benutzer selbige aktiv nutzen oder schnell wieder verschwinden. Der Inhalt ist natürlich auch wichtig, aber der erste Eindruck muss eben auch passen. Aus diesem Grund habe ich viel Arbeit in mein aktuelles Design oder im Hugo-Kontext Theme fließen lassen. Initial dachte ich darüber nach ein fertiges Theme zu nutzen und es vielleicht nur anzupassen. Da ich aber relativ spezielle Anforderungen habe, baute ich schlussendlich doch alles selbst. Inspiriert wurde ich aber vom Hugo AMP Design open_in_new, wie man vielleicht am schrägen Header erkennt.
Erstellt habe ich alles von Grund auf neu, unter Zuhilfenahme meiner alten HTML Struktur, kombiniert mit dem moderneren Ansatz aus dem oben genannten Theme.

• Hugo Website open_in_new
• Hugo Themes Website open_in_new

Hugo ist zum einen ein Getränk und zum anderen aber auch ein verdammt guter Open-Source Static-Site-Generator. Für mich wurde er vor allem interessant da es keine Abhängigkeiten gibt, welche über Paketmanager oder manuell geladen werden müssen. Denn ich möchte mich auf die Entwicklung konzentrieren und nicht darauf den Build-Prozess mal wieder zu reparieren.
Wie ich Hugo initial gefunden habe weiß ich gar nicht mehr, aber ich war von Anfang an durchaus interessiert, als ich vor knapp zwei Jahren das praktische Tool entdeckte. Doch durch den durchaus großen Aufwand einen kompletten HTML / CSS / PHP / MySQL Stack wegzuwerfen und von Grund auf in einer unbekannten Technik neu zu schreiben, dauerte es noch etwas bis zur eigentlichen Umsetzung.

• Hugo Website open_in_new
• Hugo Documentation open_in_new

Während der Sommer aktuell in die Vollen geht, wird es Zeit den August zu begrüßen. Dies bedeutet aber auch das der Juli nun vorüber ist und dementsprechend eine neue Top 10 Liste für den vergangenen Monat zu erstellen ist. Wie immer findet ihr diese im unteren Teil dieser News, absteigend sortiert nach Anzahl der Klicks. Die Liste ist dieses Mal eher Gaming-lastig, schaut also vor allem mal rein wenn euch dieser Themenbereich interessiert.

Heute möchte ich mit der Newssammlung zu meiner neuen Blogversion beginnen. Die Entwicklung hat lange gedauert, die Umstellung war umfangreich und zwischendurch kam noch die DSGVO zu Besuch. Alles in allem ergaben sich daraus zwar einige Schwierigkeiten, aber ich konnte auch extrem viel Neues lernen und zumindest mich macht das Ergebnis sehr zufrieden.
In der nun startenden Sammlung möchte ich unter anderem auf Hugo open_in_new eingehen, den Static-Site-Generator meiner Wahl. Dieser bildet die Basis für meinen nun statischen Blog. Das Tool funktioniert wirklich gut, hat extrem praktische Funktionen und wird vor allem sehr aktiv weiterentwickelt. Erst vor kurzem gab es ein Update, welches Bildoptimierung und das Verkleinern von CSS, JS usw. erlaubt. Auf diese Version muss ich noch upgraden und meine Build-Chain entsprechend anpassen.

Wie bereits angekündigt habe ich die letzten Änderungen an meinem neuen, selbst entwickelten, Kommentar-System über das Wochenende durchgeführt. Gestern folgten einige Tests und heute passte ich das User Interface noch etwas an.
Auch wenn das ganze aktuell noch eher eine Beta ist, möchte ich es von nun an aktiv im Blog nutzen. Aus diesem Grund ist es ab jetzt online und kann genutzt werden. Damit einhergehen wird das erneute stattfinden von Gewinnspielen und diverse weitere Dinge. In den nächsten Wochen folgen vermutlich noch kleinere UI Anpassungen und Optimierungen. Sobald all dies erledigt ist, ist mein Plan das kleine Kommentarsystem als Open-Source Software zur Verfügung zu stellen. Selbiges plane ich ebenfalls für meine Suchfunktion. Zu diesen Dingen gibt es dann zu gegebener Zeit mehr.

Die einzige Komponente in meinem neuen Blog, die nicht von mir selbst geschrieben wurde, ist das Kommentar-System. Es läuft aktuell auf Basis der wirklich guten Software Isso open_in_new, brachte für mich aber ein paar Einschränkungen. Zum einen ist für Isso die Installation von Python nötig, zum anderen sind Anpassungen an der Software selbst für mich nicht Adhoc möglich. Die Verwaltung und z.B. das Importieren und Exportieren von Inhalten gefiel mir ebenfalls nicht komplett. Aus diesen Gründen habe ich mich dazu entschieden auch das Kommentarsystem selbst zu schreiben und mit dieser Aufgabe bin ich nun so gut wie fertig. Für euch bedeutet dies, dass ab spätestens Anfang der nächsten Woche die neue Kommentarfunktion online ist und es somit auch wieder Gewinnspiele gibt. Denn um eine dreifache Migration zu vermeiden hielt ich selbige etwas zurück. Sobald das neue System online ist gehe ich dafür dann in die Vollen, denn ich habe noch einiges auf Lager für euch. Seid also gespannt und schaut spätestens Ende der Woche wieder rein.

Die erste Top 10 Liste, seitdem die neue Website aktiv ist, steht auf dem Plan und wartet wie gewohnt im unteren Teil der News auf euch. Sie wird von nun an durch das Auswerten der Server-Logs generiert, sodass keine zusätzlichen Tracking-Skripte oder Ladezeiten nötig sind und es trotzdem zu keinem Verlust der Funktionalität kommt. Die Liste ist wie gewohnt absteigend nach Anzahl der Aufrufe sortiert und bietet einen guten Überblick über interessante Beiträge im Blog. Werft also ruhig einen Blick in die bunte Mischung aus alten und neuen Beiträgen auf Boehrsi.de.