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

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

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

1.- Remove 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.

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?

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" }}">
<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 }}
{{ content }}

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

{{ content }}
{% include footer.html %}

Bootstrap 5

Go to

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 type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left

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 = []'[data-bs-toggle="tooltip"]'))
var tooltipList = (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)

That’s all folks.

Enjoy it!

rails developer