Building Site with Jekyll.
This media can also be read in: [Jekyll - Summary] article
Yet, another underachiever 👻.
But hey, I have my own blog 🎉.
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]
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.
Github pages is easy for beginner.
Flexible for intermediate user:
CircleCI Case Example:
The easiest thing to do this is to make a minimal layout, and modified later.
Just a bit of refactoring.
With a very humble result as figure below
With Jekyll layout, you can add custom pages:
archives, tags, categories, blog list.
Jekyll can generate custom output.
Without adding any plugin.
After all this is just a static page.
Markdown is simply, just a text format.
Which will be processed to markup.
We can utilize shortcodes like code in Jekyll.
To provide link, or to provide image.
Which will also be processed to HTML.
This shortcode is just an include statement.
Opengraph is a must nowadays.
So far we have three places to put liquid code:
With the result as below figure
Pagination
Example Pagination URL
Prepare pagination with indicator:
by only showing what necessary, and hide the rest.
Offset calculation require logic, and math.
Nine pages as animation.
Liquid limitation make code complex.
This can be simplified by plugin.
Simplified Adjacent Calculation with Ruby Plugin.
Dramatically reduce liquid code.
And also avoid buggy code.
Extend official examples:
Now each tag name URLs can show list of post.
Bundling theme with Gemspec:
For use with other people.
It is a good time to take a break for a while.
🙇🏻
Take a deep breath and continue.
You can add any necessary assets such as: images, css frameworks, and javascript frameworks.
Using CSS framework such as Bulma or Bootstrap or Custom, can make your life easier.
Both are using Bootstrap now.
We can apply to other layouts as well.
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 utilize SASS/SCSS as default CSS preprocessor.
Import SASS from any directory.
Again, we can apply to other layouts as well.
Managing Default Color Between Layout.
Color Property Propagation
From pages frontmatter to child layout to parent layout.
Mobile First Content Design
Mobile First Index Columns
Prepare the default looks.
Simple Widget
Start from simple, such as plain HTML list.
Liquid Loop
You can also put anything in your widget as creative as you are.
Now consider link the data.
From this content below.
With previous frontmatter.
We can see one or more links in a widget.
Bootstrap Stylesheet:
Using Liquid and Bootstrap stylesheet,
a common pagination could be achieved.
Bootstrap Responsive:
Using Liquid and custom stylesheet,
a responsive pagination also could be achieved.
Bulma Stylesheet:
Using Liquid and Bulma stylesheet,
a common pagination could be achieved.
Bulma Responsive:
Using Liquid and custom stylesheet,
a responsive pagination also could be achieved.
Your generic columns-double.html.
Should contain header, and optionally footer.
Your typical post.html.
May contain additional stuff such as:
table of content, navigation, and maybe license.
A typical post can be seen in preview below.
You can add any stuff such as Table of Content.
The same as previous.
The same as previous.
Math Lovers won't forget about this.
Leverage to JAM stack!
Don't be shy 🙋🏻♂️!
🙇🏻
Thank You for Your Time.