Making Jekyll workflow a bit better

I recently re-designed my personal site after not touching it since December 2015. When I sat down to re-design it, I felt like Jekyll's workflow and development experience suddenly felt...outdated. Mostly because a lot of the development I tend to do is JavaScript-based and (all fragility jokes aside), JS development in 2017 is pretty slick.

This post is essentially going to be a collection of resources and links, because I've not created anything new, I just found a few things along the way to make Jekyll-based development a bit slicker.

Git branches

If you want to embark on this journey, you're going to want to use Jekyll plugins, and some of them are likely to be custom ones you've installed. Great!

However

If you're like me, and like a lot of other people, you're going to be pushing your Jekyll site to GitHub for free hosting, using GitHub Pages. However, I hope you're not like me in forgetting that GitHub won't run custom plugins on the Jeyll sites they host on GitHub Pages. I remembered this after finishing my re-design, deploying, and staring at a blank site for ~10 minutes.

One option is to set up two branches in your GitHub repository; master and source, for example. Your source branch contains your Jekyll source files, where you build your site, and then master contains the Jekyll output; essentially static HTML files. This is what GitHub serves when people visit your site.

For full instructions and a better explanation, I followed this guide:

Custom Jekyll plugins with GitHub Pages

Note, these are the plugins I'm using:

plugins:
  - jekyll-pug
  - jekyll-gist
  - jekyll-babel
  - jekyll-autoprefixer

Babel for JavaScript

Next up, JavaScript. This one is super straightforward. Just use jekyll-babel.

This means you can write ES(whatever) code in, for example, js/main.js and Babel will transform it, as part of the Jekyll compilation, into _site/js/main.js. Perfect.

Sass for CSS

Jekyll provides built-in support for Sass and can work with CoffeeScript via a Ruby gem

Well.

This is actually in the docs so there's very little to say about it, so just in case you didn't realise!

Autoprefixer for less verbose CSS

Again, like Babel, this gem jekyll-autoprefixer Just Works™.

Pug for HTML

jekyll-pug requires a little more setup, like using npm, but it's fairly straightforward.

Browsersync for live reloading

This one was the trickiest to setup, and after failing to get Live Reload working, I found Blissful Static Site Development with Jekyll, BrowserSync, and tmux I figured Browsersync might be the way to go. This person's approach didn't quite work for me, and then I found Using browser-sync with Jekyll for fun and profit and between the two links, came up with a solution that worked for me.

Note, my current solution is:

$ jekyll serve --watch $ browser-sync start --files "_site/css/style.css" --files "_site/index.html" --proxy "localhost:4000" --reloadDelay "2000"

Thanks for reading

Not the most original post, but I hope collecting a few resources together in one place helps you make Jekyll development a little better.