Mini-Anleitung, um Github zum Bearbeiten der Website zu nutzen.

Da die Website bislang sehr traditionell bearbeitet wurde -- ein einziger Ordner, direkt mit HTML, gibt es keine Weboberfläche zur Bearbeitung (wie etwa in einer Wiki wie dieser hier). Auch erfordert der Einsatz von PHP, dass man zur lokalen Bearbeitung, also offline auf dem eigenen Computer, einen Entwicklungsserver (traditionelles ​LAMP bzw. eben PHP/Apache) eingerichtet hat. Um zumindest die Bearbeitung etwas einfacher zu machen, wird der Code der technikum29-Website seit 2018 auf ​Github verwaltet. Das ist ein System ähnlich den ​technikum29 Labs/Development Projects (diese Website hier), bloß etwas moderner. Der angedachte Workflow ist bei Github, dass man das Coderepository auf seinem Computer klont bzw. auscheckt und Änderungen dann mittels einem Git-Client pusht bzw. eincheckt. Sie werden dann automatisch auf der technikum29-Website übernommen.

Allerdings erlaubt die Github-Website auch, direkt online Änderungen vorzunehmen, ohne auf seinem Computer Git installiert zu haben oder über tiefere Git-Kenntnisse zu verfügen. Das ist besonders gut geeignet für kleine Änderungen an bestehenden Dateien, es ist aber auch möglich, neue Dateien hinzuzufügen -- sowohl der Upload von Dateien als auch die Eingabe eines Textdokumentes (PHP und HTML sind Plain-Text-Files) ist möglich.

Diese Anleitung soll anhand Bildern exemplarisch zeigen, wie man einen neuen Blog-Eintrag einbindet.

1. Schritt: Repository aufsichen

Gebe in deinem Browser ​http://github.com/technikum29 ein. Folgende Seite erscheint:

Das erste gezeigte Projekt ist technikum29-www, die Website. Es gibt auch noch weitere Projekte.

2. Schritt: Einloggen

Gesetzt dem Fall, dass du einen Github-Account hast und er bereits dem Projekt zugeordnet ist, klickst du nun auf Sign in oben rechts.

Du kommst danach wieder auf die vorherige Seite.

3. Schritt: technikum29-www anklicken

Wähle nun das Projekt ​http://github.com/technikum29/technikum29-www aus. Du siehst nun die Übersicht an Ordnern direkt im Wurzelverzeichnis (Root) der Homepage.

Wichtig sind die Verzeichnisse blog für den Blog, de und en für die deutsche bzw. englischsprachige Website, sowie shared, wo alles in Richtung Bilder drin ist. Diese befinden sich vor allem unter /shared/photos.

Klicke nun auf blog.

4. Schritt: Im Blogverzeichnis umschauen

Im Verzeichnis ​https://github.com/technikum29/technikum29-www/tree/master/blog findest du alle Blogeinträge.

Die Dateien folgen dem Namensschema YYYY-MM-DD-Kurztitel.php, wobei YYYY-DD-MM das aktuelle Datum sein sollte und der Kurztitel ein oder zwei prägnante Wörter, die dann Teil der URL werden. Deswegen sollten sie keine Umlaute oder Leerzeichen verwenden. Auch Groß- und Kleinschreibung ist wichtig.

5. Schritt: Einen typischen Blogartikel anschauen

Klicke nun einen Artikel an, zB. ​https://github.com/technikum29/technikum29-www/blob/master/blog/2019-09-20-Ankuendigung-Kickoff.php

Hier siehst du, wie der Quellcode eines typischen Blogartikels aufgebaut ist. Vergleiche damit, was angezeigt wird, wenn du ​http://technikum29.de/blog/2019-09-20-Ankuendigung-Kickoff.php anwählst oder was in der generierten Übersicht auf ​http://technikum29.de/blog angezeigt wird.

Die ersten Linien beinhalten Metadaten, die als PHP-Variablen $variable = "Wert"; gesetzt werden. Diese Werte werden maschinell weiterverarbeitet. Alles, was danach kommt, ist der direkte Inhalt des Blogartikels und in der Markupsprache des Webs, HTML, geschrieben.

6. Schritt: Eintragen zum Anlegen einer neuen Datei öffnen

Markiere nun in einem bestehenden Blogeintrag die ersten 10 Code-Zeilen und kopiere sie in die Zwischenablage. Gehe dann zurück zur Ordnerübersicht und klicke oben rechts auf Create new file:

7. Schritt: Neuen Eintrag bearbeiten

Es öffnet sich nun ein Editorfenster, welches unausgefüllt leer ist. Im folgenden Bild wurde bereits Text geschrieben:

Hier muss ganz oben ein Dateiname angegeben werden, der dem oben erwähnten Muster YYYY-MM-DD-Kurze-Beschreibung.php folgen sollte. Dann kannst du in das Textfeld den Inhalt der Zwischenablage einfügen und die Variablenwerte sowie den Blogtext selber ändern.

8. Schritt: Eintrag abspeichern

Wenn du runterscrollst, siehst du eine Maske, wo du deine Änderungen kommentieren kannst. Zum Nachverfolgen der Änderungen an der Website ist es guter Stil, hier zumindest die erste Zeile auszufüllen und die Änderungen prägnant zusammenzufassen.

Klicke dann auf Commit new file. Du kannst die Checkbox Commit directly to the master branch aktiv lassen. Sobald du den Button geklickt hast, wird deine Änderung auf ​http://technikum29.de sichtbar.

9. Schritt: Photos hinzufügen

Wenn du ein Bild hinzufügen möchtest, kannst du das grundsätzlich per HTML einbinden, dazu schreibst du zum Beispiel

  <img src="https://upload.wikimedia.org/wikipedia/commons/6/6d/PDP-8.jpg" style="width: 400px">

Dies bindet das Bild ​https://upload.wikimedia.org/wikipedia/commons/6/6d/PDP-8.jpg ein. Möchtest du ein Bild aber auf der technikum29-Seite direkt hosten, dann bietet es sich an, es im Repository hochzuladen. Dazu navigierst du den Pfad ​https://github.com/technikum29/technikum29-www/tree/master/shared/photos an, wo du dich umschauen kannst. Blogbilder sollten etwa in das Unterverzeichnis blog gespeichert werden:

10. Schritt: Photos hochladen

Klicke auf den Button Upload files, dann öffnet sich folgendes relativ selber erklärendes Fenster:

Dateien werden mit ihrem Namen hochgeladen. Deswegen musst du sie vor dem Hochladen so benennen, wie sie später heißen sollen. Auch hier solltest du einen Namen ohne Leerzeichen (verwende - oder _) wählen, am Besten alles kleingeschrieben und auch die Dateiendung kleingeschrieben (.jpg statt .JPG).

Außerdem sorge bitte für Folgendes:

• Maximale Bildbreite: 920 Pixel (breitere Bilder werden auf der Website nur verkleinert).
• Maximale Dateigröße: 1-2MB für ein sehr großes Bild, unter 500kB für kleinere Bilder.

Komprimiere dein Bild daher bitte vorher auf deinem Computer mit einem Bildbearbeitungsprogramm. Auch sollten Photos nur im JPG-Format hochgeladen werden, nicht etwa als PNG-Dateien.

Da wir auch hier mit der Website noch recht traditionell sind und das Bildprocessing nicht irgendwo heimlich passiert, ist es wichtig, dass Dateien sinnvoll für das Web vorbereitet werden.

Die Einbindung eines Bildes mit dem Namen Foo-Bar.jpg im Ordner /shared/photos/blog passiert dann wie folgt:

  <img src="/shared/photos/blog/Foo-Bar.jpg">

HTML sowie die Stilauszeichnugssprache CSS erlauben vielfältige Möglichkeiten, die Bilddarstellung zu variieren. Solche Dinge lassen sich später immer noch korrigieren, daher kannst du auch erst einmal eine einfache Einbindung vornehmen.