javascriptperformancebuildgithub-pagesjekyll-bootstrap

Minify JavaScript during GitHub Pages build?


I have a static website through GitHub Pages, built on Jekyll-Bootstrap. My little website includes a lot of JavaScript, and for maintainability I would like all of the JavaScript to remain human-readable in the GitHub repo.

But for the end-user of my website, I would prefer to minify the JavaScript.

Is there some way to build a hook into the GitHub Pages build process to minify/uglify JavaScript, so that the end user can download smaller files?


Solution

  • The GitHub pages build service cannot have any other code running on it other than Jekyll in safe mode and the small number of included plugins. This is done for security.

    Your best option is to use an alternative service to build your site and push the result back to GitHub. The source for the site would reside in the master branch and the compiled source in gh-pages.

    A suitable service for doing so would be one of many CI services, such as Travis CI. These are typically used to run software test suites on every push to a repo, but can be used to build your website and push the result back to you.


    The Jekyll docs have a guide for testing builds on Travis. Pushing the output isn't mentioned. You'll need a script in the after_success derivative in the Travis conf file. An example from a site I maintain.

    To authenticate your push the script will need access to your github personal access token. You can't just put this straight in the deploy script as it's a secret. See the Travis docs on encrypting environment variables.