Jekyll Build

learning jekyll

Aim

Introduction

Using Jekyll with GitHub Pages is a fantastic way to easily set up a blog and start writing. You need very little technical knowledge, especially if you set it up through GitHub’s GUI. GitHub offers a range of templates you can choose from. Learn some basic markdown and away you go.

I have very little experience with web development so set up a GitHub pages as a starting point. I followed a tutorial which allowed me to customise the site to a certain degree. The tutorial taught me the basics of how Jekyll works, Git Bash commands, folder set ups, the config file and Liquid. As a result, I had a fully-functioning website, including a portfolio and blog. It looked great on the surface but I didn’t fully understand what was going on underneath. The style and layout of pages were based on the Jekyll theme I had installed. CSS, Bootstrap and Javascript worked behind the scenes to display my content. If I wanted to make changes, I’d need to understand how Jekyll themes were built so I could change them. And so as the saying goes: If it ain’t broke, …. OK I broke it.

There were two options:

  1. Work through the code in my current theme line by line and work out what each part controlled.
  2. Remove the current theme and rebuild it section by section.

I chose the latter. I hoped there would be a greater sense of satisfaction once the site was finished. I would also be able to confidently explain how the site was built and what the purpose of each section is.

Method

I have documented the process I followed in a series of blog posts that are included at the bottom of this page.

I hope others will find this useful if they want to follow a similar process or if they want to look up how an element of a Jekyll site works.

I have also published the basic Jekyll theme that I created at the end of this project. I consciously kept this theme very simple. From my own experience, existing themes used advanced techniques which were very challenging to understand when new to web development and also trying to work out the Jekyll structure at the same time.

I wanted to take a different approach; starting with a simple structure from which people can expand on as their knowledge and experience develops.

Conclusion

My Jekyll Theme can be found here.

My Jekyll Theme

Following the development of this basic theme, I have since expanded my knowledge. I have created a range of includes for my site which are documented in further blog posts.

This project has not only helped me understand the Jekyll, which was the initial aim, but has also introduced me to web development - including html, CSS, JavaScript and SASS. I’ve enjoyed being able to combine both technical coding and creative web design skills. I will definitely look to further these skills, expanding into wider web development beyond Jekyll. I also want to explore creating CSS/JS animations and visualisation through D3.