Goal: Explanation of Hugo Repository Step By Step

Here is the summary of Hugo with Bulma CSS Framework. Hugo is using Chroma template.

I’m using Bulma, enhanced with custom SASS containing

  • Custom Helper Spacing

  • Material Design

Hugo Bulma Test Drive

An example of Hugo site using Bulma for personal learning purpose.

Hugo (Chroma) + Bulma + Custom SASS

Hugo Bulma MD: Preview

Hugo Step By Step

This repository:

Frankenbulma (Bulma Material Design) Step By Step

Additional guidance:

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 MD: Tutor 01

Tutor 02

  • Add Pure Bulma CSS

  • Standard Header (jquery or vue) and Footer

  • Enhance All Layouts with Bulma CSS

Hugo Bulma MD: 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 MD: Tutor 03

Tutor 04

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

  • Additional Layout: Archives

  • Custom Output: YAML, TXT, JSON

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

Hugo Bulma MD: Tutor 04

Tutor 05

  • Post: Header, Footer, Navigation

Optional Feature

  • Blog Pagination: Adjacent, Indicator, Responsive

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

  • Article Index: Apply Box Design

Hugo Bulma MD: Tutor 05

Tutor 06


  • Article Index: Apply Multi Column Responsive List

  • 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

  • Search: lunr.js

Hugo Bulma MD: Tutor 06

What do you think ?