ssg  
Article Series

Jekyll in General

Jekyll Plain

Where to Discuss?

Local Group

Preface

Goal: What Jekyll can do in this article series

Repositories

This tutorial consist of two stage, but in three parts. The second stage is a choice between Bulma and Bootstrap.

  • Stage 1: Jekyll Plain

    • Layout, Content, Managing Code, Feature: Pagination, Plugin, Theme.
  • Stage 2: Jekyll + Bootstrap

    • CSS, SASS, Layout, Widget, Pagination, Blog Post, Content.
  • Stage 2: Jekyll + Bulma

    • CSS, SASS, Layout, Widget, Pagination, Blog Post, Content.

Table of Content

  • Preface: Table of Content

  • 1: Jekyll in General

  • Jekyll Plain

    • 2: Jekyll Layout

    • 3: Jekyll Content

    • 4: Managing Code

    • 5: Feature: Pagination

    • 6: Ruby Plugins

    • 7: Theme Bundling

  • Jekyll with Bootstrap or Bulma

    • 8: Apply CSS

    • 9: Apply SASS

    • 10: Layout

    • 11: Widget

    • 12: Pagination

    • 13: Blog Post

    • 14: Content

  • 15: Deploy

  • Conclusion


1: Jekyll in General

Topics Covered

  • Foreword

  • Install

  • Deploy

Why Jekyll?

But why?

  • This is just an example project. Most you can do with one SSG can be done with other SSG as well.
  • You are free to use your SSG choice: Jekyl, Hugo, Eleventy, 11ty, Pelican, Gatsby.
  • Here is the Concept SSG Presentation.

Any Expectation?

  • Case can be applied somewhere else. Most stuff applied in other SSG. Just don’t be a fanatic.
  • An example case for beginner. Just another humble example.
  • Starting point for a serious writer. After all, making a blog site is easy and fun.

Theme Making Cycle

Making theme consist of these steps:

  • Start From the Layout

    • Preparing layout with templating engine.
  • Custom Pages:

    • Liquid loop for custom pages and layout.
  • Adding Stylesheet:

    • Give wearable clothes to above loop, for nice looks.
  • Additional Feature:

    • Such as static data, widget and pagination.
  • Page Content:

    • Meta SEO, TOC, markdown, shortcode, syntax highlighting, stylesheet adjustment, MathJax.

Theming Skill

Adjustment is a reccuring issue that arise regularly.

Even when you are using a ready to use theme, you might still need customization to suit your needs.

Install Jekyll

  • Default Package from distro:

    • Easy for beginner.
  • Bundle:

    • Bundle can handle multiple Jekyll installment.
  • RVM:

    • RVM can handle multiple Ruby installment.

Jekyll Install: Bundle: Gemfile

Article: Jekyll - Install using RVM

Simple Deployment

  • Git skill is a must.

  • Multiple configuration:

    • Such as using _config_dev.yml.

Jekyll Deploy: Github Pages Served

Article: Jekyll - Deploy - Simple

CI/CD Deployment

Flexible for intermediate user:

  • Github Actions

  • Gitlab CI

  • Netlify

  • Vercel (Zeit Now)

  • Travis

  • CircleCI

  • Manual

Jekyll Deploy: CircleCI Steps Skeleton

Article: Jekyll - Deploy - CI/CD


2: Jekyll Layout

Topics Covered

Jekyll: Layout changes for each steps

Minimal Layout

The easiest thing to do this is to make a minimal layout, and modified later.

Jekyll Layout: Minimal

Article: Jekyll Plain - Minimal

Partial Layout

Just a bit of refactoring.

Jekyll Layout: Partial

With a very humble result as figure below

Jekyll Layout: Home in Browser

Article: Jekyll Plain - Layout

Custom Pages

With Jekyll layout, you can add custom pages, such as: archives, tags, categories, blog list.

Jekyll Layout: Custom Pages

Article: Jekyll Plain - Custom Pages

Custom Output

Jekyll can generate custom output, without adding any plugin.

Jekyll: Custom Output: JSON

Article: Jekyll Plain - Custom Output


3: Jekyll Content

Topics Covered

Markdown

Markdown is simply, just a text format.

Jekyll Content: Markdown in ViM

Which will be processed to markup.

Jekyll Content: Processed Markdown in Browser

Article: Jekyll Plain - Markdown

Shortcode

We can utilize shortcodes like code in Jekyll. To provide link, or to provide image.

Jekyll Content: Shortcode in ViM

Which will also be processed to HTML.

Jekyll Content: Processed Shortcode in Browser

This shortcode is just an include statement.

Custom Code: Meta SEO

Opengraph is a must nowadays.

Jekyll Meta: Telegram Desktop Opengraph

Article: Jekyll Plain - Meta SEO


4: Managing Code

Topics Covered

  • Plain Tutor 04: Part One

    • Liquid Code Placement, Layout Enhancement.
  • Plain Tutor 04: Part Two

    • Category and Tag, Archive by Year, then by Month.
  • Plain Tutor 05: Part Three

    • Clean up pages from code, prepare theme for use in Gemfile.

Liquid Code Placement

So far we have three places to put liquid code:

  1. pages as content, or

  2. _layouts, or

  3. _includes.

Guidance:

  • Avoid liquid codes in pages except for content such as shortcodes.
  • Logic and reusable should be moved to _includes.
  • HTML layout view to parent template in _layouts.
  • Child template in _layouts contain only frontmatter and include calls.

Article: Jekyll Plain - Managing Code - Part One

Layout Enhancement

More Layout based on Default

Jekyll: Managing Code: More Layout

Template Inheritance: Page

First, you need to understand template inheritance.

Jekyll: Managing Code: Template Inheritance: Layouts

With the result as below figure

Jekyll: Managing Code: Template Inheritance: Page Example

Template Inheritance: Blog List

And apply this to other layout kind.

Jekyll: Managing Code: Template Inheritance: Blog List: Flows

With the result as below figure

Jekyll: Managing Code: Template Inheritance: Blog List: Page Example

Template Inheritance: Tags Tree

Go further

Jekyll: Managing Code: Template Inheritance: Tags Tree: Flows

With the result as below figure

Jekyll: Managing Code: Template Inheritance: Tags Tree: Page Example

Article: Jekyll Plain - Managing Code - Part Two

Template Inheritance: Archive By Month

And go further again:

Jekyll: Managing Code: Template Inheritance: Archive By Month: Flows

With the result as below figure

Jekyll: Managing Code: Template Inheritance: Archive By Month: Page Example

Article: Jekyll Plain - Managing Code - Part Three


5: Feature: Pagination

Topics Covered

Intro

Example Pagination URL

  • Page 1: http://localhost:4000/pages/

  • Page 2: http://localhost:4000/pages/blog-2/

  • Page 3: http://localhost:4000/pages/blog-3/

  • And so on.

Article: Jekyll Plain - Pagination - Intro

Simple

Jekyll Pagination: Simple Pagination with Navigation

Article: Jekyll Plain - Pagination - Simple

Number

Jekyll Pagination: Number Pagination without Navigation

Article: Jekyll Plain - Pagination - Number

Adjacent

Prepare pagination with indicator, by only showing what necessary, and hide the rest.

Jekyll Pagination: Basic Adjacent Pagination: Animation

Article: Jekyll Plain - Pagination - Adjacent

Offset calculation require logic, and math.

Article: Jekyll Plain - Pagination - Logic

Indicator

And the result is as figure below:

Jekyll Pagination: Adjacent Pagination with Indicator: Animation

Article: Jekyll Plain - Pagination - Indicator


6: Ruby Plugins

Simple

Liquid limitation make code complex.

Jekyll Plugin: Long Code with Liquid

This can be simplified by plugin.

Jekyll Plugin: Simple Code with Ruby Filter

Article: Jekyll Plain - Plugin - Simple

Pagination

Simplified Adjacent Calculation with Ruby Plugin.

Jekyll Plugin: Adjacent Calculation in Ruby Filter

Dramatically reduce liquid code.

Jekyll Plugin: Pagination Using Ruby Filter

And also avoid buggy code.

Article: Jekyll Plain - Plugin - Pagination

Tag Names

Extending official examples, now each tag name URLs can show list of post.

Jekyll Plugin: Tag Names Showing List of Post

Article: Jekyll Plain - Plugin - Tag Names


7: Theme Bundling

Build Gemfile

Bundling theme with Gemspec, for use with other people.

Jekyll Plugin: Example of Gemspec

Article: Jekyll Plain - Theme Bundling

Using Theme in Gemfile

Jekyll Plugin: Using Theme in Gemfile


8: Apply CSS

Mobile First Page Design

Jekyll: Responsive Page Design

Adding Assets

You can add any necessary assets such as: images, css frameworks, and javascript frameworks.

Jekyll Bootstrap: Assets Tree

Using CSS Frameworks

Using CSS framework such as Bulma or Bootstrap or Custom, can make your life easier.

Jekyll Bootstrap: Home Page Content

Article: Jekyll - Bootstrap - CSS - Part One

Article: Jekyll - Bulma - CSS - Part One

Parent and Child Layouts

Both are using Bootstrap now.

Jekyll Bootstrap: Parent Layout

All Layouts

Jekyll Bootstrap: Tags Layout

Article: Jekyll - Bootstrap - CSS - Part Two

Article: Jekyll - Bulma - CSS - Part Two


9: Apply SASS

Using Custom SASS

  • You desire for a better design

    • Further, you can utilize stylesheet to control your responsive space, or custom component
  • Long code tends to get messy.

    • You need to get organized.

Enhance theme looks: Small thing, might have great impact.

Jekyll Bootstrap: Home Page Content

Article: Jekyll - Bootstrap - SASS - Part One

Article: Jekyll - Bulma - SASS - Part One

Adding SASS Assets

Jekyll utilize SASS/SCSS as default CSS preprocessor.

Jekyll Bootstrap: SASS Assets Tree

Import SASS from any directory.

Jekyll Bootstrap: SASS Import

Apply to All Layouts

Again, we can apply to other layouts as well.

Jekyll Bootstrap: Pages Layout: About

Article: Jekyll - Bootstrap - SASS - Part Two


10: Layout

Variables

Managing Default Color Between Layout.

Jekyll Bootstrap: Managing Default Color Between Layout

Color property propagate, from pages frontmatter to child layout to parent layout.

Jekyll Bootstrap: Color Property Propagation

Article: Jekyll - Bootstrap - Layout - Variables

Article: Jekyll - Bulma - Layout - Variables

Responsive Content

Mobile First Content Design

Jekyll Bootstrap: Responsive Content Design

Mobile First Index Columns

Jekyll Bootstrap: Responsive Index Columns

Article: Jekyll - Bootstrap - Layout - Index List

Article: Jekyll - Bulma - Layout - Index List


11: Widget

Template

Prepare the default looks.

Jekyll Bootstrap: Default Widget Template

Simple

Start from simple, such as plain HTML list.

Jekyll Bootstrap: Simple Widget Example

Article: Jekyll - Bootstrap - Widget - Simple HTML

Article: Jekyll - Bulma - Widget - Simple HTML

Liquid Loop

You can also put anything in your widget as creative as you are.

Jekyll Bootstrap: Custom Widget with Loop in Liquid

Article: Jekyll - Bootstrap - Widget - Liquid Loop

Article: Jekyll - Bulma - Widget - Liquid Loop

Static Data

To generate content, such as backlink, internal link, or other stuff.

Jekyll Bootstrap: Backlink form Github Blog

Jekyll Bootstrap: Backlink form Gitlab Blog

Now consider link the data, from this content below.

Jekyll Bootstrap: Frontmatter: Related Post ID

With previous frontmatter, we can see one or more links in a widget.

Jekyll Bootstrap: Widget: Related Posts

Article: Jekyll - Bootstrap - Widget - Static Data

Article: Jekyll - Bulma - Widget - Static Data


12: Pagination

Bootstrap Stylesheet

Using Liquid and Bootstrap stylesheet, a common pagination could be achieved.

Jekyll Bootstrap Pagination: Combined Animation

Article: Jekyll - Bootstrap - Pagination - Stylesheet

Bootstrap Responsive

Using Liquid and custom stylesheet, a responsive pagination also could be achieved.

Jekyll Bootstrap Pagination: Responsive Animation

Or alternatively

Jekyll Bootstrap Pagination: Alternate Responsive Animation

Article: Jekyll - Bootstrap - Pagination - Responsive

Bulma Stylesheet

Using Liquid and Bulma stylesheet, a common pagination could be achieved.

Jekyll Bulma Pagination: Combined Animation

Or alternatively

Jekyll Bulma Pagination: Alternate Combined Animation

Article: Jekyll - Bulma - Pagination - Stylesheet

Bulma Responsive

Again, using Liquid and custom stylesheet, a responsive pagination also could be achieved.

Jekyll Bulma Pagination: Responsive Animation

Article: Jekyll - Bulma - Pagination - Responsive


13: Blog Post

Parent Layout

Your generic columns-double.html should contain header, and optionally footer.

Jekyll Bootstrap Content: Blog Post Parent Layout

Child Layout

May contain additional stuff such as: table of content, navigation, and maybe license.

Jekyll Bootstrap Content: Blog Post Child Layout

Preview

A typical post can be seen in preview below.

Jekyll Bootstrap: Post with Header, Footer, and Navigation

Article: Jekyll - Bootstrap - Content - Blog Post

Article: Jekyll - Bulma - Content - Blog Post

Additional

You can add any stuff such as Table of Content.

Jekyll Bootstrap: Post with Table of Content


14: Content

Markdown

The same as previous plain tutorial.

Jekyll Bootstrap: Markdown

Shortcode

The same as previous plain tutorial.

Jekyll Bootstrap: Shortcodes

Syntax Highlighting

This require additional stylesheets.

Jekyll Bootstrap: Syntax Highlighter

Article: Jekyll - Bootstrap - Content

Article: Jekyll - Bulma - Content

Miscellanous: MathJax

Jekyll Bootstrap: MathJax


15: Deploy!

To Github or Gitlab or Bitbucket or Netlify or else.

CI/CD: Github Workflows: Eleventy Runner

Article: CI/CD - Deploy Overview


Conclusion

There in nothing more after summary, except this presentation slide.

Consider continue watching [ Eleventy - Presentation Slide ].

Thank you for reading.