Clean and optimized Jekyll 4 with Bootstrap 5

Jekyll is an awesome tool, but by default it’s missing some things that we’ll cover on this document.

First thing: install jekyll https://jekyllrb.com/

Open the terminal and get ready.

Create new empty project

$ jekyll new jekyllbs5 --blank
$ cd jekyllbs5
$ bundle init
$ sudo nano Gemfile

Replace #gem "rails" with gem "jekyll" like in the image:

Ctrl+O and Enter to save.

Ctrl+X to exit nano.

And do the bundle:

$ bundle

Start server:

$ jekyll s
http://localhost:4000/

Now, open the project with your favorite editor and do the next steps:

1.- Remove index.md and create a new file index.html in root.

Copy/paste this on the first line in index.html file:

---
layout: default
title: Home
---

2.- Remove all the unnecessary folders. _data, _drafts, _posts, _sass and assets/css

After the clean

3.- Download the amazing penibelst’s html compressor for jekyll, because by default it doesn’t bring one.

https://github.com/penibelst/jekyll-compress-html/releases/tag/v3.1.0

Download compressor.html file and copy/paste it inside the _layouts folder.

Go to _layouts/default.html and add this on the first line of the file:

---
layout: compressor
---

Need more information about this compressor? http://jch.penibelst.de/

4.- Taking advantage of the fact that we have the penibelst’s compressor, we’ll load main.scss file inside the <head> tag.

Replace the default scss calling for the new one.

The entire _layouts/default.html

---
layout: compress
---
<!DOCTYPE html>
<html lang="{{ site.lang | default: "en-US" }}">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>{{ page.title }} - {{ site.title }}</title>
<style type="text/css">
{% capture include_to_scssify %}
{% include main.scss %}
{% endcapture %}
{{ include_to_scssify | scssify }}
</style>
</head>
<body>
{{ content }}
</body>
</html>

Create a new file main.scss in _includes folder.

Open _includes/main.scss and change the background-color:

body {
background-color: #000;
}
Everything’s OK

5.- Create a new folder in assets named js

In assets/js create a new file main.js

Create a new file footer.html in _includes folder.

Open _includes/footer.html add the script tag pointing to your main.js file:

<script src="./assets/js/main.js"></script>

At last, do the include after the content, in the <body> tag in _layouts/default.html

<body>
{{ content }}
{% include footer.html %}
</body>

Bootstrap 5

Go to https://getbootstrap.com

For this project, we’re gonna load BS5 via CDN.

“Why? We could download it and include in the project”

That’s right, but without Popper.js. They no longer have a downloadable file.

“NPM modules?”

Total overkill…

So, CDN is not a bad alternative.

Add the css link tag in <head> before the main.scss include, and the script tag (with Popper.js) in _includes/footer.html before the main.js include.

To try if everything goes OK, we can run our traditional Tooltips test.

Go to index.html and copy/paste the tooltips example from Bootstrap 5 documentation, inside a div with the class tooltips:

---
layout: default
title: Home
---
<div class="tooltips">
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left
</button>
</div>

Go to _includes/main.scss and center the div:

body {
background-color: #000;
}
.tooltips {
text-align: center;
line-height: 100vh;
}

Open assets/js/main.js and copy/paste this code to enable tooltips everywhere:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
Voila!

That’s all folks.

Enjoy it!

rails developer