Dieser Beitrag wurde von einer KI übersetzt und nur oberflächlich durch Rückübersetzung überprüft.

Wieder den Grundstein... legen

Es ist eine Weile her, seit ich meine Website das letzte Mal aktualisiert habe. Ich habe mit verschiedenen Konfigurationen herumgespielt. Eine Zeit lang habe ich Hugo Academic verwendet, dann bin ich zu Bay gewechselt, wo ich eine Weile geblieben bin, ohne etwas zu ändern. Irgendwann habe ich mit Flask herumgespielt, mich aber nie ganz darauf eingelassen. Da ich mich dem Ende meiner Promotion nähere, dachte ich, es wäre ein guter Zeitpunkt, meine Website auf etwas Moderneres zu aktualisieren und tatsächlich einige echte Inhalte zu posten.

Dabei habe ich einige Kriterien festgelegt, die ich erfüllen wollte:

Erstens wollte ich etwas, das bereits gut aufgebaut ist und moderne Funktionen bietet. Eines der Hauptprobleme, die ich mit früheren Websites hatte, war, dass einige Notwendigkeiten wie reaktive Layouts, ein Hell-/Dunkelmodus und eine Suchleiste fehlten. Ich wollte auch eine ansprechende Ästhetik. Das ist überraschend schwer kostenlos zu finden – die meisten kostenlosen Vorlagen wirken veraltet, sind hackerisch oder nicht für eine persönliche Website gestaltet.

Zweitens wollte ich etwas, bei dem ich den Großteil des Backend-Codes verstehen kann. Ich kann mich durch JavaScript, HTML und CSS arbeiten, aber ich bin kein Experte in einem dieser Bereiche. Als interdisziplinärer Biologe verbringe ich die meiste Zeit beim Programmieren mit R und Python sowie Skripten und Kommandozeilen-Tools, obwohl ich mir auch Rust beigebracht habe, um eine niedrigere Programmiersprache zu beherrschen. Hugo ist in Go geschrieben und Jekyll in Ruby. Wenn man eine Sprache kennt, kann man andere lernen; dennoch möchte ich nicht, dass meine persönliche Website zu einem umfangreichen Programmierprojekt wird. Das Ziel ist es, eine einfache Website zu haben, auf der ich meine Ideen veröffentlichen und möglicherweise Ressourcen für andere bereitstellen kann. Indem ich eine Sprache verwende, die mir bereits vertraut ist, kann ich den Code schnell durchsehen, um jede benötigte Funktionalität hinzuzufügen oder Workarounds für Probleme zu finden, auf die ich stoße.

Drittens wollte ich etwas mit einer geringen Angriffsfläche. WordPress ist eine schöne, codearme Möglichkeit, eine Website zu erstellen, aber es ist berüchtigt anfällig für Angriffe. Wenn die Idee darin besteht, eine wartungsarme Website zu erstellen, möchte ich mir keine Sorgen um die Sicherheit des Servers machen, auf dem sie läuft. Diese Probleme bestehen auch, wenn ich meine eigene Website von Grund auf mit einem dynamischen Framework wie Flask zusammenstellen würde. Während es schön wäre, einen visuellen Editor und dynamische Inhalte zu haben, denke ich, dass ich viele der Vorteile durch die Verwendung eines soliden Markdown-Frameworks erzielen kann. Alle dynamischen Funktionen, die ich benötige, kann ich wahrscheinlich durch Spielen mit JavaScript hinzufügen. Wenn das nicht ausreicht, kann ich immer zu einer dynamischen Seite auf einer Subdomain umleiten.

Aufbau des Stacks

Zola - Ein funktionsreicher statischer Site-Generator

Zola erfüllt alle meine Kriterien. Es ist in Rust geschrieben, einer Sprache, die mir bereits vertraut ist. Es ist auch ein statischer Site-Generator, was bedeutet, dass es keine Datenbank oder einen Server benötigt, um zu laufen. Obwohl seine Verbreitung geringer zu sein scheint als bei Hugo, Jekyll oder anderen großen Lösungen, habe ich einige schöne Themen gefunden, die bereits an Zola angepasst sind. Ich habe hier Blow verwendet. Es ist super sauber, reaktionsschnell und kommt mit eingebauter Suche und Hell-/Dunkelmodus-Umschaltung.

Zola bietet auch einige Funktionen, die ich bei anderen statischen Site-Generatoren nicht gesehen habe. Neben der eingebauten Suche (die einige JavaScript-Unterstützung vom Thema erfordert) bietet es auch mehrsprachige Unterstützung. Ich freue mich darauf, dies zu nutzen, um ein größeres Publikum zu erreichen, als ich es könnte, wenn ich mich auf eine Sprache beschränken müsste. Ich mag auch den Kommandozeilen-Servermodus mit Live-Reloading. Es ist eine nette Möglichkeit zu sehen, wie Ihre Website aussieht und sich verändert, während Sie Ihre Inhalte ändern. Dies ermöglicht es mir, schnell zu iterieren und die Ergebnisse meiner Änderungen zu sehen, auch wenn die Website letztendlich statisch sein wird.

Ich fand, dass die Einrichtung von Zola sehr gut dokumentiert war. Wenn Sie mir folgen möchten, können Sie das hier finden. Ich benutze Arch Linux, also habe ich diese Schritte befolgt:

# Für Arch Linux
$ sudo pacman -S zola
$ cd ~/code/ # oder wohin auch immer Sie Ihre Website speichern möchten
$ zola init website_name
$ cd website_name
$ git init
$ git submodule add https://github.com/tchartron/blow.git themes/blow
$ zola serve

Neben dem Bloggen und dem Bewerben einiger meiner Tools möchte ich meine Website auch als bequemen URL-Kürzer verwenden, den ich kontrollieren kann. Dies ist ein Bereich, in dem Zola weniger eingebaute Unterstützung bietet. Dies ist eine wertvolle Funktion, da ich Inhalte außerhalb meines Blogs habe. Ich kann denselben Blog-Engine verwenden, um Leute zu einer Liste meiner Tools zu leiten. Ich konnte dies durch die Verwendung eines Shortcodes implementieren.

<div {% if class %}class="{{class}}" {% endif %}>
    <p><a href="http://{{loc | safe}}">Weiterleitung</a></p>
    <script>
        window.location.href = "http://{{loc | safe}}";
    </script>
</div>

Nachdem ich dies zu templates/shortcodes/redirect.html hinzugefügt habe, kann ich Weiterleitungen einrichten, die sogar mit meinen Analysen funktionieren.

Die EU zufriedenstellen mit Umami

Jedes Mal, wenn ich eine Website besuche, werde ich von einem Popup begrüßt, das den Inhalt der Seite verdeckt. Dieses Popup drängt mich, die Cookie-Richtlinie zu lesen und meine Präferenzen auszuwählen. Manchmal darf ich das nicht einmal tun, die Website zwingt mich einfach zu akzeptieren. Andere Male muss ich eine willkürlich verlängerte Periode abwarten, in der die Website 'Cookie-Partner konfiguriert' oder ähnliches. Anstatt meine Besucher dem auszusetzen, habe ich mich entschieden, einen DSGVO-konformen Analysedienst zu verwenden. Ich habe mich für Umami entschieden. Ich möchte weiterhin in der Lage sein, Seitenaufrufe zu verfolgen und zu sehen, welche Seiten Aufmerksamkeit erregen (insbesondere, wenn ich dies mit Weiterleitungen für einen Poster- oder Vortrags-QR-Code einrichte). Umami ermöglicht es mir, meine Analysen zu verfolgen, ohne mir Gedanken über Cookie-Banner machen zu müssen. Sie bieten auch eine kostenlose Stufe an, die für mich ausreichen sollte, es sei denn, ich werde viral oder ähnliches.

Plausible ist eine großartige Alternative zu Umami und sollte hier erwähnt werden. Der Grund, warum ich mich für Umami entschieden habe, ist, dass sie eine kostenlose Stufe als Teil ihres gehosteten Dienstes anbieten. Sie können eine Community-Version von Plausible kostenlos verwenden, aber dafür müssen Sie selbst hosten. Das wollte ich aus den oben genannten Gründen vermeiden.

Die Einrichtung von Umami war wirklich unkompliziert. Ich musste nur ein Skript-Tag in meinen HTML-Kopf hinzufügen und war startklar. Dies wurde während des Kontoerstellungsprozesses beschrieben. Ich bin mir nicht sicher, ob ich langfristig bei Umami bleiben werde, aber diese Einzeilen-Integration bedeutet, dass ich bei Bedarf problemlos zu einem anderen Analyseanbieter wechseln kann.

Kostenloses statisches Hosting mit Cloudflare Pages

Es gibt viele kostenlose Anbieter für statisches Hosting. Als ich anfing, einen statischen Site-Generator zu verwenden, habe ich Netlify verwendet. Das war ein großartiger Dienst, aber ich benutze bereits Cloudflare für meine persönliche Website, um Bots zu filtern, und bin glücklich damit. Zuletzt wurde meine Website direkt über Github Pages gehostet. Allerdings hatte Github in letzter Zeit einige Probleme mit privaten Repositories, die tatsächlich öffentlich zugänglich waren, und ich werde mein Github Pro-Abonnement wahrscheinlich nicht verlängern, nachdem meine Bildungs-Lizenz abgelaufen ist. Außerdem hat Github eine Begrenzung für die Menge an Daten, die Sie in einem Repository speichern können. Ich habe einige interessante Ideen für Blog-Beiträge, die möglicherweise mehr als ein paar hundert Kilobyte Rohdaten erfordern, und es wäre schön, meine Datenstruktur so zu verwalten, dass meine Website und die Daten

nah beieinander bleiben. Ich habe einen guten Plan zur Datensicherung (ein weiterer Blog-Post für einen anderen Tag), also bin ich damit einverstanden, meine Daten auf diese Weise zu verwalten.

Cloudflare Pages ist schön, weil Sie Ihre statische Website direkt auf deren Dienst hochladen können. Dadurch müssen Sie keinen komplizierten API-Release-Prozess verwenden oder sich mit Github CI auseinandersetzen. Ich denke, es könnte möglich sein, Weiterleitungen direkt in Cloudflare zu integrieren, was es mir ermöglichen würde, diese Funktion in Zola zu umgehen. Derzeit ist Cloudflare Pages kostenlos und scheint keine Beschränkungen für die Menge der Daten zu haben, die Sie speichern können. Es hat auch serverlose Funktionen integriert, sodass ich diese nutzen könnte, um mehr Funktionalität in meine statische Website einzubauen. Ich habe viel zu viele Ideen für persönliche Projekte, daher setzt mich die Anpassung an die Cloudflare-Plattform auch für zukünftige Projekte in eine gute Position.

Zuerst muss ich meine Website mit Zola erstellen. Dazu verwende ich den Befehl zola build. Dies erstellt einen Ordner namens public in meinem Projektverzeichnis. Vorerst erledige ich den Upload-Prozess manuell. Erstellen Sie einfach ein Cloudflare-Konto, falls Sie noch keines haben, und navigieren Sie zum Abschnitt Workers & Pages in Ihrem Dashboard. Klicken Sie auf den Reiter Pages, benennen Sie Ihr neues Projekt und laden Sie den Public-Ordner hoch. Wenn Sie keine Domain haben, erhalten Sie eine Subdomain. Schließlich werde ich den Upload-Prozess automatisieren. Die Dokumentation dazu finden Sie hier.

Es ist erwähnenswert, dass zum Zeitpunkt des Schreibens ein länger bestehender Fehler bei Cloudflare Pages für Firefox-Benutzer existiert. Beim Hochladen von Inhalten fügt Cloudflare aus unbekannten Gründen zusätzliche Metadaten hinzu, die die Art und Weise verändern, wie Cloudflare Seiten verarbeitet, sodass nur der rohe HTML-Code angezeigt wird. Es könnte eine Möglichkeit geben, dies automatisch zu beheben, aber dies kann durch das Hinzufügen einer zusätzlichen "_headers"-Datei im Stammverzeichnis deines "public/"-Ordners korrigiert werden.

/*
! X-Content-Type-Options

Zukunftspläne

Ich bin sicher, dass dies nicht das letzte Mal sein wird, dass ich ein vollständiges Redesign meiner Website durchführe. Hoffentlich fanden Sie meine Begründungen für meine Entscheidungen in gewisser Weise wertvoll. Ich denke, dass trotz der langen Existenz von statischen Site-Generatoren noch viel Raum für zukünftige Entwicklungen besteht. Ich bin daran interessiert, wie ich eine interaktivere Erfahrung durch eingebettetes JavaScript oder durch die Nutzung der serverlosen Funktionen aufbauen könnte. Ich habe keinen Zweifel, dass Sie mit einer statischen Website und serverlosen Funktionen ziemlich beeindruckende Anwendungen erstellen könnten.

In naher Zukunft möchte ich viele der Funktionen nutzen, die Zola bietet. Ich bin mit der Standard-Suche und Sprachunterstützung, die diese Kombination bietet, nicht sofort zufrieden. Ich werde wahrscheinlich damit beginnen, Inhalte in zusätzlichen Sprachen hinzuzufügen, und dann sehen, wie ich die Suche vollständig funktionsfähig machen kann. Von dort aus habe ich eine Reihe von Blog-Ideen, die für aktuelle und zukünftige Doktoranden im Bereich der synthetischen Biologie hilfreich sein könnten. Ich denke auch, dass diese Website als guter Ausgangspunkt für einige der Tools dienen wird, die ich entwickelt habe. Mehr als alles andere freue ich mich darauf, endlich ein kohärentes Setup zu haben und mit der Erstellung von Inhalten zu beginnen – etwas, das ich schon lange tun wollte.