7.2 KiB
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-Release1 installiert werden. Hier nochmal in Kürze (am Beispiel Linux):
$ mkdir ~/kred
$ cd ~/kred
$ wget https://github.com/gohugoio/hugo/releases/download/v0.117.0/hugo_0.117.0_Linux-64bit.tar.gz
$ mkdir hugo
$ tar -xvf hugo_0.76.4_Linux-64bit.tar.gz --directory hugo
$ rm hugo_0.76.4_Linux-64bit.tar.gz
$ git clone --recurse-submodules 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. Unter Linux geht das so:
$ cd ~/kred/kollegen-posts/redaktion/
$ python3 -m venv .venv # Virtuelle Umgebung anlegen
$ source .venv/bin/activate # aufrufen
(.venv) $ 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.
Das Skript setzt das Unterverzeichnis in/posts voraus. Falls nicht vorhanden:
$ mkdir -p ~/kred/kollegen-posts/redaktion/in/posts
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/
Unter Linux kann man diese beiden Schritte auch mit den Skript load.sh ausführen:
$ ./load.sh meine/bilder
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 ~/kred/kollegen-posts/content/posts/20160216/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.
$ pwd
$ ~/kred/kollegen-posts
$ git status
...
Unversionierte Dateien:
(benutzen Sie "git add <Datei>...", 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.
Troubleshooting
Webcontent neu aufbauen
Ausversehen wurde der Webcontent gelöscht (/home/kollegen/html/). Wie kann der Content wieder erstellt werden?
--> Auf dem Server ist das generate-Skript auszuführen:
host$ /home/kollegen/kollegengen/generate.sh