Building this Website

From time to time one has to showcase something and a website is often the best place to do that. This is certainly not my area of expertise and I only have basic knowledge of HTML, CSS and JavaScript. There are countless pages with beautiful templates, and in the beginning I just played around with them. While this may work for a single page website, it can get very tedious as soon as a handful of pages require management – for example for a blog.

This is where static site generators enter the game. I stumbled across an extremely helpful tutorial by Jonathan McGlone that utilizes Jekyll to transform the markdown source code into a beautiful website and for a long time I was just happy with it. My only issue was the huge framework that was needed to perform this seemingly straightforward task. I probably don't use 99% of the capabilities of Jekyll, but it is written in Ruby and hence I have to install a bulk of software that is otherwise useless to me. At one point I was so annoyed that I start looking for alternatives.

The obvious choice was of course something in my preferred language of Python and many recommend Pelican as a suitable replacement for Jekyll. At first glance, it might be, but I just could not get along with it and for my purposes it is also too complicated. I just wanted a script that converts markdown input to HTML without adding a lot of extras. Luckily I found out that this part was carried out by Jinja – the perfect tool for my needs. The current site is still based on the template by Jonathan McGlone, but the conversion from markdown to HTML happens with a simple Python script (only around 50 lines of code).

Below I give a short overview of things that are used in this website

Table of Contents

1. Basics
2. Syntax highlighting
3. LaTeX math mode
4. Cards
5. FontAwesome Symbols
6. Navigation Buttons

Basics

The main css file style.css is based on simple-bootstrap.

Syntax highlighting

A large chunk of this website is dedicated to programming, and hence the presentation of the code is essential. Since this page will use it a lot, we start with it. The highlighting is done by Prism.

<pre><code class="language-python">import math
y = math.sqrt(2)
</code></pre>

which will result in

import math
y = math.sqrt(2)

LaTeX math mode

And it can also showcase LaTeX code like

\documentclass{article}
\usepackage[utf8]{inputenc}
\begin{document}
The text goes here.
\end{document}

More relevant for us is the use in text. This is done with the help of MathJax. In the code we use \$ to open and close a math environment. In order to threat them as such we use this JavaScript snippet to convert it:

 <script>
    MathJax = {
        tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']],
        displayMath: [['$$','$$'],['\\[','\\]']],
        }
    };
</script>

In order insert a \$ sign we need to write it as \$. Now we can use it inline $A=r^2\cdot \pi$ or in display mode $$ \int \cos x \mathrm{d}x = \sin x + C $$

Cards

The individual posts are presented in the form of such a card

The code for the card was taken from this post and is

FontAwesome

In many places on the website, a small icon fits better than text. Font Awesome provides a large collection of symbols that can easily be used. This includes symbols like  that are often used in the navigation or other that fit depending on the topic like , , , , , ,  or .

Navigation Buttons

If a topic spans multiple pages, it might be useful to include the following buttons: