Site improvement

I slightly regret wanting to build the site without a nice theme… so here i’ll document all the changes and improvements I make.


One of the fist features i want to add is a table of contents. For this i did the following:

In the config.yaml:

    endLevel: 3
    ordered: false
    startLevel: 2

In layouts/_default/single.html:

{{ define "main" }}
        <h1>{{ .Title }}</h1>
        {{ .Content }}
        {{ .TableOfContents }}
{{ end }}

In the front matter of the posts:

toc: true

I also added this in my default archetype.

This gives me a very ugly TOC at the end of the page but it’s something to work with.


Allowing HTML in markdown files

I tried to add images in a row, with some CSS and HTML but wasn’t able to make it work. Than i tried to add a video and stumbled upon the following: If using Hugo 0.60.+ then the unsafe flag needs to be set in the config for Goldmark (the new Markdown parser) to accept the HTML."

So I went to my config.yaml and added

      unsafe: true

Images in a row

Now I should be able to add raw HTML in my markdown files so I’ll try to make 3 images show next to each other instead of underneath.

I add this code to my CSS file:

* {
  box-sizing: border-box;
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;

And this code to my page:

<div class="row">
  <div class="column">
    <img src="/images/23-03-12-site-improvement/site01.png" alt="pepper" style="width:100%">
  <div class="column">
    <img src="/images/23-03-12-site-improvement/site01.png" alt="pepper2" style="width:100%">
  <div class="column">
    <img src="/images/23-03-12-site-improvement/site01.png" alt="pepper2" style="width:100%">

But nothing shows up… This might have something to do with CSS float, or maybe I didn’t address the images correctly. I’ll look into it later.


I found this site explaining how to create a shortcode to allow raw html in Hugo and I was able to add a video to this page

And I tried again… And it worked!