Jekyll - a static site generator

Welcome to my new website! It’s been a while since I decided to do something different and let my previous hosting expire. Since then I’ve started building a blog a couple of times using WordPress as a CMS, but didn’t finish. So this weekend I decided to try something different and learn something new, and I ended up building this site using Jekyll and hosting it on Github Pages.

What is Jekyll?

Jekyll is a ‘static site generator’. In it’s simplest form this means that you can write posts in markdown, then run a command from the terminal and Jekyll will generate the required HTML. Pretty nice!

In terms of generating the whole website, Jekyll uses the Liquid templating language to pull different files together when it builds the HTML. The directory structure looks something like this:

.
├── _site/
|   ├── css
|   |   └── main.css
|   └── jekyll-a-static-site-generator/
|   |   └── index.html
└── index.html
|
├── _source/
|   ├── _includes/
|   |   ├── header.html
|   |   ├── article.html
|   |   └── footer.html
|   ├── _layouts/
|   |   ├── page.html
|   |   └── post.html
|   ├── _scss/
|   |   ├── _base.scss
|   |   └── _layout.scss
|   ├── _css/
|   |   └── _main.scss
|   └── _posts/
|   |   └── 2015-11-22-jekyll-a-static-site-generator.markdown
└── _config.yml

The _source folder is where the template files are, as well as the SCSS for styling the site and a config file. When you run ‘jekyll build’ the HTML is generated into the _site folder using variables set in the config.yml, (to set up the meta tags amongst other things), and the SCSS is compiled into CSS.

So in short, Jekyll is a system that uses a modular, template based file structure along with CSS pre-processors, and on build turns all of this into browser-readable code.

Why use Jekyll?

I’m hosting this site on Github Pages. What’s great about this is that if I want to publish a post or indeed any changes to this site, all I have to do is run ‘jekyll build’, then cd into the _site folder and push my changes to Github on the gh-pages branch. If I want to set up a local server to test changes locally before publishing, I can run ‘jekyll serve’ and navigate to localhost:4000 in any browser to view the site locally.

Now there is some degree of complexity to getting Jekyll set up in the first place. You have to set up Ruby, (already installed on OS X), and some dependancies in order to use Jekyll commands and depending on the theme you’re using, there may be different ‘gems’ (Ruby programs and libraries) that you need to install too. However there are numerous tutorials out there and Jekyll’s own documentation is pretty good.

I’m looking forward to using this setup more and learning more about the features of Jekyll and Liquid templates. If you’re looking for information on how to setup you’re own Jekyll blog, here are a few links to check out: