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
Links
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
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
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
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
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
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
What do you think ?