Man sieht an diesen wenigen Beispielen, wie wertvoll eine „Mini-Wissensbank“ im Alltag sein kann. F\u00fcr Handb\u00fccher und Anleitungen im technischen Bereich ist das Prinzip einer strukturierten Online-Doku schon lange g\u00e4ngig. Aber die Tools zur Umsetzung haben oft eine gr\u00f6\u00dfere Lernkurve oder erfordern einen gewissen Pflegeaufwand f\u00fcr Aktualisierungen der Inhalte. Wir werden hier zur Umsetzung ein sehr einfaches Blog-System verwenden, das keine Datenbank ben\u00f6tigt und auf jedem g\u00fcnstigen Webspace l\u00e4uft. Doch zun\u00e4chst: Wie sieht das fertige System denn aus?<\/p>\n\n\n\n
Die Komponenten des Doku-Systems<\/h2>\n\n\n\nStartseite<\/h3>\n\n\n\n![\"\"](\"https:\/\/digital-cleaning.de\/wp-content\/uploads\/2025\/11\/htmly1-1024x669.jpg\")
<\/a><\/figure><\/div>\n\n\nDie Hauptkapitel der Dokumentation werden zusammen mit einer kurzen Beschreibung auf einer \u00dcbersichtsseite dargestellt. Die Titel sind Links, man kann also direkt in einen Bereich springen, f\u00fcr den man sich besonders interessiert. Den Hell-Dunkel-Modus kann der Leser mit einem Klick umstellen.<\/p>\n\n\n\n
Aufbau und Struktur<\/h3>\n\n\n\n
Hinter der \u00dcbersichtsseite werden die Informationen strukturiert dargestellt:<\/p>\n\n\n
\n![\"\"](\"https:\/\/digital-cleaning.de\/wp-content\/uploads\/2025\/11\/htmly4-1024x557.jpg\")
<\/a><\/figure><\/div>\n\n\nDie Sidebar (1)<\/strong> zeigt Kapitel und Unterkapitel. In der Mitte befindet sich der eigentliche Inhalt eines Abschnitts (2)<\/strong>. Ist dieser umfangreicher und weist verschiedene \u00dcberschriftsebenen auf, so erh\u00e4lt man in der rechten Spalte ein kleines Inhaltsverzeichnis mit anklickbaren Men\u00fcpunkten (3)<\/strong>.<\/p>\n\n\n\nNavigation<\/h3>\n\n\n\n
Die eigentliche Navigation ist in der Sidebar zu finden. Zus\u00e4tzlich gibt es im mittleren Bereich ein Breadcrumb-Men\u00fc oben (4)<\/strong> und „vorher\/nachher“-Verweise unten (5)<\/strong>.<\/p>\n\n\n\n![\"\"](\"https:\/\/digital-cleaning.de\/wp-content\/uploads\/2025\/11\/htmly5-1024x415.jpg\")
<\/a><\/figure><\/div>\n\n\n\u00d6ffnet man einen Hauptabschnitt, so werden die dazugeh\u00f6rigen Unterabschnitte samt Erl\u00e4uterungen angezeigt:<\/p>\n\n\n
\n![\"\"](\"https:\/\/digital-cleaning.de\/wp-content\/uploads\/2025\/11\/htmly6-1024x584.jpg\")
<\/a><\/figure><\/div>\n\n\nDamit erh\u00e4lt man auch bei einer gro\u00dfen Anzahl von Informationen eine saubere Ansicht. Es wird immer nur das eingeblendet, was gerade interessiert.<\/p>\n\n\n\n
Inhalte<\/h3>\n\n\n\n
Texte, Fotos, Tabellen, Links, Videos – all das kann recht bequem \u00fcber einen kleinen Editor eingef\u00fcgt werden. Wer Markdown beherrscht, kann auch diese Auszeichnungssprache verwenden. <\/p>\n\n\n
\n![\"\"](\"https:\/\/digital-cleaning.de\/wp-content\/uploads\/2025\/11\/htmly7.jpg\")
<\/a><\/figure><\/div>\n\n\nDas Ziel ist eine handbuch\u00e4hnliche Darstellung, wie sie f\u00fcr Dokumentationen \u00fcblich ist. Komplexe Formatierungen oder Designeinstellungen darf man daher nicht erwarten.<\/p>\n\n\n
\n![\"\"](\"https:\/\/digital-cleaning.de\/wp-content\/uploads\/2025\/11\/htmly8.jpg\")
<\/a><\/figure><\/div>\n\n\nDer Aufbau des Doku-Systems ist einfach gehalten, erf\u00fcllt aber in vielen F\u00e4llen seinen Zweck. Nun zur Frage, wie man das System installiert, mit Inhalten bef\u00fcllt und aktualisiert.<\/p>\n\n\n\n
Grundlage: Das Blog-System HTMLy<\/h2>\n\n\n\n
\u00dcber das „Brot-und-Butter-Blog-System“ HTMLy <\/a>habe ich vor einiger Zeit einen ausf\u00fchrlichen Artikel<\/a> geschrieben. Es gen\u00fcgt f\u00fcr unseren Zweck, wenn man wei\u00df, dass es mit nur einer einzigen Datei auf jedem g\u00fcnstigen Webserver innerhalb einer Minute installierbar<\/strong> ist. Das System ben\u00f6tigt keine Datenbank, wird gut gepflegt und ist ausgesprochen flott unterwegs. Und: Es bringt die Funktion f\u00fcr die Erstellung von Dokus bereits mit.<\/strong> Es muss also nichts zus\u00e4tzlich installiert werden. Man w\u00e4hlt lediglich das Theme „doks“ aus.<\/p>\n\n\n\n![\"\"](\"https:\/\/digital-cleaning.de\/wp-content\/uploads\/2025\/11\/htmly3.jpg\")
<\/a><\/figure><\/div>\n\n\nNun noch von der Blog-Ansicht auf die statische Ansicht umstellen. Die Dokumentation besteht ja nicht aus chronologischen Einzelbeitr\u00e4gen, die Inhalte werden vielmehr in Form „fixierter Webseiten“ abgelegt:<\/p>\n\n\n
\n![\"\"](\"https:\/\/digital-cleaning.de\/wp-content\/uploads\/2025\/11\/htmly9-1024x523.jpg\")
<\/a><\/figure><\/div>\n\n\nSo, damit sind die „Vorarbeiten“ bereits abgeschlossen.<\/p>\n\n\n\n
Anlegen der Struktur<\/h3>\n\n\n\n
Statische Seiten werden mit einem Klick auf den Men\u00fcpunkt in der Sidebar angelegt. Jede neue Seite bildet eine Hauptrubrik und kann beliebig viele Unterseiten aufnehmen. Es gibt keine tiefe Verschachtlung: eine Hauptebne plus eine Unterebene. Aber wie eingangs beschrieben: L\u00e4ngere Seiteninhalte k\u00f6nnen ein eigenes Inhaltsverzeichnis aufnehmen. <\/p>\n\n\n
\n![\"\"](\"https:\/\/digital-cleaning.de\/wp-content\/uploads\/2025\/11\/html10-1024x589.jpg\")
<\/a><\/figure><\/div>\n\n\nDie Darstellung der angelegten Seiten im Backend ist sehr \u00fcbersichtlich. F\u00fcr alle Funktionen gibt es verst\u00e4ndliche Buttons. Das hat HTMLy sogar besser gel\u00f6st als viele seiner „gro\u00dfen Br\u00fcder“. Ein Verschieben von Seiten und Unterseiten kann per Drag-and-drop durchgef\u00fchrt werden:<\/p>\n\n\n
\n![\"\"](\"https:\/\/digital-cleaning.de\/wp-content\/uploads\/2025\/11\/html11.jpg\")
<\/a><\/figure><\/div>\n\n\nAufnahme von Content<\/h3>\n\n\n\n
Das Einf\u00fcgen von Texten, Verweisen, Grafiken usw. geschieht \u00fcber einen kleinen Editor. Was alles m\u00f6glich ist, aber ich in meinem HTMLy-Artikel<\/a><\/strong> bereits ausf\u00fchrlich beschrieben. Alles ist sehr einfach gehalten – neue Inhalte k\u00f6nnen rasch und unkompliziert eingegeben werden.<\/p>\n\n\n
![\"\"](\"https:\/\/digital-cleaning.de\/wp-content\/uploads\/2025\/11\/htmly1.jpg\")
<\/a><\/figure><\/div>\n\n\nDie Hauptkapitel der Dokumentation werden zusammen mit einer kurzen Beschreibung auf einer \u00dcbersichtsseite dargestellt. Die Titel sind Links, man kann also direkt in einen Bereich springen, f\u00fcr den man sich besonders interessiert. Den Hell-Dunkel-Modus kann der Leser mit einem Klick umstellen.<\/p>\n\n\n\n
Aufbau und Struktur<\/h3>\n\n\n\n
Hinter der \u00dcbersichtsseite werden die Informationen strukturiert dargestellt:<\/p>\n\n\n
<\/a><\/figure><\/div>\n\n\nDie Sidebar (1)<\/strong> zeigt Kapitel und Unterkapitel. In der Mitte befindet sich der eigentliche Inhalt eines Abschnitts (2)<\/strong>. Ist dieser umfangreicher und weist verschiedene \u00dcberschriftsebenen auf, so erh\u00e4lt man in der rechten Spalte ein kleines Inhaltsverzeichnis mit anklickbaren Men\u00fcpunkten (3)<\/strong>.<\/p>\n\n\n\n Die eigentliche Navigation ist in der Sidebar zu finden. Zus\u00e4tzlich gibt es im mittleren Bereich ein Breadcrumb-Men\u00fc oben (4)<\/strong> und „vorher\/nachher“-Verweise unten (5)<\/strong>.<\/p>\n\n\n \u00d6ffnet man einen Hauptabschnitt, so werden die dazugeh\u00f6rigen Unterabschnitte samt Erl\u00e4uterungen angezeigt:<\/p>\n\n\n Damit erh\u00e4lt man auch bei einer gro\u00dfen Anzahl von Informationen eine saubere Ansicht. Es wird immer nur das eingeblendet, was gerade interessiert.<\/p>\n\n\n\n Texte, Fotos, Tabellen, Links, Videos – all das kann recht bequem \u00fcber einen kleinen Editor eingef\u00fcgt werden. Wer Markdown beherrscht, kann auch diese Auszeichnungssprache verwenden. <\/p>\n\n\n Das Ziel ist eine handbuch\u00e4hnliche Darstellung, wie sie f\u00fcr Dokumentationen \u00fcblich ist. Komplexe Formatierungen oder Designeinstellungen darf man daher nicht erwarten.<\/p>\n\n\n Der Aufbau des Doku-Systems ist einfach gehalten, erf\u00fcllt aber in vielen F\u00e4llen seinen Zweck. Nun zur Frage, wie man das System installiert, mit Inhalten bef\u00fcllt und aktualisiert.<\/p>\n\n\n\n \u00dcber das „Brot-und-Butter-Blog-System“ HTMLy <\/a>habe ich vor einiger Zeit einen ausf\u00fchrlichen Artikel<\/a> geschrieben. Es gen\u00fcgt f\u00fcr unseren Zweck, wenn man wei\u00df, dass es mit nur einer einzigen Datei auf jedem g\u00fcnstigen Webserver innerhalb einer Minute installierbar<\/strong> ist. Das System ben\u00f6tigt keine Datenbank, wird gut gepflegt und ist ausgesprochen flott unterwegs. Und: Es bringt die Funktion f\u00fcr die Erstellung von Dokus bereits mit.<\/strong> Es muss also nichts zus\u00e4tzlich installiert werden. Man w\u00e4hlt lediglich das Theme „doks“ aus.<\/p>\n\n\n Nun noch von der Blog-Ansicht auf die statische Ansicht umstellen. Die Dokumentation besteht ja nicht aus chronologischen Einzelbeitr\u00e4gen, die Inhalte werden vielmehr in Form „fixierter Webseiten“ abgelegt:<\/p>\n\n\n So, damit sind die „Vorarbeiten“ bereits abgeschlossen.<\/p>\n\n\n\n Statische Seiten werden mit einem Klick auf den Men\u00fcpunkt in der Sidebar angelegt. Jede neue Seite bildet eine Hauptrubrik und kann beliebig viele Unterseiten aufnehmen. Es gibt keine tiefe Verschachtlung: eine Hauptebne plus eine Unterebene. Aber wie eingangs beschrieben: L\u00e4ngere Seiteninhalte k\u00f6nnen ein eigenes Inhaltsverzeichnis aufnehmen. <\/p>\n\n\n Die Darstellung der angelegten Seiten im Backend ist sehr \u00fcbersichtlich. F\u00fcr alle Funktionen gibt es verst\u00e4ndliche Buttons. Das hat HTMLy sogar besser gel\u00f6st als viele seiner „gro\u00dfen Br\u00fcder“. Ein Verschieben von Seiten und Unterseiten kann per Drag-and-drop durchgef\u00fchrt werden:<\/p>\n\n\n Das Einf\u00fcgen von Texten, Verweisen, Grafiken usw. geschieht \u00fcber einen kleinen Editor. Was alles m\u00f6glich ist, aber ich in meinem HTMLy-Artikel<\/a><\/strong> bereits ausf\u00fchrlich beschrieben. Alles ist sehr einfach gehalten – neue Inhalte k\u00f6nnen rasch und unkompliziert eingegeben werden.<\/p>\n\n\nNavigation<\/h3>\n\n\n\n
<\/a><\/figure><\/div>\n\n\n<\/a><\/figure><\/div>\n\n\nInhalte<\/h3>\n\n\n\n
<\/a><\/figure><\/div>\n\n\n<\/a><\/figure><\/div>\n\n\nGrundlage: Das Blog-System HTMLy<\/h2>\n\n\n\n
<\/a><\/figure><\/div>\n\n\n<\/a><\/figure><\/div>\n\n\nAnlegen der Struktur<\/h3>\n\n\n\n
<\/a><\/figure><\/div>\n\n\n<\/a><\/figure><\/div>\n\n\nAufnahme von Content<\/h3>\n\n\n\n