I'm Matthew J. Morrison.

A Passionate, professional software developer & hobbyist; Language nerd & regular user of Unix, Python, Ruby & JavaScript.

Fork me on GitHub

Using CoffeeScript in Jekyll

October 10, 2014

I use Jekyll and Github Pages for my blog. I also enjoy using CoffeeScript. Historically, using the two together was a bit tedious. It involved manually compiling your Coffee source into JavaScript and checking it into source control. That is a manual process, and as such it is not only bad but evil. In the current version of Jekyll that is used on Github Pages CoffeeScript can be used with no manual processes, and quite easily as well.

As it turns out, it is very simple to use CoffeeScript with Jekyll. You simply create your .coffee file where you want your .js file to end up when your Jekyll site is generated. When you include the source into your .html file make sure you use the .js extension. For example, create the following file:

assets/js/example.coffee

Then add the following to whichever html file needs your compiled coffeescript:

<script src="/assets/js/example.js"></script>

The only trick to it is that your coffeescript source file must contain a special bit of syntax to tell Jekyll that it needs to be transpiled. Make sure at the very top of your .coffee file(s) contain the following 2 lines:

---
---

That's it. Now just commit and push your code and Github Pages will take care of the rest.

Learn from the masses, and then teach them. - Mao Zedong