kollegenrunde-posts

Dieses Repository beinhaltet den Content der Website sowie zum Editieren benötigte Helferlein. Im folgenden wird beschrieben, wie man Posts bearbeitet.

Wie man dagegen die Website entwickelt, wird im Repository kollegen-hugo beschrieben.

Generell werden ein Post editiert, in man lokal Hugo lokal ausführt und die Änderung testet und die Änderung commitet. Mit dem Push ins Kollegen-Gitea wird die Website dann dort neu generiert.

Für kleine und rein textuelle Änderungen können auch direkt im Gitea-Repository durchgeführt werden, ohne lokale Installation. Da diese Änderung direkt produktiv wird, sollte man hierbei wissen, was man tut.

Lokales Setup

Hier wird nun beschrieben, wie man sich Hugo lokal einrichtet und lokale Post-Bearbeitung testet.

Vorraussetzungen:

• git-Client ist installiert
• Python3 ist installiert

Das Setup ist das gleiche, wie bei der Web-Entwicklung. Es wird ein leeres Verzeichnis benötigt, in das die beiden Repositories und das Hugo-Release installiert werden. Hier nochmal in Kürze (am Beispiel Linux):

$ mkdir ~/kred
$ cd ~/kred
$ wget https://github.com/gohugoio/hugo/releases/download/v0.76.4/hugo_0.76.4_Linux-64bit.tar.gz
$ git clone https://kollegen.uber.space/gitea/kollegenrunde/kollegen-hugo.git
$ git clone https://kollegen.uber.space/gitea/kollegenrunde/kollegen-posts.git

Für Python wird nun noch die virtual Environment in einem neuen Unterverzeichnis installiert:

$ python3 -m venv .venv # Virtuelle Umgebung anlegen
$ source .venv/bin/activate # aufrufen
$ pip install -r requirements.txt # Benötigte Paket installieren
$ deactivate # venv verlassen

Hinweis: Die venv wird nicht in git eingeheckt, deshalb muss sie mit jeder Neuinstallation eingerichtet werden.

Damit ist die Installation abgeschlossen. Es werden nun einzelne Schritte der redaktionellen Arbeit erläutert.

Website lokal testen

Hugo kommt mit einem eigenen Webserver, so dass man lokale seine Änderungen testen kann. Um ihn auszuführen, muss man im Verzeichnis kollegen-hugo sein.

$ cd ~/kred/kollegen-hugo
$ ../hugo/hugo server -D
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/kollegenrunde/ (bind address 127.0.0.1)

Hat man alles richtig gemacht, kann man die Website nun im Browser sehen.

Post-Editierung

Das Python-Skript vereinfacht Erstellung und Bearbeitung eines Posts. Im Verzeichnis Redaktion wird damit ein Eingangsverzeichnis für einen Post angelegt, worin Originalbilder hineinkopiert werden können. Das Script verkleinert dann die Bilder (jpg) und kopiert sie in das eigentliche Post-Verzeichnis unter content. Ausserdem sorgt es für den Abgleich der Bilddateinamen mit den Einträgen in der Post-Datei index.md. Einer Post hat immer das Datum als Namen, z.B. 20160216.

Anlegen neuen Posts (auch Bearbeiten eines existierenden Posts)

$ cd ~/kred/kollegen-posts/redaktion
$ .venv/bin/python red.py init 20160216
Existing in path found. Put your original images here: 'in/posts/20160216'
Post' directory created: '../content/posts/20160216'
New post file created: '../content/posts/20160216/index.md'
Image directory created: 'images'
The next step would be to add your images into the 'in/posts/20160216' directory. After that you can update the post directory '../content/posts/20160216' and the post file 'index.md': call 'update'.

Damit werden die Verzeichnis ~/kred/kollegen-posts/redaktion/in/posts/20160216 und ~/kred/kollegen-posts/content/posts/20160216 angelegt (falls nicht vorhanden) und die Datei index.md initialisiert. Der Post ist nun initialisiert.

Nun können eigenen Bilder in Originalgröße abgelegt werden, z. B.:

$ cp meine/bilder/*.jpg ~/kred/kollegen-posts/redaktion/in/posts/20160216/

Mit 'update' werden nun die Bilder konvertiert und im Zielverzeichnis abgelegt und in der Post-Datei index.md werden die Bild-Variablen initialisiert.

$ .venv/bin/python red.py update
Done.

Nun kann der Blogbeitrag in der Datei index.md editiert werden.

Post-Datei index.md bearbeiten

Die so erzeugte bzw. geänderte Datei besteht aus zwei Bereichen. Zuerst kommen die mit Initialwerten gesetzten Parameter und dann folgt, nach dem '---' der Text. Dieser wird mit in Zusammenfassung und eigentlichem Inhalt getrennt. Bilder können optional betitelt werden. Die Reihenfolge der Bilder ist erfolgt nach Dateiname und kann nicht geändert werden. Ggf. ist das Bild für die Post-Liste (featured image) und für den Blog-Header (header image) zu ändern - per default wird das erste Bild genommen.

Der lokale Server erkennt Änderungen und aktualisiert die Webseite automtatisch. Bei Problemen kann man die Generierung auch manuelle anstarten:

$ cd ~/kred/kollegen-posts
$ ../hugo/hugo
Start building sites …
...
Total in 793 ms

Oder auch den Server neu starten.

Bearbeitung abschließen

Ist die Post-Bearbeitung fertig, kann man das Eingangsverzeichnis entfernt werden (optional).

$ .venv/bin/python red.py cleanup
Removed 'in/posts/20160216'
20160216 closed.

Neuen Post veröffentlichen

Jetzt werden die Änderungen im content-Verzeichnis eingecheckt und hochgeladen. Mit dem Push werden die Generierung auf dem Server angestartet.

$ git status
...
Unversionierte Dateien:
(benutzen Sie "git add ...", um die Änderungen zum Commit vorzumerken)
../content/posts/20160216/
...
$ git add ../content/posts/20160216/ # Alternative: git add ../.
$ git commit -m 'Neuer Post 20160417'
... $ git push ... remote: Total in 1698 ms
remote: Fertig, Blog wurde erzeugt!
To https://kollegen.uber.space/gitea/kollegenrunde/kollegen-posts.git
0844f83..2546997 master -> master

Glückwunsch!

Kleine Änderungen direkt in Gitea

Die Post-Bearbeitung kann natürlich auch direkt im Gitea-Repository durchgeführt werden. Allerdings entfällt dann die Möglichkeit der Bild-Konvertierung und man kann Änderungen nicht testen. Deshalb empfiehlt sich das direkte Bearbeiten einer index.md nur für kleine textuelle Änderungen. Hierbei erfolgt die Generierung mit dem Commit. Unser Beispiel-Post ist hier zu finden: (https://kollegen.uber.space/gitea/kollegenrunde/kollegen-posts/src/branch/master/content/posts/20160216/index.md)