Using CoffeeScript in GitHub Pages

Setup

First, follow these instructions:

• Create a new GitHub Pages site
• Add a theme to your GitHub Pages site with theme chooser
• Configure the publishing source for your site to gh-pages

Next, follow the instructions for customizing your theme’s HTML layout. Be sure to use the theme you added with theme chooser; you’ll create a new _layouts/default.html file using the same contents as the theme.

Configuration

Follow these instructions for testing the Pages site locally. The repo include some “convenience” scripts for bootstrapping and serving up the site.

Ensure that your Gemfile is created:

# https://bundler.io/gemfile.html

source 'https://rubygems.org'

gem 'github-pages', group: :jekyll_plugins

As well as your _config.yml being updated to use CoffeeScript:

# I chose this theme, but yours could be completely different 😉
theme: jekyll-theme-minimal

plugins:
  - jekyll-coffeescript

The CoffeeScript

Create a new file, assets/js/index.coffee:

---
---

# Source: https://coffeescript.org/#introduction
# Assignment:
number   = 42
opposite = true

# Conditions:
number = -42 if opposite

# Functions:
square = (x) -> x * x

# Arrays:
list = [1, 2, 3, 4, 5]

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

# Splats:
race = (winner, runners...) ->
  print winner, runners

originallyCompiledFromCoffeeScript = true 

# Existence:
console.log "This alert was originally compiled from CoffeeScript!" if originallyCompiledFromCoffeeScript?

# Array comprehensions:
cubes = (math.cube num for num in list)

Some important observations:

• Internally, Jekyll compiles your site and outputs the files to the _site directory. _site includes an assets/js/ directory by default, so we can take advantage of the pipeline and include our own CoffeeScript files within ./assets/js.
• The two --- markers at the top of the CoffeeScript file are important for Jekyll to recognize these are assets to be compiled. Read more in Jekyll’s Docs: Content > Assets.

Last, incorporate the file in the _layouts/default.html created earlier:

    <script src="/using-coffeescript-in-pages/assets/js/index.js"></script>

Run the site – locally or on GitHub Pages itself – and open your browser’s JavaScript Console. You should see the following message logged:

"This alert was originally compiled from CoffeeScript!"

💃