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.
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.
Links
Hugo Article Series
Consist of more than 30 articles.
-
Hugo Step by Step Repository (this repository)
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
Archive: Tutor 01
Tutor 02
-
Add Bulma CSS
-
Standard Header (jquery or vue) and Footer
-
Enhance All Layouts with Bulma CSS
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
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
Optional Feature
- Widget: Friends, Archives Tree, Categories, Tags, Recent Post, Related Post
Archive: Tutor 04
Tutor 05
-
Article Index: Apply Multi Column Responsive List
-
Post: Header, Footer, Navigation
Optional Feature
- Blog Pagination: Adjacent, Indicator, Responsive
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
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.