Richard Perry

Just another blog about nothing

Why I Joined a Running... Instagram Digest Q1 2014

Planning the Migration

  |     |   Technology, Jekyll

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:

  1. My blog is very simple so doesn’t need the power of WordPress;
  2. 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 :smile:.

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 :smile:.

comments powered by Disqus