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


Goal: Explanation of Jekyll Repository Step By Step

I have been very busy lately. I can’t playback yesterday when I have time to write my blog. So here is the summary of Jekyll material that I have made.

I’m using Bulma, enhanced with custom SASS containing

  • Custom Helper Spacing

  • Material Design


Jekyll Bulma Test Drive

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

Jekyll + Liquid + Bulma + Custom SASS

Jekyll Bulma MD: Preview

Jekyll 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 Jekyll

  • General Layout: Default, Page, Post, Home

  • Partials: HTML Head, Header, Footer

  • Basic Content

Jekyll Bulma MD: Tutor 01

Tutor 02

Add Bulma CSS Framework

  • Add Bulma CSS

  • Standard Header (jquery or vue) and Footer

  • Enhance All Layouts with Bulma CSS

  • Apply Bulma Two Column Responsive Layout for Most Layout

Jekyll Bulma MD: Tutor 02

Tutor 03

Combine with Custom SASS Material Design

  • Add (a bunch of) Custom SASS (Custom Design)

  • Nice Header and Footer

  • Index Content: Index, Category, Tag, Archive By Year/Month

  • Enhance All Two Column Responsive Layout with Material Design

  • Nice Tag Badge in Tags Page

Jekyll Bulma MD: Tutor 03

Tutor 04

Loop with Liquid

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

  • Simplified All Layout Using Liquid Template Inheritance

  • List Tree: Archives: By Year, By Year and Month

  • List Tree: Tags and Categories

  • Dynamic Include: Blog Header

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

  • Custom Output: YAML, TXT, JSON

Jekyll Bulma MD: Tutor 04

Tutor 05


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

  • Refactoring Template using Capture: Widget

  • Pagination (v1): Adjacent, Indicator, Responsive

  • Pagination (v2): Adjacent, Indicator, Responsive

  • Post: Header, Footer, Navigation

Jekyll Bulma MD: Tutor 05

Tutor 06


  • Layout: Service (dummy)

  • Post: Markdown Content (test case)

  • Post: Table of Content

  • Post: Responsive Images

  • Post: Syntax Highlight (sass)

  • Post: Shortcodes (include with parameter)

  • Official Plugin: Feed

  • Meta: HTML, SEO, Opengraph, Twitter

  • Multi Column Responsive List: Categories, Tags, and Archives

Jekyll Bulma MD: Tutor 06

What do you think ?