History

Posted 2026-09-21 · Updated 2026-10-04

A brief history of this site and the notable changes during that time to its (infra)structure.

In chronological order

Year 2013

2013-03-10: The start

At least that was the date that I found on the first blog post (imported from WordPress).
It began (and continued for several years) as a WordPress site, on a database provided by my webspace hosting service.

Year 2019

2019-03-30/31: Switch from WordPress to Hugo

After reading about static site generator in general a while ago, and about Hugo in more detail the week ago, I started on the weekend to re-build/replicate my self-hosted WordPress site.

Exported my content with WordPress plugin that was meant for Jekyll (because the Hugo exporter supposedly doesn’t work correctly), but since Markdown text, images and CSS file are pretty universal, I soon had a good foundation to work with.

It went pretty smooth and on late sunday evening, I had something that came pretty close to my existing web presence.

2019-04-14: Initial Git commit

Date of the inital commit of the Hugo files (Markdown content, resources, configurations, etc.) into my Git repository.

2019-04-13/14: More work on Style/Layout/Conversion · Version Control

[Entry revised 2021-06-28]

More work on style, layout, conversion of old posts.
Put under version control (Mercurial (Hg) on BitBucket.org), etc.

2019-07-24: FTP upload script

Finalized the first version of a Python script for uploading the files that Hugo generates via FTP.

Year 2020

2020-02-23: Masthead/Spinning Logo

Added a (slowly) spinning logo in the masthead.
Feared I would have to use tons of JavaScript magic, but found out that modern CSS is all one needs for a little transformation; pretty neat ;-)
Hopefully the animation is not too distracting; it’s slow and with a pause in-between, but still…

Year 2021

2021-01-09: DevLogs

Added a new archetype for DevLog blog posts (formerly Plans & Projects):
In the Hugo FrontMatter, the title of the posting will be modified with a RegEx:

  Input    : (File "devlog-123.md")
  Archetype: title: "{{ replace .Name "-" " " | replaceRE "([[:space:]])([[:digit:]]+)$" " #$2" | title | replaceRE "(Devlog)" "DevLog" }}"
  Output   : title: "DevLog #123"

Also, to make my life easier, I wrote a Python script for preparing such a post:
It grabs and uses the next available free number for the post from a counter file and generates a post draft.

2021-01-23: TOC (Table of Contents)

Enabled the creation of a TOC (Table of Contents) from the headings for the ‘Goldmark’ renderer in Hugo’s config.toml.
Added a toc shortcode that can be insert in a blog post, so that the TOC will automatically generated.
Extended the CSS for this whole stuff.

2021-01-24: Shortcode

Added the aside shortcode.

Year 2022

2022-01-06: Site Search

Added an explicit site search, which replaces ‘Google Site Search’ here.

The ‘Google Site Search’ didn’t work well; so instead I looked up alternative ways on how to provide a search functionailty for a static HUGO site. These looked interesting:
The current solution is mostly based on #1 (german text!).

The gist of it:
1. Created new template file “\layouts\index.json” (content taken from the website).
2. In config.toml, added JSON output: [outputs] home = [“HTML”, “RSS”, “JSON”]
3. New JavaScript file for actual search: “\static\js\search.js” (Code/file copied from the website).
4. New shortcode file: “\layouts\shortcodes\search.html” (content taken from the website, needed adjustments)
5. New page for search: “\content\page\search.md”, which contains the new shortcode: {{< search >}}
  Some more notes and tips from the article:
  - Die Suche beginnt, so bald mindestens 3 Zeichen getippt wurden (minlength).
  - badwords enthält eine Liste von Worten, die ignoriert werden sollen.
  - Wer die Suche lieber per Submit-Button auslösen möchte, muss autocomplete auf “0” setzen.
  - Man kann die Such-Seite auch per ?query=Suchbegriff aufrufen.
  - Die Suchergebnisse werden nach der Anzahl der Treffer des Suchbegriffs sortiert, wobei mit searchfield_weight eine Gewichtung vorgenommen werden kann. “5” bedeutet, dass der Treffer im entsprechenden Feld mit dem Faktor 5 gewichtet wird.
  - Die Suchfunktion durchsucht alle Sections. Wenn man in den Suchergebnissen anzeigen will, aus welcher Section das Ergebnis stammt, kann mit section_trans eine Übersetzung des internen Section-Keys vorgenommen werden.
  - Es ist mit add_searchlink möglich, zusätzlich auf eine externe Suchmaschine zu verlinken (im Beispiel DuckDuckGo), falls die interne Suche im Einzelfall kein befriedigendes Ergebnis liefert.
  Weitere Optionen
  - Die Suchfunktion kann verschiedene Sections getrennt durchsuchen. Dazu muss section_search auf “1” gesetzt werden und im Suchformular entsprechende Checkboxes ergänzt werden (im Beispiel auskommentiert).
  - Es ist möglich mehrere JSON-Arrays als Quelle für die Suche anzugeben. Das ist vor allem dann sinnvoll, wenn eine einzige Suchfunktion mehrere Websites durchsuchen soll. Damit in den Ergebnissen gekennzeichnet werden kann, welche Treffer lokal und welche von einer externen Website stammen, kann jedes Item im Array der externen Quelle noch den Wert “extern”:“1” enthalten. Das führt dazu, dass im Suchergebnis hinter [TITLE] der String aus extern_icon angefügt wird. Beispiel: bienenkiste.de/suchen/?query=Königin
  - Bei sehr großen JSON-Dateien kann es einen Moment dauern, bis die Datei geladen ist. In dieser Zeit wird json_wait angezeigt. Hier kann - falls im Theme verfügbar - ein Spinner/Loader-Icon eingefügt werden. Sobald die Datei geladen ist, wird json_ready angezeigt.
6. Replaced link to ‘Google Site Search’ in the default header (\layouts_default\baseof.html) with a link to the site’s new internal search page and with a unicode glyph ‘magnifying glass’ (https://stackoverflow.com/a/12036141/17589673).
7. Created an URL alias in TOML header of search.md (url: “/search”), so that the page is also reachable via saoe.net/search (next to saoe.net/page/search).

2022-05-15: RSS feed customization

Customized the main RSS feed: Lists now the new and the recently modified entries (which are marked distinctly in the title).
Also adapted the homepage for that a bit.

Year 2023

2023-08-20: Responsive Web Design · Goldmark Render Hooks

Reworked the site’s layout and style over the last couple of weeks, so that it now adheres more to a ‘Responsive Web Design’ and now looks and feels better on smaller devices (smartphone, tablet).
Learned that “Goldmark” (the current markdown processor of Hugo) can be customized even more so than “Blackfriday” (the precursor):
- Hugo: Configure markup (Render Hooks)
- Hugo: Docs: Render hooks
The trigger was my wish to open external links in a new browser window/tab: Blackfriday offered that thru a setting in Hugo’s config.toml (which I didn’t know about until now, when it was too late), but is also possible with “Goldmark”, as described here.

Year 2025

2025-11-08: SVG

Discoverd SVG graphics for me and how to use them. Are now being used e.g. in the info boxes and in the ‘About’ page.

Year 2026

2026-08-06: Serif Font

Using a serif main font now and giving some specific font names (but with generic fallback fonts, of course).
(I stumbled upon a blog post and was intrigued by it. Suddenly, a serif font for my website seemed like a neat idea and it looks nice indeed 🙂 )

2026-09-21: Site Search Improvement

After many years, I found (well, took) the time and leisure to extend the site-search:
One can now finally search for an exact phrase, and not only for ‘and’/‘or’ combinations of the words.

2026-09-26: More SVG

Added several product/project logos and thematic icons (as SVG files), that are now mostly being used in the blog’s overview pages (for categories and tags) and in the ‘About’ page.
Where fitting: Replaced fixed-sizes PNG image files with SVG vector graphics files.

2026-10-04: Style adjustments for small screens

Since the recent style and layout changes (e.g. using a SVG logo in the masthead banner), the proportions of the site were a bit off, escpecially when visited on a smartphone display. I then saw that I had, back then, created special CSS style sheets for “medium” and “large” screens, but none for “small” screens; hmm… Therefore I spent some time yesterday and made some adjustments so that this website will appear better on smaller, mobile devices.