Lernblog selber installieren

Mit dieser Anleitung kannst du deinen eigenen Lernblog einrichten.

1. GitHub Account erstellen

Wir verwenden GitHub, um den Website-Code und den zukünftigen Inhalt des Blogs zu speichern.

Gehe zu GitHub und erstelle dort einen Account:

GitHub Account erstellen. Als Benutzername z.B. den Vor- und Nachnamen verwenden.
GitHub Account erstellen. Als Benutzername z.B. den Vor- und Nachnamen verwenden.

Als nächstes wirst du deine Mailadresse bestätigen müssen.

2. Lernblog-Vorlage kopieren

Unter github.com/marcojakob/lernblog findest du die aktuelle Version der Lernblog-Vorlage. Diese kannst du jetzt für dich kopieren, indem du auf Use this template klickst.

Lernblog-Vorlage kopieren. Gerne noch auf den Stern ⭐ klicken ;-).
Lernblog-Vorlage kopieren. Gerne noch auf den Stern ⭐ klicken ;-).

Als nächstes musst du die Kopie benennen, z.B. lernblog. Wichtig ist, dass du deine Kopie auf privat stellst. Denn auf GitHub werden alle Änderungen aufgezeichnet, die du in deinem Blog machst und das muss nicht öffentlich sein. Nur das, was du dann auch veröffentlichen willst, soll über das Hosting (siehe unten) verfügbar sein.

Name wählen und auf privat stellen.
Name wählen und auf privat stellen.

Nun hast du eine eigene Kopie in deinem GitHub Account. Du wirst zukünftig kaum mehr mit GitHub selbst zu tun haben, ausser du willst mal etwas Nerd-mässig dort tiefer graben. Grundsätzlich werden aber die Blogeinträge und Bilder für dich automatisch dort unter content abgelegt.

Tipp: Falls du später mal ein Backup machen willst, so kannst du dich bei GitHub anmelden und mit dem Knopf Clone or download deinen ganzen Blog herunterladen.

Als Backup für später: Bei GitHub kannst du jederzeit deinen ganzen Blog herunterladen als Zip.
Als Backup für später: Bei GitHub kannst du jederzeit deinen ganzen Blog herunterladen als Zip.

3. Hosting mit Netlify

Damit der Blog im Internet aufgerufen werden kann, muss er in HTML umgewandelt und auf einem Server gehostet werden. Netlify bietet uns beides.

Gehe also auf Netlify.com und melde dich an.

Unter www.netlify.com auf Login gehen.
Unter www.netlify.com auf Login gehen.

Wir brauchen kein separates Login, sondern können das von GitHub auch bei Netlify verwenden.

Bei Netlify mit dem GitHub Login anmelden.
Bei Netlify mit dem GitHub Login anmelden.

Dann musst du allenfalls den Zugriff bestätigen.

Als nächstes sagen wir Netlify, dass es sich unseren Blog-Code von GitHub holen und ihn verarbeiten soll.

Nun wieder GitHub wählen.

Nach einem Bestätigungs-Knopf solltest du jetzt deinen Lernblog auswählen können.

Deine Lernblog-Vorlage auswählen.
Deine Lernblog-Vorlage auswählen.

Die angezeigten Einstellungen kannst du ignorieren und auf den Deploy site Knopf klicken.

Damit nimmt jetzt GitHub den Blog-Code von GitHub, erstellt das HTML und veröffentlicht es.

4. Namen wählen

Die Website wird standardmässig unter einer zufälligen und ziemlich langen Adresse angegeben, wie diese hier:

Um diese Adresse zu kürzen, können wir unter Settings mit dem Knopf Change site name den Namen ändern.

Unter Settings den Namen ändern.
Unter Settings den Namen ändern.

Nun sollte die Website unter dem einfacheren Namen aufrufbar sein. Der Blog hat aber immer noch den Zusatz .netlify.com dabei. Dies ist zum Testen ganz ok, aber sollte ersetzt werden mit unserem ganz eigenen Domainnamen.

Für einen eigenen Domainnamen müssen wir eine Domain kaufen (ca. CHF 9 pro Jahr) bei einem Domainanbieter und dann die Domain mit Netlify verknüpfen. Diese Schritte unterscheiden sich je nach dem, wo du die Domain kaufst. Entweder fragst du einen Nerd deines Vertrauens oder du schaust wieder mal hier vorbei, weil ich plane, auch dazu eine Anleitung zu schreiben.

5. Admin-Login einrichten

Um den Blog anzupassen und um neue Blogeinträge zu erstellen, gibt es eine Admin-Oberfläche. Damit wir uns bei dieser einloggen können, müssen wir in Netlify folgende Einstellungen vornehmen.

Unter Identity auf Enable Identity klicken.

Identity für die Admin-Anmeldung aktivieren.
Identity für die Admin-Anmeldung aktivieren.

Jetzt musst du dich selbst einladen mit dem Knopf Invite users. Füge dort deine Mailadresse hinzu, welche du bei GitHub verwendet hast.

Dich selbst als Benutzer hinzufügen. Wichtig: die gleiche Mailadresse wie bei GitHub verwenden.
Dich selbst als Benutzer hinzufügen. Wichtig: die gleiche Mailadresse wie bei GitHub verwenden.

Als nächstes müssen wir auf der bei Identity unter Settings and usage drei Einstellungen vornehmen.

Etwas runter scrollen und die Registration auf Invite only stellen.

Gleich darunter bei External providers GitHub hinzufügen.

Mit dem grünen Knopf bestätigen.

Als letzter Schritt müssen wir noch ganz nach unten scrollen und den Git Gateway aktivieren.

Wieder mit dem grünen Knopf bestätigen.

6. Lernblog editieren mit dem Netlify CMS

Nun sollte der Lernblog bereit und unter der gewählten Adresse abrufbar sein. Die Admin-Oberfläche erreichst du, indem du bei deinem Blog /admin anhängst.

Zum Beispiel https://marcojakob.netlify.com/admin

Dort erscheint nun die Admin-Oberfläche mit dem Netlify CMS.

Bei Netlify CMS anmelden.
Bei Netlify CMS anmelden.

Wichtig: Immer mit GitHub anmelden (Login-Passwort oben funktioniert nicht mit unseren Einstellungen).

Immer mit GitHub anmelden.
Immer mit GitHub anmelden.

Wenn alles funktioniert, sollte jetzt das Netlify CMS erscheinen.

Oberfläche des Netlify CMS.
Oberfläche des Netlify CMS.

🎉 Gratuliere, wenn du es bis hier geschafft hast! Zugegeben, das Einrichten ist etwas aufwändig. Aber ab jetzt wirst du nur noch auf der Oberfläche unter /admin deine Blogeinträge erfassen können.