Example Theme for Simplified Saaze: Koehntopp

Original post is here: eklausmeier.goip.de

Simplified Saaze is the static site generator, which is used to generate this blog. So far, there are two example themes for Saaze.

1. Saaze Example: By design, this design is very simple.
2. Saaze J-Pilot: This design contains top-menus with sub-menus, pages in English and German, a blog, responsive elements.

Here is another theme, called Koehntopp, modeled after the personal blog of Kristian Köhntopp. This blog itself is based on the Jekyll-based theme Type on Strap. Some characteristics:

1. Responsive design
2. Based on Bootstrap-CSS
3. Tags
4. Blog
5. RSS feed
6. Search functionality, if you have PHP on the web-server

Using Simplified Saaze will further provide MathJax, YouTube, Twitter, CodePen, image galleries, and all the other goodies.

1. Demo. You can view the theme in action here: koehntopp. The content is directly from Kristian Köhntopp's GitHub page.

The source code for the koehntopp theme is here: eklausme/saaze-koehntopp. It can be installed with Composer:

1composer create-project eklausme/saaze-koehntopp

Output of this command looks like this:

 1/tmp$ time composer create-project eklausme/saaze-koehntopp
 2Creating a "eklausme/saaze-koehntopp" project at "./saaze-koehntopp"
 3Info from https://repo.packagist.org: #StandWithUkraine
 4Installing eklausme/saaze-koehntopp (v1.1)
 5  - Downloading eklausme/saaze-koehntopp (v1.1)
 6  - Installing eklausme/saaze-koehntopp (v1.1): Extracting archive
 7Created project in /tmp/T/saaze-koehntopp
 8Loading composer repositories with package information
 9Updating dependencies
10Lock file operations: 1 install, 0 updates, 0 removals
11  - Locking eklausme/saaze (v1.10)
12Writing lock file
13Installing dependencies from lock file (including require-dev)
14Package operations: 1 install, 0 updates, 0 removals
15  - Downloading eklausme/saaze (v1.10)
16  - Installing eklausme/saaze (v1.10): Extracting archive
17Generating optimized autoload files
18        real 2.60s
19        user 0.30s
20        sys 0
21        swapped 0
22        total space 0
23/tmp/T$ l
24./  ../  saaze-koehntopp/
25/tmp/T$ l saaze-koehntopp
26./  ../  bin/  composer.json  composer.lock  content/  .gitignore  LICENSE  public/  README.md  saaze*  templates/  vendor/

This will install the theme and the static site generator in one step. You still need to follow the steps in Installation, i.e.,

1. make yaml extension available for php
2. compile php_md4c_toHtml.c

Once everything is installed switch to the directory and run

1time php saaze -b /tmp/build

The time is only to show you how quick it really is. Runtime on AMD Ryzen 7 5700G is less than 0.2 seconds for almost 1,000 blog posts. And for this only a single core is used. The -d /tmp/build is used to generate the static HTML file in /tmp, which happens to be a RAM disk on Arch Linux. Any other directory will do.

2. Conversion. In case you want to replicate the conversion from the original blog of Kristian Köhntopp, hitherto using Hugo, to Simplified Saaze you will proceed as follows:

1. Clone GitHub repository github.com/isotopp.github.io
2. Manually rename 2019-04-25-what-has-kubernetes-ever-done=for-us.md to the same file without the equal sign
3. Remove file 2004-02-08-cooties.md, as it is entirely empty
4. Run each content file through Perl script blogkoehntopp, i.e., for i in *.md; do ... done
5. Change directory to content/posts and run Perl script blogcategory -p ../ *.md > ../cat_and_tags.json
6. I ran the CSS through CSS Beautifier, now called koehntopp.css

Above steps give you what you see on koehntopp, but they do not give you the same URLs as blog.koehntopp.info. If you want identical URLs, then you would have to activate so called "ugly URLs" in Simplified Saaze. Furthermore, the Markdown content would have to be distributed among the various sub-directories. If you do not want to redistribute the original content among directories, then one of the below methods would do:

1. Use URL rewriting in the web-server, see computation of $canonicalURL in templates/top-layout.php
2. Create static HTML files with redirects to the new locations

3. Comparison. Below are the number of lines for configuration and templates, furthermore errors on pages, and runtimes. Runtimes were measured on AMD Ryzen 7 5700G, max. 5.7 GHz, 64 GB RAM, all files were in RAM disk.

Kristian Köhntopp reports runtime for Hugo to be 8.156s on his machine. Apparently, his machine is a slow machine. So according above table based on Ryzen 5700G, Simplified Saaze is more than six times faster than Hugo in real time. Real time is the time, the user actually has to wait for his results, sometimes also called elapsed time. Simplified Saaze is more than 70-times faster than Hugo w.r.t. CPU time. User time is the time all CPUs together needed to compute your result. The AMD Ryzen 7 5700G CPU has 16 logical cores. All these cores were used by Hugo, only one was used for Simplified Saaze. More comparison of runtimes between Simplified Saaze and other static site generators are here Performance Comparison Saaze vs. Hugo vs. Zola.

Kristian Köhntopp remarks:

Build time is 0.272s, approximately human reaction time - it's instant.

That's the time Hugo needs for refreshing a single page. At the same time, that's the time Simplified Saaze needs to rebuild the entire 1,000 pages.