The javascripts resources manages all javascripts in the system.

Javascripts are placed either in the javascripts folder at the base of your website, or preferably within your theme's javascripts folder for modularity:

  • javascripts
    • base.js
  • theme-twitter
    • javascripts
      • theme-specific.js
      • default.js
      • app.js
    • media
    • stylesheets

**Note that theme-level javascripts will overload blog-level javascripts.

Loading Javascripts

Use javascripts.load mustache block helper to load javascripts:

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <meta name="author" content="{{ }}">
    {{# javascripts.load }}
    {{/ javascripts.load }}

Each file should be separated by a newline and be in the order you want them to load. Note the path is always relative to the javascripts folder(s).

Loading javascripts in this way allows us to better mange URLs as well as intelligently update file names based on any pre/post processing we may be doing as we'll see later.

Manual Loading

Manually reference javascripts in layouts using mustache:

<script src="{{ urls.javascripts }}/some-javascript.js"></script>

Note manually referencing javascripts is discouraged because they will be unregistered with ruhoh's asset manager.


Javascript urls are always name-spaced by /assets/javascripts/


Ruhoh natively supports filename fingerprinting based on the javascripts content. However, in order to update the javascript file references you must used the above dynamic-loading strategy.

Fingerprinting Example:

Javascript original URL: /assets/javascripts/app.js Javascript compiled URL: /assets/javascripts/app-351c927c9099207bd7c9db36cc193954.js

The reason for this is to always serve the latest javascript and not have to worry about browser-based file caching. However if the file does not change, the fingerprint will remain the same and the browser will benefit from the cached file.