Getting Started with Jekyll (on Windows!)

 This week Kichwa Coders’ intern Jean Philippe found out the hard way that when it comes to building websites, having the right tools for the job is vital to success. Follow his progress as he explores the potential of using Jekyll to build a user-friendly, easy to maintain static website on Windows.

What is Jeykll and why do we use it?

Jekyll uses Markdown – a text-to-HTML conversion tool – to create a a blog-aware static website that doesn’t require a huge amount of maintenance. Once you have created the structure you just have to add your own Markdown file and Jekyll will add it to the website. The appeal of Jeykll for many users is that it allows content editors to edit the site without knowing how to code. After some rudimentary experience I can now create a basic Jeykll website.

How easy is it to get started with Jeykll?

This week I built my first website using Jekyll. I had some initial difficulties understanding how to use it, but once I’d got the basics I was able to come up with ideas on how to get the best out of it. Before you can install Jekyll you need to install Ruby and Bundle. I’m on Windows, so at first it was hard to install Jekyll as it is more suited to Linux, Linux users are most familiar by using command line and it’s easier to install Ruby and Bundle on Linux but I found this website.  However when I attempted to build a new project with the command “Jeykll new newproject” I got this:image

This wasn’t what I was expecting and I was just wondering what to do next when a colleague pointed out that this was a problem with the version of Jekyll that I had on my laptop – and that the project showing on my screen was in fact correct – phew! I went back to some useful tutorials and discovered that I needed to create some specific folders and add the initial group of folders to them. I called these new folders  ‘_includes’ and  ‘_layouts’.  I then had to create some files to build the structure of the website.

Having got my basic website up and running I wanted to build a new project within it, but again I ran into difficulties almost immediately. I assumed I had made a mistake earlier on in the process as I did not appear to have the correct architecture to build my project with. But then it became clear that there are two ways to install Jekyll. The first is with the instruction “sudo apt-get install jeykll”; and the second using Ruby is “gem install jeykll”. The difference between these two instructions is crucial as the first installs an older system of Jeykll and the second installs the latest version. Most of the help and tuition online is for the older version of Jekyll and this was what was confusing me as I was working on a newer version. Once I had installed the software on a linux and given the command “sudo apt-get install jekyll” I was able to proceed.

My first attempt at a Jeykll website is now online and looks like this:






It’s still a work in progress but I’m really pleased with the results so far. Using online tutorials and help forums etc is a great way to learn your way around something new- but don’t forget to check your sources are relevant to the software you’re using.

What’s Next?

I’m hoping to create a website with different topics.  The home page will reproduce the style of the existing January website, but in addition I will include a “Docs” page where  you can read all the posts so far about January project. At the moment that’s mainly the work completed by my colleagues at Kichwa Coders, but in the future it could be anyone with something to say about January. I hope it will be grow to be a useful resource.

The best aspect of Jekyll is that when I  finish the website, I can add a post in markdown and add it to the website easily. I recommend using Jekyll if you want a quick and easy way to add posts, and if you don’t want to write any HTML.  you just have to build the structure and then if you want to add some post you just have to put markdown files in.



1 thought on “Getting Started with Jekyll (on Windows!)”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s