Changelog
Notable changes to the backend/(infra)structure (not its content!) of this site.
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-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.
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…
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 shortcut that can be insert in a blog post, so that the TOC will automatically generated.
- Extended the CSS for this “toc” stuff.
2021-01-24: Shortcode “aside”
- Added the “aside” shortcode.
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:
- https://weitblick.org/post/simple-static-site-search-hugo-jamstack/
- https://blog.jeremylikness.com/blog/dynamic-search-in-a-static-hugo-website/
- https://www.forsure.dev/-/2019/09/03/add-search-functionality-to-your-hugo-static-site/
The current solution is mostly based on #1 (german text!).
The gist of it:
- Created new template file “\layouts\index.json” (content taken from the website).
- In config.toml, added JSON output: [outputs] home = [“HTML”, “RSS”, “JSON”]
- New JavaScript file for actual search: “\static\js\search.js” (Code/file copied from the website).
- New shortcode file: “\layouts\shortcodes\search.html” (content taken from the website, needed adjustments)
- 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.
- 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).
- 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.
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):
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.
2025-11-08: SVG Graphics
- 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.
2026-05-08: Fixing a Warning
-
I had text in ‘.\layouts_default_markup\ReadMe.txt’, but after the update to Hugo v0.161.1, the existence of a *.md or *.txt file in that directory triggered a warning when building the site: “WARN skipping template file “…”: unrecognized render hook template”.
Maybe that could be managed, somehow… – but I’m not interested in spending time on this; not worth it. Instead, I simply copy and pasted the few liness from that file into this file: See remark regarding Goldmark from 2023-08-20.
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 vector graphics files
- 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.