Lernblog installieren

Mit dieser Anleitung kannst du deinen eigenen Lernblog einrichten. Wir brauchen zwei Komponenten:

  1. GitHub, um den Website-Code und den zukünftigen Inhalt des Blogs zu speichern.
  2. Netlify, um die Website auf einem Server zu hosten. So kann der Blog im Internet aufgerufen werden.

Nun legen wir los mit der Installation.

1. GitHub Account erstellen

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.

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.

Backup-Tipp: Falls du später mal ein Backup machen willst, so kannst du dich bei GitHub anmelden und mit dem Knopf Code->Download Zip deinen ganzen Blog herunterladen.

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 den folgenden Knopf Deploy to Netlify klickst:

Deploy to Netlify

Netlify richtet fast alles automatisch ein. Wir müssen einfach noch ein paar Dinge bestätigen.

Schritt 1: Mit GitHub verbinden
Schritt 1: Mit GitHub verbinden
Schritt 2: Speichern und Veröffentlichen
Schritt 2: Speichern und Veröffentlichen

Nun wurde die Vorlage auf dein GitHub kopiert und alles bei Netlify eingerichtet für das Hosting.

3. Admin-Passwort erstellen

Damit wir später unsere Blogeinträge verwalten können, brauchen wir ein Admin-Passwort.

Du solltest von Netlify eine E-Mail erhalten haben. Klicke auf Accept the invite.

Admin-Passwort erstellen.
Admin-Passwort erstellen.

Dann sollte sich ein Passwort-Feld öffnen, wo du ein Admin-Passwort für deinen Blog wählen kannst.

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. Du kannst irgendetwas auswählen.

Unter Settings den Namen ändern.
Unter Settings den Namen ändern.
Eigenen Namen wählen.
Eigenen Namen wählen.

Nun sollte die Website unter dem einfacheren Namen aufrufbar sein. Der Blog hat aber immer noch den Zusatz .netlify.app dabei. Dies ist zum Testen ganz ok, aber sollte später 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. Hier ist eine Anleitung, wie du eine eigene Domain einrichten kannst. Wahrscheinlich brauchst du dazu einen Nerd deines Vertrauens.

5. 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://marcoblog.netlify.app/admin

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

Bei Netlify CMS anmelden.
Bei Netlify CMS anmelden.
Mit der E-Mail-Adresse und dem gewählten Admin-Passwort anmelden.
Mit der E-Mail-Adresse und dem gewählten Admin-Passwort 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 kannst du bequem auf der Admin-Oberfläche unter /admin deine Blogeinträge erfassen.

Übrigens: Wie du deinen ganz eigenen Domainnamen (ohne netlify.app) einrichten kannst, erfährst du in diesem Blogartikel.