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

Preface

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

Repository

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

Features

  • 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

Finishing

  • 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 ?