Where to Discuss?

Local Group

Table of Content


This article series is intended for beginner.

Goal: Explain Hugo Step By Step

I’m using Bootstrap as an example in this guidance. Of course you can use any CSS framework that you like, such as Materialize or Bulma.

About Hugo

Hugo is an SSG (Static Site Generator) that is supported by gitlab. Or used pairly by using github with netlify. Hugo is not the only SSG (Static Site Generator).

Why Hugo ?

Hugo is Fast.

After blogging time to time, after 194 article, my Jekyll become so slugish. I have to move some articles to new Blog. Now it is done.

Part of Hugo

There are these two part that you need to know.

  • Black Friday: Markdown Parser for Hugo

  • Chroma: Templating Language for Hugo

Source Code

Source code used in this tutorial, is available at:


This is would not be the best blog template that you ever have. Because I only put most common stuff, to keep the tutorial simple.

After you learn this guidance, you understand the fundamental skill. Thus, a base for you, to make your own blog site. With your imagination, you may continue, to build your own super duper Hugo site. Far better than, what I have achieved.

Demo Hugo

I also made a site, intended as a Demo. It is based on this tutorial, but in a more enhanced way, to face real life, blog building situation.

And add some aestethic appeal, with more custom stylesheet.

Hugo: Demo

Table of Content

The table content is available as header on each tutorial. There, I present a Hugo Tutorial, step by step, for beginners.

Begin The Guidance

Let’s get the tutorial started.

Consider continue reading [ Hugo Minimal ].

Thank you for reading.