After getting in touch with hugo and running into trouble with almost every template used, I decided to start a page / blog from scratch to learn a bit more basics of hugo.

I’m not blaming the templates but my limited knowledge and somehow the promise you can build a website in minutes by using a template. Yes, you can build a website in minutes but without understanding hugo basics every little change is hard to implement and takes ages.

I started using one of the few good tutorials. I started with this one Hugo mini course. Another one is here Hugo beginner tutorial.

As proposed in the tutorial I use Bulma to apply css styles. Was this a good idea… partly, maybe…
Styling the main site construct was easy as expected but then I found that the contents (posts or pages) are not that easy to style. That required a lot of try and error. In the end this site still needs some lines of own css to overwrite Bulma’s defaults, especially for the content rendered from markdown. Luckily, we can also use html in markdown but for that our hugo.toml needs to be adapted as below.

[markup.goldmark.renderer]
  unsafe = true # Allow HTML in md files

At least h1, h2, h3 etc. tags can be styled directly using bulma syntax. Some examples are below.

Apply html / bulma styles in your markdown posts / pages.

Code:

<div class="container">
  <h1 class="title has-text-white-ter">This is a h1 using html / bulma syntax</h1>
  <p class="subtitle has-text-warning">This is a paragraph using html / bulma syntax</p>
</div> 

Result:

Code:

# This is a h1 with bulma's has-text-warning {.has-text-warning}`   

Result:

This is a h1 with bulma’s has-text-warning

Code:

## This is a h2 with bulmas's has-text-white-ter {.has-text-white-ter}`    

Result:

This is h2 with bulmas’s has-text-white-ter

I’m not 100% happy with the responsive behaviour yet but all of it was achieved using bulma styles. Example for text size on mobile below.

 <article class="content is-size-4 is-size-5-mobile">
      {{ .Content }}
 </article>