Changing the Theme on Jekyll

Since starting to using Jekyll on this blog I have been using the standard built in theme. If you have visited before you will have seen the blog looked like this:

old theme

The standard theme isn’t quite what I want this blog to look like. I personally prefer a few posts on the home page with full content enabled. I may at some point use the equivalent of the “more” tag so I can put an excerpt on the home page and then link to the full material, but for now I want to stick with the full content on the main page.

To make the change I needed to install a new theme. This is the first time I’ve used Jekyll, so I was also new at installing themes.

After a brief search around the Jekyll theme library I came across a theme called Lanyon. This is the one that I decided to modify and use.

How to Switch Theme on Jekyll

Before you begin, I suggest making a backup of your Jekyll folder. I used Git and committed everything before messing with the theme, that way I could switch back to where I was if needed. You might opt to simply make a copy of the folder. I’ll leave that up to you. However, in the next post I will show how I use Git and GitHub for version control on the site.

Installing the theme was fairly simple. I ran in to an issue with pagination, but also found the fix after some searching around. Here’s how I installed it:

I downloaded the Lanyon theme, extracted the contents and then folder by folder and file by file I pasted everything in to my Jekyll install being careful not to overwrite anything (such as the _posts folder… do not overwrite your own blog content).

I deleted (the original index file) as there was an index.html file included with Lanyon.

The next step is to edit the config file. I commented out the old theme and added the following:

#theme: minima
  - jekyll-feed
  - jekyll-sitemap
gems: [jekyll-paginate-v2]

  enabled: true
  per_page: 5
  collection: 'posts'
  limit: 0
  sort_reverse: true
  sort_field: 'date'

Here I specified jekyll-paginate-v2 as one of the gems to be used. Note that I used v2 as I had problems with jekyll-paginate. From my understanding, jekyll-paginate development has been discontinued. V2 seems to build on the original.

Next, I set the pagination options. I set enabled to true, per_page to 5 on “posts” only. The limit of 0 I believe means that all posts on my index.html page will be paginated and it won’t restrict it to the first XX amount of posts for example.

The sort_reverse had me confused. I expected it to be needed as false, but for me the correct order was true. I also specified the sort_field to be based on the date of the post. You can sort by others such as title, author, and others if needed.

After getting the main config file ready I also needed to add the following to the gemfile file:

gem "jekyll-paginate-v2"

You can now build your site and run it on the local test server on localhost:4000 as follows:

jekyll build
bundle exec jekyll serve

At this point you should see the Lanyon theme with your own content (assuming you didn’t wipe out your _posts folder).

Customising Lanyon

I made a few more tweaks to make it my own. I’m not particularly interested in the slide out menu from the side. Instead, I’ll add a single nav bar below my name which will run the width of the page. To remove the sidebar I modified default.html found in the _layouts folder. I also made some tweaks to the _includes folder as well as the other files in _layouts just to get the site looking the way I wanted.

After removing a few items I managed to get the site to look as I want it. I built the site and all looked good.

Next Steps

The next step is to move the blog to the internet for hosting. I chose Amazon to host the site and will go in to details of how I set that up in the next post.