As mentioned in my previous post, I recently decided it would be a good idea to move my blog away from WordPress and onto GitHub Pages making use of Jekyll, the static site generator to simplify my site. I chose to do this for two simple reasons:
- My blog is very simple so doesn’t need the power of WordPress;
- I can’t resist tinkering with things.
Realistically, the latter was the biggest driver in my decision. I came across this new idea that
seemed interesting and decided to give it a go 
.
Where to Start
First of all, I had to look at what was needed to setup a Jekyll site. There are so many tutorials out there that this bit was easy. So I started by setting myself up a free development environment on Nitrous.io and a Git repository at GitHub. GitHub Pages also allowed me to generate a basic sample site once I had completed setup of the repository. I thought this would be a good way to get started but, it turns out I was wrong. Although the sample site generated by GitHub Pages looked good, it was very basic and aimed specifically a site for your hosted code. I therefore opted to start from scratch with a Jekyll setup.
Setting Up Jekyll
Nitrous.io essentially gives you a linux based virtual machine with shell access that you can use as a remote development environment. This allows you to work on your coding projects from anywhere without having to worry about dependency issues on various different systems. So once I had setup an account, all I had to do was log into the system and it was ready to go. I checked that the version of Ruby on the system was compatible with Jekyll, installed Jekyll and setup a new site.
The new site generated by Jekyll includes the basic file structure for the site and a simple index page. I overwrote the GitHub Pages generated site in my repository with this new site and then the real work started.
I wanted my site to be fairly similar to the existing one because I actually like the design, but I also wanted it to be more responsive (i.e. I wanted it to display just as well on a mobile phone or tablet as it does on a computer screen). So I started by created the basic layouts for the pages and then crafted the styling on top. To ensure it was going to display properly on all devices, I opted for a mobile first design with media queries to amend the site layout for larger screens.
Once all that was complete, I had to start looking into how the convert my existing posts from
WordPress, but that will have to wait till next time .