When creating a website it can be challenging to come up with an aesthetically pleasing design; especially if you aren’t a web designer. Luckily there are a number of sites that provide Bootstrap themes, and these are a great way to get started. Today we’ll look at how to make use of a Bootstrap theme within Jekyll.
It’s completely valid to stick with straight HTML when using a Bootstrap theme, but doing so means having a fair amount of duplicate code even on a fairly small site. So Jekyll can be a good option even if working on a simple project.
What we’ll build
The theme looks like:
Making use of the theme from within Jekyll
Depending on the way a particular theme has been structured, the steps for making use of the theme inside Jekyll will vary slightly. The general procedure will be the same however:
- Generate and configure the initial Jekyll site.
- Get the theme running within Jekyll.
- Restructure the site to make use of
layoutfiles to eliminate code duplication.
Let’s get at it!
Generate and configure the initial Jekyll site
First off we need to create the Jekyll site.
Generating the site
And let’s launch the site.
Navigating to http://localhost:4000 we get a beautiful blank page.
Now for some configuration.
We’ll create a
_config.yml file and fill in some basic contents.
We’re just setting up our Jekyll site to use Sass and to minify our styles.
We can also clean up our directory structure as there are some folders we won’t be needing.
And with that we are done our initial set-up, let’s move onto getting the theme running inside Jekyll.
Get the theme running within Jekyll
Once having downloaded and unzipped the theme, we’ll see the following file structure.
Looking at the structure and poking around the files a bit gives us an idea of what we need to bring over to our Jekyll site.
We’ll be bringing over the
vendor folders. We’ll also replace our current blank
index.html page with the page from the theme.
So you can copy these items over manually, or use the command line, we’ll place the
scss files in a
css directory, for everything else we’ll keep the same folder names as the theme… so:
If we have a look at our site, we see the
index.html content but we’re not seeing any of the styles show up.
Let’s have a look at
index.html and see what the style-sheet link looks like.
/index.html …line 20
We need to update the link as Jekyll doesn’t add
.min to the generated filename.
/index.html …line 20
Our link to the style sheet is now correct, but we still don’t see our styles, let’s have a look in the
That looks like an issue, if the
Sass files were being processed correctly we would expect a
.css file to be created. Likely the problem is the main
.scss file, which for this theme is named
business-casual.scss, let’s have a look at it.
OK, simple enough fix, we need to add blank front matter to the file so Jekyll knows to process it as Sass.
I needed to restart the Jekyll server after making these changes, after doing so things are looking a fair bit better, but we are still missing our background image.
This is an issue with the styling in
_global.scss, sometimes I find there are hiccups between what works in Jekyll and what works directly within a theme, perhaps due to differences in the Jekyll Sass engine? Usually it is pretty easy to track down the problem however.
In this case we need to make a small change to line 3 of
We’ve explicitly specified a 2nd value (the same value as the first) for the
linear-gradient as it’s not defaulting to the same value when omitted.
And with that we have our theme running in Jekyll!
Customizing the theme
Once the theme is running in Jekyll, customizations to the style can done as you would normally. This usually involves updating the color scheme via the
_variable.scss file. For instance we could replace the current contents of the file with:
Yikes, that is ugly! Failed experiment there, let’s revert to the original color scheme and move on!
Restructure the site to eliminate code duplication.
Now it’s time to take advantage of Jekyll’s features and eliminate some code duplication. We’ll bring in another page to help with the motivation for this section, so let’s do that first. We’ll bring in the
If we view the
about page, we’ll see that we are missing our styling again.
To fix this, we’d need to update our style link in the
about page… but that’s not the approach we want to take. We don’t want to have to set a style link in all our pages, instead let’s set up a general layout and as part of doing so, move our style link into a common file that can be re-used by all our pages.
Using a layout
In order to prevent having to repeatedly specify the layout of our site, we’ll create a default layout file.
Looking at our site, each page follows the same layout: a banner; followed by a navigation bar; followed by page specific content; followed by a footer. So along with adding a
head section, this is the format our layout file will take.
Let’s get at building out these sections.
Breaking out the head section
First off let’s break out our header section. We’ll make use of an
_includes directory for the various sections we’ll break out, so let’s also create the directory while we are at it.
Now we’ll insert our head content.
Simple, we’ve just extracted the
<head> section of the existing
Breaking out the banner, navigation and footer
We’ll follow the same procedure for the banner, navigation and footer.
Let’s create the include files:
And now extract the contents of these sections from
Nothing complicated about the banner, onto the navigation.
We’ve made a small change to the navigation code, we’ve removed the hard-coded
active class which highlights the navigation link for the page the user is currently viewing. Since the navigation is now shared by all pages, we can’t hard-code which page is currently active. We’ll deal with restoring this functionality later.
Similar to the banner, the footer section is very straight forward.
With the code for all our
_includes defined we now need to update our actual pages.
Updating the content pages
We’ll start with the
index.html page, all we need to do is to specify a
layout and then remove the sections we extracted to our
Simple! The same procedure applies to the
With the above changes we have our site displaying as before, but with the advantage of having eliminated our duplicate code.
Now let’s deal with getting the active page link back to being highlighted on the navigation bar. This is a pretty simple fix.
/_includes/navbar.html …line 8
The addition of some simple logic in the
li tags to determine whether we should include the
active class or not does the trick:
And that’s all there is to it!
So hopefully this demonstrates how easy it is to use a theme from within Jekyll. It’s basically a process of moving some files around and potentially making a few tweaks to the
scss files. So no need to be limited to only Jekyll specific themes, using Bootstrap or other UI frameworks and themes is a snap!
Thanks for reading and I hope you enjoyed the post!