Webseiten: Webgen
Webseiten kannst du in HTML (Hypertext Markup Language) einfach mit der Hand schreiben. Ein paar Dinge lassen sich aber automatisieren. Dabei hilft ein kleines Python-Programm, unser HTML-Generator. Es erzeugt (generiert) HTML-Seiten aus Inhalten, Vorlagen (Templates), Bildern und Stilvorlagen (Style Sheets in der Sprache CSS - Cascading Style Sheets).
Der Generator verwendet einige Bibliotheken, um seine Aufgaben zu erledigen:
- Einstellungen im YAML-Format: PyYAML
- Seitenvorlagen im Mustache-Format: Chevron
- Seiten mit Markdown ... und Frontmatter: Python Frontmatter
- Bilder verkleinern mit Pillow
Alternativen
Ehrlich gesagt, ich würde diesen Generator nicht für größere Projekte verwenden. Er tut allerdings alles, was wir für unsere Experimente mit Webseiten brauchen. Besonders Bilder verkleinern andere, ähnliche Programme nicht. Und auch keine Adventskalender erzeugen.
Hier sind ein paar Alternativen:
- Ivy von Darren Mulholland. Ich mag die Einfachheit und Erweiterbarkeit. Code. Kultur. Bonn und mein Weblog sind damit gebaut.
- Awesome Static Site Generators. Eine Riesenliste mit ähnlichen Werkzeugen.
Gemini
Wenn selbst eine Website zu aufwängig scheint: Vielleicht reicht auch eine Gemini-Seite. Das Format ist viel einfacher als HTML. Hier kannst du Gemini-Seiten veröffentlichen:
- https://gemlog.blue
- https://flounder.online
- https://sourcehut.org - Sourcehut Pages
Meine Gemini-Seiten liegen hier: gemini://schettler.net - ich bin etwas schreibfaul :) Zum Ansehen brauchst du einen Gemini-Browser. Ich mag Lagrange.
Installation
Um den Generator zu nutzen, kannst du ihn mit dem folgenden Befehl in dein Projekt einbinden:
git submodule add https://github.com/codekulturbonn/webgen.git
Die neueste Version des Generators holst du dann immer mit
git submodule update --recursive
Seitenstruktur
Der Generator muss wissen, wo die Teile deiner Seiten liegen. Dafür liest er als erstes die Datei config.yaml
mit Einstellungen.
Beispiel:
title: "Hühner & Katzen"
pages: ./quelle/seiten
images: ./quelle/bilder
assets: ./quelle/statisch
templates: ./templates
output: ./docs
image_sizes:
- 600
- 80
menu:
- title: Katzen
href: /
img: /images/katze-80.jpg
- title: Hühner
href: /seite2.html
img: /images/huhn-80.jpg
Die generierten Seiten liegen dann z.B. unter https://oschettler.github.io/katzen-huehner/
Hier wird die Seite "Hühner & Katzen" in einem Zielordner output
zusammengestellt.
Seiten liegen in einem Quellordner im Markdown-Format. Mithilfe von Seitenvorlagen werden daraus HTML-Seiten im Zielordner erzeugt.
Aus Bildern in einem Quellordner werden quadratische Bilder in verschiedenen Formategrößen im Zielordner erzeugt.
Dateien aus dem Ordner assets
werden ohne Änderung in den Zielordner kopiert.
Aufruf
Die folgenden aufrufe gehen davon aus, dass du den Generator über ein Git-Submodule im Unterordner webgen
installiert hast.
Vorbereiten:
python3 -mvenv env
source env/bin/activate
pip install -r webgen/requirements.txt
HTML erzeugen:
./webgen/generate.py
Zielordner leeren:
./webgen/generate.py clean
Lokal ansehen:
./webgen/generate.py serve
Bilder
- https://unsplash.com/photos/7GX5aICb5i4
- https://unsplash.com/photos/auijD19Byq8
Lizenz
MIT.