Wie das Lernjournal entstanden ist

Bereits während der Ausbildung im BiCT mussten wir als Lernende ein «Workbook» führen. Eine Art Dokumentation der wichtigsten Dinge, die wir so lernten. Mit meinem Wechsel zur BEKB war mein Auftrag, dieses Journal weiterzuführen. Da ich mittlerweile sehr viel mit Webtechnologien arbeite und mir das auch Spass macht, kam schnell die Idee auf, das Lernjournal als eine Art Blog umzusetzen. Anfang dieses Jahres sah dieser dann so aus:

Umgesetzt war dieser Blog mit einem «Static Site Generator» namens Hugo. Doch irgendwie war ich mit dieser Version nicht wirklich zufrieden, also wurde es Zeit für ein kleines Redesign.

Meine Anforderungen

Um meine konkreten Anforderungen an die Version 2 meines Lernjournals zu verstehen, hier zuerst einmal die grössten Pain Points, die ich bei der vorherigen Variante festgestellt habe:

• Mühsame Content-Erstellung, da Texte nur in einem Markdown-File mit Metadaten erfasst werden konnten und ich somit alles manuell konfigurieren musste (z.B. Pfad zum Thumbnail). Ausserdem musste ich anschliessend jedes Mal die Änderungen zu GitHub commiten, um die neuen Inhalte zu publizieren.
• Hugo als Static Site Generator (SSG) fand ich nicht wirklich intuitiv, da das Template auf der Sprache Go basiert. Somit waren Änderungen am Theme nicht wirklich einfach vorzunehmen.
• Das Design des Blogs an sich hat mir auch nicht mehr wirklich gefallen. Mit den oben genannten Gründen hatte ich aber nun eine Ausrede, diesen subjektiven Punkt auch noch gleich anzupassen 😉

Damit war klar, was ich für Anforderungen an das Lernjournal 2.0 stellen musste:

• Ein CMS im Hintergrund, damit das Erfassen von Inhalten einfacher wird.
• Einen SSG, mit dem ich besser zurechtkomme als mit Hugo.
• Überarbeitetes, etwas spannenderes Design.
• Eine separate «Bookmarks»-Section, in der ich nützliche Links abspeichern kann (beispielsweise Tools, Ressourcen, etc.).

Mit diesen Gedanken machte ich mich also an die Umsetzung.

«The Process»

Nach einer ersten einfachen Skizze benutzte ich Figma, um die Website zu gestalten. Hier mein «work in progress»-File (falls es jemanden interessiert, wie das ausgesehen hat). Ich habe da zwar nicht all zu genau gearbeitet und mich später auch nicht 100% daran gehalten, doch um eine erste Idee vom Design der Website zu haben, reicht es.

Als nächstes begann eigentlich auch schon der technischere Teil des Prozesses. Natürlich musste ich hier zuerst einen geeigneten SSG finden, welchen ich ohne grosse Einarbeitungszeit verwenden kann. Meine Wahl fiel dann recht schnell auf Gridsome, welcher auf dem Javascript-Framework Vue.js basiert. Mit diesem hatte ich auch schon gearbeitet, von dem her eignete sich diese Lösung ziemlich gut. Der gesamte Erstellungsprozess verlief anschliessend dementsprechend gut, da ich alle Tools schon mehr oder weniger kannte.

Die einzig grössere Neuerung ist das CMS, mit dem ich den Content jetzt verwalten kann. Hier habe ich mich für Netlify CMS entschieden. Der Vorteil an diesem CMS ist, dass es relativ einfach zu konfigurieren ist, man aber trotzdem einige Möglichkeiten hat:

backend:
  name: github
  repo: ***

media_folder: "static/uploads"
public_folder: "/uploads"

publish_mode: editorial_workflow

collections:
  - name: "posts"
    label: "Posts"
    folder: "blog"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Excerpt", name: "excerpt", widget: "text"}
      - {label: "Publish Date", name: "date", widget: "date"}
      - {label: "Image", name: "imageUrl", widget: "image"}
      - {label: "Body", name: "body", widget: "markdown"}
  - name: "links"
    label: "Links"
    folder: "bookmarks"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Description", name: "description", widget: "string"}
      - {label: "Category", name: "category", widget: "select", options: ["Blogs & Inspiration", "Design Tools", "Dev Tools", "Lernen", "Ressourcen", "Sonstiges"]}
      - {label: "Image", name: "imageUrl", widget: "image"}
      - {label: "Link", name: "link", widget: "string"}

Wie das Ganze funktioniert

Um neue Inhalte zu erfassen, benutze ich nun wie bereits erwähnt Netlify CMS. Dort kann ich entweder ein neues Lesezeichen erstellen oder einen Blogbeitrag anlegen. Letzteres sieht so aus:

Sobald ich dann einen Eintrag publiziere, wird im Hintergrund ein neues Markdown-File zu GitHub commitet («hinzugefügt»). Jedigliche Änderungen am Source Code der Website bzw. des Repositories, lösen einen Rebuild der Website auf Netlify aus. Netlify ist ein (meiner Meinung nach) idealer Hosting-Provider für statische Websiten wie meine. Dort wird dann auch Gridsome, der Static Site Generator hinter meiner Website, ausgeführt. Gridsome nimmt das fertige Markdown-File und stellt es schlussendlich in meinem vorgefertigten Layout dar. Das Endresultat sieht dann so aus, wie dieser Post 👀

Wie geht's weiter?

Momentan bin ich mit meinem Lernjournal ziemlich zufrieden, sowohl visuell wie auch mit der Funktionsweise. Natürlich gäbe es immer Verbesserungspotenzial, wie beispielsweise, dass man die Bilder eines Posts in einer Lightbox öffnen könnte. Gridsome befindet sich aber momentan noch in einer Beta und verändert sich dementsprechend rasch. Deswegen kann es gut sein, dass beispielsweise diese Funktion bis zum 1.0.0 Release nativ verfügbar ist. Bis dahin liegt mein Fokus aber mehr auf dem Erstellen von Inhalten, da ich dort zugegebenermassen noch etwas hinterherhinke... 😁