Jekyll Static Generator

Building Site with Jekyll.


This media can also be read in: [Jekyll - Summary] article

About Me 🙋🏻‍♂️!

my photo

Yet, another underachiever 👻.

But hey, I have my own blog 🎉.

Table of Content 🤔?

  • Jekyll in General.
  • Jekyll Plain.
    Layout, Content, Managing Code, Feature: Pagination, Plugin, Theme.
  • Jekyll + Bootstrap:
    CSS, SASS, Layout, Widget, Pagination, Blog Post, Content.
  • Jekyll + Bulma:
    CSS, SASS, Layout, Widget, Pagination, Blog Post, Content.
  • Summary.

1: Jekyll in General 🤠

  • Foreword
  • Install
  • Deploy

Why Jekyll 🤔?

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

Read this concept first: [Presentation - Concept SSG]

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.

Step of Making Theme 🤔?

  • 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

[Jekyll - Install using RVM]

Simple Deployment 🤔?

Github pages is easy for beginner.

  • Git skill is a must.
  • Multiple configuration:
    Such as using _config_dev.yml

Jekyll Deploy: Github Pages Served

[Jekyll - Deploy - Simple]

CI/CD Deployment 🤔?

Flexible for intermediate user:

  • Github Actions
  • Gitlab CI
  • Netlify
  • Vercel (Zeit Now)
  • Travis
  • CircleCI
  • Manual

[Jekyll - Deploy - CI/CD]

CI/CD Deployment 🤔?

CircleCI Case Example:

Jekyll Deploy: CircleCI Steps Skeleton

2: Jekyll Layout 🤠

  • Minimal Layout
  • Partial Layout
  • Custom Pages
  • Custom Output

Layout changes for each steps

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

[Jekyll Plain - Minimal]

Partial Layout

Just a bit of refactoring.

Jekyll Layout: Partial

[Jekyll Plain - Layout]

Partial Layout

With a very humble result as figure below

Jekyll Layout: Home in Browser

Custom Pages

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

Jekyll Layout: Custom Pages

[Jekyll Plain - Custom Pages]

Custom Output

Jekyll can generate custom output.
Without adding any plugin.
After all this is just a static page.

Jekyll: Custom Output: JSON

[Jekyll Plain - Custom Output]

3: Jekyll Content 🤠

  • Markdown
  • Shortcode
  • Custom Code: Meta SEO

Markdown

Markdown is simply, just a text format.
Jekyll Content: Markdown in ViM

[Jekyll Plain - Markdown]

Markdown

Which will be processed to markup.

Jekyll Content: Processed Markdown in Browser

Shortcode

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

Jekyll Content: Shortcode in ViM

Shortcode

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

[Jekyll Plain - Meta SEO]

4: Managing Code 🤠

  • Part One
    Liquid Code Placement, Layout Enhancement.
  • Part Two
    Category and Tag, Archive by Year, then by Month.
  • 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:

  • pages as content, or
  • _layouts, or
  • _includes.

[Jekyll Plain - Managing Code - Part One]

Liquid Code Placement

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

[Jekyll Plain - Managing Code - Part One]

More Layout based on Default

Jekyll: Managing Code: More Layout

Template Inheritance: Page

Jekyll: Managing Code: Template Inheritance: Layouts

Template Inheritance: Page

With the result as below figure

Jekyll: Managing Code: Template Inheritance: Page Example

Template Inheritance: Blog List

Jekyll: Managing Code: Template Inheritance: Flow

Layout Example: Blog List

Jekyll: Managing Code: Blog List Layout

Template Inheritance: Tags Tree

Jekyll: Managing Code: Template Inheritance: Tags Tree

Layout Example: Tags Tree

Jekyll: Managing Code: Tags Tree Layout

[Jekyll Plain - Managing Code - Part Two]

Template Inheritance: Archive By Month

Jekyll: Managing Code: Template Inheritance: Archive By Month

[Jekyll Plain - Managing Code - Part Three]

Layout Example: Archive By Month

Jekyll: Managing Code: Archive By Month Layout

5: Feature 🤠

Pagination

  • Intro
  • Simple
  • Number
  • Adjacent
  • Indicator

Pagination: 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.

[Jekyll Plain - Pagination - Intro]

Pagination: Simple

Jekyll Pagination: Simple Pagination with Navigation

[Jekyll Plain - Pagination - Simple]

Pagination: Number

Jekyll Pagination: Number Pagination without Navigation

[Jekyll Plain - Pagination - Number]

Pagination: Adjacent

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

Jekyll Pagination: Basic Adjacent Pagination: Animation

[Jekyll Plain - Pagination - Adjacent]

Pagination: Adjacent

Offset calculation require logic, and math.

[Jekyll Plain - Pagination - Logic]

Pagination: Indicator

Nine pages as animation.

Jekyll Pagination: Adjacent Pagination with Indicator: Animation

[Jekyll Plain - Pagination - Indicator]

6: Ruby Plugins 🤠

  • Simple
  • Pagination
  • Tag Names

Ruby Filter: Simple

Liquid limitation make code complex.

Jekyll Plugin: Long Code with Liquid

[Jekyll Plain - Plugin - Simple]

Ruby Filter: Simple

This can be simplified by plugin.

Jekyll Plugin: Simple Code with Ruby Filter

Ruby Filter: Pagination

Simplified Adjacent Calculation with Ruby Plugin.

Jekyll Plugin: Adjacent Calculation in Ruby Filter

[Jekyll Plain - Plugin - Pagination]

Ruby Filter: Pagination

Dramatically reduce liquid code.

Jekyll Plugin: Pagination Using Ruby Filter

And also avoid buggy code.

Ruby Filter: Tag Names

Extend official examples:
Now each tag name URLs can show list of post.

Jekyll Plugin: Tag Names Showing List of Post

[Jekyll Plain - Plugin - Tag Names]

7: Theme Bundling 🤠

  • Build Gemfile
  • Using Gemfile

Build Gemfile

Bundling theme with Gemspec:
For use with other people.

Jekyll Plugin: Example of Gemspec

[Jekyll Plain - Theme Bundling]

Using Theme in Gemfile

Jekyll Plugin: Using Theme in Gemfile

In Need of Caffeine?

It is a good time to take a break for a while.

🙇🏻

Take a deep breath and continue.

8: Apply CSS 🤠

  • Mobile First Page Design
  • Adding Assets
  • Using CSS Frameworks
  • Parent and Child Layouts
  • All Layouts

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

[Jekyll - Bootstrap - CSS - Part One]

Parent and Child Layouts

Both are using Bootstrap now.

Jekyll Bootstrap: Parent Layout

All Layouts

We can apply to other layouts as well.

Jekyll Bootstrap: Tags Layout

[Jekyll - Bootstrap - CSS - Part Two]

9: Apply SASS 🤠

  • Using Custom SASS
  • Adding SASS Assets
  • Apply to All Layouts

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.

[Jekyll - Bootstrap - SASS - Part One]

Using Custom SASS

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

Jekyll Bootstrap: Home Page Content

Adding SASS Assets

Jekyll utilize SASS/SCSS as default CSS preprocessor.

Jekyll Bootstrap: SASS Assets Tree

Adding SASS Assets

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

[Jekyll - Bootstrap - SASS - Part Two]

10: Layout 🤠

  • Variables
  • Responsive Content

Variables

Managing Default Color Between Layout.

Jekyll Bootstrap: Managing Default Color Between Layout

Variables

Color Property Propagation
From pages frontmatter to child layout to parent layout.

Jekyll Bootstrap: Color Property Propagation

[Jekyll - Bootstrap - Layout - Variables]

Responsive Content

Mobile First Content Design

Jekyll Bootstrap: Responsive Content Design

Responsive Content

Mobile First Index Columns

Jekyll Bootstrap: Responsive Index Columns

[Jekyll - Bootstrap - Layout - Index List]

11: Widget 🤠

  • Template
  • Simple
  • Liquid Loop
  • Static Data

Widget Template

Prepare the default looks.

Jekyll Bootstrap: Default Widget Template

Widget

Simple Widget
Start from simple, such as plain HTML list.

Jekyll Bootstrap: Simple Widget Example

[Jekyll - Bootstrap - Widget - Simple HTML]

Widget

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

Jekyll Bootstrap: Custom Widget with Loop in Liquid

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

[Jekyll - Bootstrap - Widget - Static Data]

Static Data

Now consider link the data.
From this content below.

Jekyll Bootstrap: Frontmatter: Related Post ID

Static Data

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

Jekyll Bootstrap: Widget: Related Posts

[Jekyll - Bootstrap - Widget - Static Data]

12: Pagination 🤠

  • Bootstrap Stylesheet
  • Bootstrap Responsive
  • Bulma Stylesheet
  • Bulma Responsive

Pagination

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

Jekyll Bootstrap Pagination: Combined Animation

[Jekyll - Bootstrap - Pagination - Stylesheet]

Pagination

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

Jekyll Bootstrap Pagination: Responsive Animation Jekyll Bootstrap Pagination: Alternate Responsive Animation

[Jekyll - Bootstrap - Pagination - Responsive]

Pagination

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

Jekyll Bulma Pagination: Combined Animation Jekyll Bulma Pagination: Alternate Combined Animation

[Jekyll - Bulma - Pagination - Stylesheet]

Pagination

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

Jekyll Bulma Pagination: Responsive Animation

[Jekyll - Bulma - Pagination - Responsive]

13: Blog Post 🤠

  • Parent Layout
  • Child Layout
  • Preview
  • Additional

Blog Post: Parent Layout

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

Jekyll Bootstrap Content: Blog Post Parent Layout

Blog Post: Child Layout

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

Jekyll Bootstrap Content: Blog Post Child Layout

Blog Post: Preview

A typical post can be seen in preview below.

Jekyll Bootstrap: Post with Header, Footer, and Navigation

[Jekyll - Content - Blog Post]

Blog Post: Additional

You can add any stuff such as Table of Content.

Jekyll Bootstrap: Post with Table of Content

14: Content 🤠

  • Markdown
  • Shortcode
  • Syntax Highlighting
  • Miscellanous: MathJax

Markdown

The same as previous.

Jekyll Bootstrap: Markdown

[Jekyll - Bootstrap - Content]

Shortcodes

The same as previous.

Jekyll Bootstrap: Shortcodes

Syntax Highlighting

Jekyll Bootstrap: Syntax Highlighter

MathJax

Math Lovers won't forget about this.

Jekyll Bootstrap: MathJax

Deploy!

To Github or Gitlab or Bitbucket or Netlify or else.

CI/CD: Github Workflows: Eleventy Runner

[CI/CD - Deploy Overview]

What is Next 🤔?

Leverage to JAM stack!

staticgen.com

@JAMstackID

Questions 🤔?

Don't be shy 🙋🏻‍♂️!

The End

🙇🏻

Thank You for Your Time.