Scraping Credly mit GitHub Actions

Hast du schon einmal von der Zertifizierungsplattform Credly gehört?

Es ist eine Website die ein sehr einfaches Problem löst: Erfassen und Anzeigen von Zertifizierungen auf zuverlässige und vertrauenswürdige Weise.

Was bedeutet das? Es bedeutet einfach, dass Credly als zentrales Bindeglied zwischen allen Organisationen fungiert, die Zertifizierungen ausstellen (wie Microsoft, GitHub und viele mehr). Damit kann man sehr einfach z.B. meine Person bei Credly besuchen und alle meine Zertifizierungen anschauen. Darüber hinaus kann man die Zertifizierungen noch verifizieren und - jetzt kommt das spannende - all diese Informationen sind in einem definierten JSON-Format verfügbar.

💡 Idee zur Automatisierung

Cool! Aber warum erzähle ich das?

Einfach weil ich alle meine Zertifikate auf diesem Blog auflisten und/oder zeigen wollte, ohne sie ständig manuell synchronisieren zu müssen (weil … naja … ich bin ein fauler Entwickler 🤣).

⚙️ Architektur

Mit der Idee an der Hand schauen wir uns erst einmal die aktuelle Systemlandschaft von diesem Blog an:

Wenn wir uns also das obige Diagramm ansehen, dann erkennen wir drei lose gekoppelte Aufgaben / Workflows / Silos:

• (1) Zertifizierungen
  • Ein Benutzer (wie ich) erwirbt Zertifizierungen bei einer Organisation (wie Microsoft)
  • Einmal erworben, wird die Zertifizierung an Credly gepusht
• (2) Website
  • Dieser Blog wird mit Hugo erstellt und auf GitHub gehostet
  • Jeder Push auf den main Branch löst eine GitHub-Action aus, die wiederum hugo build ausführt und die Build-Ergebnisse in einem dedizierten gh-pages Branch veröffentlicht
  • GitHub Pages erkennt jede Änderung innerhalb von gh-pages und veröffentlicht sie in der “GitHub Cloud”
• (3) Endkunden
  • Mein DNS (gehostet bei Gandi übrigens) zeigt auf die “GitHub Cloud”
  • Benutzer (genauer: ihr Browser) bezieht die endgültige Website aus der “GitHub Cloud”

Das ist alles in Ordnung und ermöglicht es uns auch, ziemlich einfach in alle Dimensionen zu erweitern. Meine Idee ist einen neuen, lose gekoppelten, GitHub Actions-Workflow einzuführen, der regelmäßig alle meine Zertifikate von Credly abruft und die Informationen in Git speichert. Damit würde jede Änderung auf Credly in unserem Git-Repository widergespiegelt werden, was wiederum den existierenden hugo build-Workflow startet. Ziemlich nett, nicht wahr?

Das endgültige gewünschte Zustandsdiagramm würde also so ​​aussehen:

Wie man oben sehen kann, haben wir nichts an den bestehenden Workflows / Interaktionen geändert. Wir haben einfach einen ganz neuen Workflow hinzugefügt, der die Credly-Dateien in unser eigenes Repository importiert. Und jede Änderung an unserem Repository löst konstruktionsbedingt ein hugo build der Website aus. :sign_of_the_horns:

🚀 Implementierung

Aber wie implementieren wir das Ganze? Meine Lösung besteht aus zwei Teilen die, meiner Meinung nach, gut zusammenspielen.

1️⃣ Daten einsammeln mit Credly2Hugo

Diese neue GitHub Action sammelt alle Informationen von Credly. Sie ist sehr einfach zu verwenden, da die meisten Parameter optional sind und daher reicht meist:

1# Add this step in one of your GitHub Workflow files
2- uses: michaelcontento/credly2hugo-action@v1
3  with:
4    # The user of whom we want to grab the infos
5    name: michael-contento

Das ganze erzeugt nun folgende Dateien:

• data/CredlyBadges.json, eine Hugo optimierte metadata JSON Datei
• data/CredlyBadgesRaw.json, enthält das komplette metadata JSON von Credly
• assets/images/CredlyBadges/*, hier werden die Bilder aller Zertifikate gespeichert

Damit haben wir alle Informationen von Credly erfolgreich in unser eigenes Git-Repository importiert und können sie nach Belieben verwenden.

Schau einfach in die Workflow-Datei von diesem Blog für ein komplettes Beispiel

Wenn du wissen willst wie Credly2Hugo funktioniert, dann schau einfach den Code auf GitHub. Es ist nichts besonderes, nur etwas curl für den Datenabruf und jq, um die Hugo-optimierte Metadaten-JSON-Datei zu erstellen.

2️⃣ In Hugo verwenden

Jetzt haben wir also alle Informationen in unserem Repository gespeichert - nice! Aber wie greifen wir auf sie zu? Dank Hugo Data Templates ist das so einfach wie:

 1// Iterate over our hugo optimized metadata file
 2{{ range first 3 .Site.Data.CredlyBadges }}
 3    // give the current record a name for readability in the following <img>
 4    {{ $credly := . }}
 5    // let Hugo grab the image and resize it
 6    {{ $image := (resources.Get .LocalImagePath).Resize "150x150" }}
 7    // and simply render our bage as plain html image
 8    <img
 9        src="{{ $image.RelPermalink }}"
10        width="{{ $image.Width }}"
11        height="{{ $image.Height }}"
12        alt="{{ $credly.Description }}">
13{{ end }}

Was dann so aussieht:

🏁 Fazit

Wir haben unsere Abzeichen dynamisch auf unserer Seite gerendert, ohne sie jedes Mal manuell importieren zu müssen sobald wir ein neues Zertifikat bekommen und ohne dynamisches clientseitiges Javascript verwenden zu müssen.

Alles ist reines Hugo Server Side Rendering 😎

Und alles ist in Code als GitHub Actions automatisiert, alles wird in Git gespeichert und als ganz kleines Goodie bekommen wir auch noch eine “Zertifikatshistory” gratis dazu 🤣