, 4 min read

Example Theme for Simplified Saaze: nukeKlaus

Original post is here eklausmeier.goip.de/blog/2022/09-05-example-theme-for-simplified-saaze-nukeklaus.


Simplified Saaze is the static site generator, which is used to generate this blog. So far, there are three 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.
  3. Saaze Koehntopp: Based on Bootstrap CSS, modeled after Type on Strap

Here is another theme, called nukeklaus, modeled after the blog nukeKlaus.net from Dr. Klaus Humpich. That blog itself is based on Twenty Sixteen. Some characteristics:

  1. Responsive design with three, two, or only one column
  2. Categories and tags
  3. Hero image
  4. Blog
  5. RSS feed and sitemap
  6. Search functionality, if you have PHP on the web-server
  7. Light and dark mode

The source code for this theme is here: saaze-nukeklaus. The demo-site is here: nukeklaus.

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

1. Comparison. In Analysis of Website Performance I measured performance of the original nukeKlaus.net website. Measurement is done by using pingdom. The performance of the original site is really terrible, i.e., every page needs more than 6s up to 25s to load the entire page. This theme combined with the fact that the content is then entirely static, brings performance grade up to 100, and load time is 123ms, only using two requests instead of 26. The old performance was:

The new performance is:

Timeline for the two requests is:

Both measurements, i.e., old and new, are for nukeKlaus and location Frankfurt. This measurement confirms the two statements given in Analysis of Website Performance:

  1. terrible performance must be due to WordPress and/or MySQL
  2. the static site generator Simplified Saaze provides a viable alternative

Load time went down from 25s to 0.123s.

Page size shrank from 1.5MB to 62.3KB.

Number of requests sank from 26 to 2. Reducing the number of requests is one main contributor to reducing entire load time.

Lines of code for CSS went from 4,032 to 158 lines. This makes understanding and changing the CSS way easier. Also, inlining CSS into HTML pages facilitates the reduction of requests.

2. Installation. Run

composer create-project eklausme/saaze-nukeklaus

This will copy the files of this Git repository, it will also install Simplified Saaze. To run Simplified Saaze you still need to compile one C program, install one PECL (PHP extension), and configure one PHP file. This is something you have to do only once. These steps are described in Installation, i.e.,

  1. make yaml extension available for php, if it is not already installed
  2. compile php_md4c_toHtml.c (file is automatically unpacked via composer)

See Installation for more details on installing Simplified Saaze.

Once everything is installed, switch to the directory and run

time php saaze -mrtb /tmp/build

The time is only to show you how quick it runs. Runtime on AMD Ryzen 7 5700G is 0.1 seconds for 174 blog posts. And for this only a single core is used. The options used:

  1. -m is used to generate a sitemap
  2. -r generates RSS XML feed
  3. -t stores categories and tags
  4. The -b /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. This option is entirely optional.

Shell script blognukeklausDeploy provides an example deployment-script.

3. Conversion. In case you want to replicate the conversion from the original nukeKlaus.net to Simplified Saaze you will proceed as follows:

(1) Download all posts via curl in script blognukeklauscurl:

blognukeklauscurl wp-sitemap-posts-post-1.xml

(2) Convert from HTML to Markdown using Perl script blognukeklaus2md:

for i in *.html; do blognukeklaus2md $i > /tmp/T/`basename $i .html`.md; done

(3) Create year index using shell script blogdate:

for i in `seq 2013 2022`; do blogdate -gp../ -y$i $i*.md > $i/index.md; done