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 GemfileReplace #gem "rails" with gem "jekyll" like in the image:
Ctrl+O and Enter to save.
Ctrl+X to exit nano.
And do the bundle:
$ bundleStart server:
$ jekyll s
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
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;
}
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)
})
That’s all folks.
Enjoy it!
