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.
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!
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;
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:
Note, these are the plugins I’m using:
plugins: - jekyll-pug - jekyll-gist - jekyll-babel - jekyll-autoprefixer
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
Sass for CSS
Jekyll provides built-in support for Sass and can work with CoffeeScript via a Ruby gem
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.
I'm available for hire