Learn and Discover Open Source with Daily Genuine Experience. From Coding, Front End, Back End, Database, and Static Site Generator.
 
 
ssg  


Preface

This article series is intended for beginner.

Goal: Explain Hugo Step By Step

I might write a lot, but never comes deep into conceptual thinking. This article series is still the same.

However, Let me start over, by rewrite the old article.

Issue with last year Tutorial.

I made a Hugo article series last year, it is basically a step by step Hugo using Bootstrap.

After a while, there are some feedback. Some reader has difficulty with that article, because reader have to learn SASS at the same time as using Hugo.

A sequel

I decide to rewrite the Tutorial, with the same material, and using Bulma as stylesheet frontend instead of Bootstrap, so that I can feel that there is still added value in writing this.

The early article of this article series would be similar to bootstrap one. But the rest would be different. Nomore SASS explanation.

The Bulma SASS Article Series

Now we have two separate article series.

  • Bulma SASS: with pure HTML and no SSG.

  • This newly Hugo Article Series.

Prerequisite

You have to read the Bulma SASS , before reading this Hugo article series.

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


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.

Sure I have compared Hugo with other SSG. There is other fast Static site generator, but not with as much feature as Hugo.

Part of Hugo

There are these two part that you need to know.

  • Black Friday: Markdown Parser for Hugo

  • Chroma: Templating Language for Hugo

Hugo content can use either html or markdown. You can read about Markdown format here:

Source Code

Source code used in this tutorial, is available at:

Source code for Bulma SASS, is also available at:

Demo Hugo

Unfortunately, I do not create Demo site with Bulma, but you can still use this old Demo in Bootstrap. 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


The Article Series

Disclaimer

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.

Content

A site need content. I do not want lorem ipsum.

None of Your Buciness

To make this step by step tutorial alive, I choose most common topic, a fictional love story, about Hugo, Bulma, and lightyears between.

I put some lyrics from great beautiful songs. I’m not sure exactly what these songs means, but I think most is about falling in love with someone unexpected.

Sebuah catatan blog dengan tema-tema perbucinan.

Without the content, you can still make your site anyway. You do not really need to understand the story behind the content.

Table of Content

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


Hugo Article Series

Consist of more than 30 articles.

Bulma Article Series

Consist of 10 articles.


Chapter Step by Step

Tutor 01

Generate Only Pure HTML

  • Setup Directory for Minimal Hugo

  • General Layout: Base, List, Single

  • Partials: HTML Head, Header, Footer

  • Additional Layout: Post

  • Basic Content

Hugo Bulma : Tutor 01

Archive: Tutor 01


Tutor 02

  • Add Bulma CSS

  • Standard Header (jquery or vue) and Footer

  • Enhance All Layouts with Bulma CSS

Hugo Bulma : Tutor 02

Archive: Tutor 02


Tutor 03

  • Add Custom SASS (Custom Design)

  • Nice Header and Footer

  • General Layout: Terms, Taxonomy

  • Apply Two Column Responsive Layout for Most Layout

  • Nice Tag Badge in Tags Page

Hugo Bulma : Tutor 03

Archive: Tutor 03


Tutor 04

  • More Content: Lyrics and Quotes. Need this content for demo

  • Additional Layout: Archives

  • Article Index: By Year, List Tree (By Year and Month)

  • Custom Output: YAML, TXT, JSON

Hugo Bulma : Tutor 04

Optional Feature

  • Widget: Friends, Archives Tree, Categories, Tags, Recent Post, Related Post

Hugo Bulma : Tutor 04

Archive: Tutor 04


Tutor 05

  • Article Index: Apply Multi Column Responsive List

  • Post: Header, Footer, Navigation

Optional Feature

  • Blog Pagination: Adjacent, Indicator, Responsive

Hugo Bulma: Tutor 05: Indicator Pagination

Hugo Bulma: Tutor 05: Responsive Pagination

Finishing

  • Layout: Service

  • Post: Markdown Content

  • Post: Table of Content

  • Post: Responsive Images

  • Post: Shortcodes

  • Post: Syntax Highlight

  • Post: Bulma Title: CSS Fix

  • Meta: HTML, SEO, Opengraph, Twitter

  • RSS: Filter to Show Only Post Kind

Hugo Bulma : Tutor 05: Post

Archive: Tutor 05


What do you think ?


Begin The Guidance

Let’s get the tutorial started. Long and short of it, this is the tale.

Consider continue reading [ Hugo Minimal ].

Thank you for reading.