During the last years, I have been iterating over and over on multiple static website generators and various custom themes for my personal webpage.

About a year a go I migrated my website from Pelican to Hugo. Hugo is blazing fast and highly customizable.

At the same time I migrated to Hugo, I decided to create a custom theme that I named unbloated. The simplicity of this theme was one of my favorite things. However, the theme was not responsive at all, meaning that when seen using a smartphone, everything look a bit distorded.

A theme inspired by Fabien Sanglard’s and Berkeley Graphics websites

A couple of weeks ago I decided to do one last iteration to get a simple but elegant website. To achieve this goal I used the following ingredients:

• The website should be built using Bootstrap 5.0
• I wanted the simplicity that Fabien Sanglard’s claims in this post
• The style should resemble to the one from Berkeley Graphics

Additional features: code tabs, rendering LaTeX and more!

Due to my background, I really wanted to have support for code tabs, beutiful math rendering, and other features. For this, I took advantage of Hugo’s shortcodes.

Code tabs support

I wanted to store the source code for the code snippets in their original files. This way, readers can directly download the source code files. Also, I wanted to have some logic that included these files within tabs.

#include <stdio.h>
#include <stdlib.h>


void main() {
    printf("Hello World!\n");
    return EXIT_SUCCESS;
}

fn main() {
    println!("Hello world!");
}

print("Hello world!")

All credits to hugo-dynamic-tabs and the Hugo shortcode documentation.

Rendering LaTeX through KaTeX

The LaTeX support was easier to implement. It is just a matter of linking some javascript code only when necessary. The result is:

$$ F(x) = \frac{1}{2 \pi i}\oint \frac{f(z)}{z - a} dz $$

It also supports inline rendering, see the $A = \pi r^2$ expression.

The Hugo mathematics documentation explains the current setup.