Jekyll Static Generator
Building Site with Jekyll.
This media can also be read in: [Jekyll - Summary] article
About Me 🙋🏻♂️!
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.
Simple Deployment 🤔?
Github pages is easy for beginner.
- Git skill is a must.
- Multiple configuration:
Such as using _config_dev.yml
CI/CD Deployment 🤔?
Flexible for intermediate user:
- Github Actions
- Gitlab CI
- Netlify
- Vercel (Zeit Now)
- Travis
- CircleCI
- Manual
CI/CD Deployment 🤔?
CircleCI Case Example:
2: Jekyll Layout 🤠
- Minimal Layout
- Partial Layout
- Custom Pages
- Custom Output
Layout changes for each steps
Minimal Layout
The easiest thing to do this is to make a minimal layout, and modified later.
Partial Layout
Just a bit of refactoring.
Partial Layout
With a very humble result as figure below
Custom Pages
With Jekyll layout, you can add custom pages:
archives, tags, categories, blog list.
Custom Output
Jekyll can generate custom output.
Without adding any plugin.
After all this is just a static page.
3: Jekyll Content 🤠
- Markdown
- Shortcode
- Custom Code: Meta SEO
Markdown
Markdown is simply, just a text format.
Markdown
Which will be processed to markup.
Shortcode
We can utilize shortcodes like code in Jekyll.
To provide link, or to provide image.
Shortcode
Which will also be processed to HTML.
This shortcode is just an include statement.
Custom Code: Meta SEO
Opengraph is a must nowadays.
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.
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.
More Layout based on Default
Template Inheritance: Page
Template Inheritance: Page
With the result as below figure
Template Inheritance: Blog List
Layout Example: Blog List
Template Inheritance: Tags Tree
Layout Example: Tags Tree
Template Inheritance: Archive By Month
Layout Example: Archive By Month
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.
Pagination: Simple
Pagination: Number
Pagination: Adjacent
Prepare pagination with indicator:
by only showing what necessary, and hide the rest.
Pagination: Adjacent
Offset calculation require logic, and math.
Pagination: Indicator
Nine pages as animation.
6: Ruby Plugins 🤠
- Simple
- Pagination
- Tag Names
Ruby Filter: Simple
Liquid limitation make code complex.
Ruby Filter: Simple
This can be simplified by plugin.
Ruby Filter: Pagination
Simplified Adjacent Calculation with Ruby Plugin.
Ruby Filter: Pagination
Dramatically reduce liquid code.
And also avoid buggy code.
Ruby Filter: Tag Names
Extend official examples:
Now each tag name URLs can show list of post.
7: Theme Bundling 🤠
- Build Gemfile
- Using Gemfile
Build Gemfile
Bundling theme with Gemspec:
For use with other people.
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
Adding Assets
You can add any necessary assets such as: images, css frameworks, and javascript frameworks.
Using CSS Frameworks
Using CSS framework such as Bulma or Bootstrap or Custom, can make your life easier.
Parent and Child Layouts
Both are using Bootstrap now.
All Layouts
We can apply to other layouts as well.
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.
Using Custom SASS
Enhance theme looks:
Small thing, might have great impact.
Adding SASS Assets
Jekyll utilize SASS/SCSS as default CSS preprocessor.
Adding SASS Assets
Import SASS from any directory.
Apply to All Layouts
Again, we can apply to other layouts as well.
10: Layout 🤠
- Variables
- Responsive Content
Variables
Managing Default Color Between Layout.
Variables
Color Property Propagation
From pages frontmatter to child layout to parent layout.
Responsive Content
Mobile First Content Design
Responsive Content
Mobile First Index Columns
11: Widget 🤠
- Template
- Simple
- Liquid Loop
- Static Data
Widget Template
Prepare the default looks.
Widget
Simple Widget
Start from simple, such as plain HTML list.
Widget
Liquid Loop
You can also put anything in your widget as creative as you are.
Static Data
To generate content, such as backlink, internal link, or other stuff.
Static Data
Now consider link the data.
From this content below.
Static Data
With previous frontmatter.
We can see one or more links in a widget.
12: Pagination 🤠
- Bootstrap Stylesheet
- Bootstrap Responsive
- Bulma Stylesheet
- Bulma Responsive
Pagination
Bootstrap Stylesheet:
Using Liquid and Bootstrap stylesheet,
a common pagination could be achieved.
Pagination
Bootstrap Responsive:
Using Liquid and custom stylesheet,
a responsive pagination also could be achieved.
Pagination
Bulma Stylesheet:
Using Liquid and Bulma stylesheet,
a common pagination could be achieved.
Pagination
Bulma Responsive:
Using Liquid and custom stylesheet,
a responsive pagination also could be achieved.
13: Blog Post 🤠
- Parent Layout
- Child Layout
- Preview
- Additional
Blog Post: Parent Layout
Your generic columns-double.html.
Should contain header, and optionally footer.
Blog Post: Child Layout
Your typical post.html.
May contain additional stuff such as:
table of content, navigation, and maybe license.
Blog Post: Preview
A typical post can be seen in preview below.
Blog Post: Additional
You can add any stuff such as Table of Content.
14: Content 🤠
- Markdown
- Shortcode
- Syntax Highlighting
- Miscellanous: MathJax
Markdown
The same as previous.
Shortcodes
The same as previous.
Syntax Highlighting
MathJax
Math Lovers won't forget about this.
Deploy!
To Github or Gitlab or Bitbucket or Netlify or else.
What is Next 🤔?
Leverage to JAM stack!
Questions 🤔?
Don't be shy 🙋🏻♂️!
The End
🙇🏻
Thank You for Your Time.