Jekyll | Build a Jekyll Template based on Bootstrap 4

TL;DR

While i want to learn about and work with bootstrap, i decided to build a Jekyll Template, so that i can build a dynamic website.

• about.html
• blog-home-1.html
• blog-home-2.html
• blog-post.html
• contact.html
• faq.html
• full-width.html
• index.html
• portfolio-1-col.html
• portfolio-2-col.html
• portfolio-3-col.html
• portfolio-4-col.html
• portfolio-item.html
• pricing.html
• services.html
• sidebar.html

My plan was to separate the presentation layer (what you will see) from the business layer (what creates the content for the presentation layer).

To achieve this with Jekyll, i convert the Bootstrap pages to Jekyll include pages. The final result should look like this:

Depending on the type of the component, i choose three different solutions:

1. Place the data in the corresponding include file of the component
2. Place the date in the page, which calls the corresponding include file of the component
3. Place the data in a Jekyll collection file

Data in corresponding include file of the component

I used this approach for components, which are used only once on the website and have a mostly static content, e.g. the FAQ Page

I used this approach for components, which are used more than once on the website, e.g. a Blog Post

I used this approach for components, which are used only once on the website, but needs more configuration information, e.g. the Services- or Portfolio Page.

To use a Collection you first need to define it in your _config.yml.

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">#
collections_dir: collections # folder, where collections files are stored
collections:
  services:
    title: "Services"
    output: true # store output files for each item under the collections folder

Then, you have to create the collection files, for each item in your collection one file:

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">---
img: 1.jpg
title: Development
subtitle: 
footer: 
text: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus aut mollitia eum ipsum fugiat odio officiis odit.
---

And the data of this files can be accessed in the Jekyll include file with this code fragment:

• all items of the collection: site.services, {% for item in site.services %}
• data of each item: {{ item.title }}, {{ item.text | markdownify }}

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="1,4,6" data-enlighter-language="html" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">{% for item in site.services %}
    <div class="col-lg-4 mb-4">
        <div class="card h-100">
            <h4 class="card-header">{{ item.title }}</h4>
            <div class="card-body">
                <p class="card-text">{{ item.text | markdownify }}</p>
            </div>
            <div class="card-footer">
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>
        </div>
    </div>
{% endfor %}

The final result