Set Up Jekyll with Bootstrap and No Theme
We’ve all been there - the themes for Jekyll are not the best and most of them have zero documentation or consistency. I’ve since moved to vanilla css but you might want to use a css framework, and here’s how to do it.
This is valid as of Jekyll 4.2.0.
INITIALISE JEKYLL PROJECT
Now we want to add the folder structure for Jekyll. I didn’t want to use a theme (we will add Bootstrap later), so we use the -blank argument to get the empty folders but no theme.
# use '.' to make the folder structure in the current folder # make sure you are currently in /PROJECT_NAME jekyll new . --blank
Now you’ll have the Jekyll project structure with empty folders.
# see the site running on port 4000 jekyll serve
Download the latest Bootstrap files, version 4 in my case, and unzip them. Create a ‘bootstrap’ directory inside the existing empty ‘_sass’ folder
# inside PROJECT_NAME directory cd _sass mkdir bootstrap
Copy the files inside bootstrap-4.0.0->scss that you downloaded (NOT the scss folder itself just the contents) into the ‘_sass/bootstrap’ folder we just created inside your jekyll site.
Your folder structure should look like this:
--outragedpinkracoon.github.io -- many other files --_sass -- bootstrap -- mixins -- bootstrap.scss -- many other files
Confusingly, there’s a different folder assets -> css that we need to go to now to add bootstrap as an import.
/* assets/css/main.scss */ @import 'bootstrap/bootstrap'; @import "main";
Add a fun button or whatever you fancy to check Bootstrap is working as expected.
Test it’s working by adding the nav burger menu or something else fun.
BONUS: MINIFY SCSS
You might want to get Jekyll minifying your SCSS by adding this config line:
# config.yml sass: style: compressed