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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

CS373 Fall 2021: Week of Oct.4

Mastering Hyperledger Fabric

Creating an Updated Windows 7 OSD Image with SCCM Build and Capture

Hello, world.

July Update

Internship at Oasis Infobyte

Simplifying DAOs (Part 1

Rust-scales Python Function

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
sebdur

sebdur

rails developer

More from Medium

Getting started with the World of Web

Form Validation Using Jquery Examples

Tips and tricks to create an awesome GitHub profile README

Flexbox: keeping it simple