This is the first post here. So it is not completely useless I will use this post as a manual for the blog itself.

Hugo⌗

The blog is build with hugo. Hugo is a static site generator that generates a static HTML website from a set of markdown files.

The page is build with a single command:

hugo

The generated site can now be found in public/.

For development purpose the command

hugo server -D

can be used to start a local web server which makes the website available at http://127.0.0.1:1313/. This pages get automatically updated and reloaded for any changed markdown or template file.

The -D options does also show draft posts which are normally not rendered in for a production build.

Terminal theme⌗

Based on my limited web design skills it was required to use an existing hugo theme. I selected the terminal from panr.

The documentation suggests to use git submodule to add the theme to repository of the blog. This would only add a reference to the theme and requires that the repository of the theme is accessible to build the website. I decided to use git subtree instead which will add the content of the theme repository directly into the blog repository and provides a way to updating them.

As first step the theme repository is added as remote terminal_theme:

git remote add terminal_theme https://github.com/panr/hugo-theme-terminal.git

Then the theme is added as subtree:

git subtree add --prefix themes/terminal terminal_theme master --squash

In this case the theme is stored in themes/terminal and received from the master branch. Instead of master also a tag can be used. The --squash will squash all commits into a single one.

As last step simply set the theme in the config.yml to terminal and configure the theme as documented in the readme.

To update the theme a modified subtree command is used:

git subtree pull --prefix themes/terminal terminal_theme master --squash

Mermaid JS⌗

Mermaid JS is a javascript library to generate diagrams and charts with text based definitions. To make the usage with Hugo it is integrated with custom Shortcode mermaid.

The following example:

{{<mermaid>}}
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
{{</mermaid>}}

will generate this diagram:

graph TD; A-->B; A-->C; B-->D; C-->D;