Minify JavaScript during GitHub Pages build?

Question

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?

Veii

Did you explore some way to do this ? Do you have a github repo url ? – Thorathoracic

@DavidJacquel My GitHub Pages repo: github.com/theJollySin/thejollysin.github.io Did I explore some way to do this? Yes, but I have not found any way to put a build hook into the GitHub Pages build process, because it is an invisible process to me. But I refuse to believe there is no way to add a build hook, even for a static website. – Veii

Answer 1

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.

Seismic

Okay, this is a somewhat more serious change to my site than I was expecting. So I will try Travis and Grunt and see what happens. Thanks for the perspective. – Veii

The guide link doesn't open anymore – Indigence

Update: You can now of course use Github Actions to do the building. You just need a Github Actions workflow that, on detecting a push to the main branch, checks it out, performs the minification in-place, then pushes the changes to the gh-pages branch. Github Pages can then be configured to build based on the gh-pages branch only. Here is a working example of mine that does just this. – Harmful

Answer 2

If you are using Github to generate the site and display it, there is no option to do this because Github is strict about what it will process - for security.

A workaround is to do your compiling and processing locally, then push the resulting output to to gh-pages - which is happy to simply host static pages.

You can still use github to host the project. You just do not use Github to compile it.

Your dev process might be:

1. Check you're master and local match.
2. Do your work in dev mode.
3. Build in production.
4. Use grunt or other program to minify/uglify/etc the _site production files - outputting to a separate dist (distribution) folder.
5. Push the contents of the dist folder to your gh-pages.
6. Commit changes to the project files back to the master.

I am probably not making much sense, but perhaps this discussion might help more: https://gist.github.com/cobyism/4730490

Have fun!

Purdy

Answer 3

You can try to use my own minifier https://github.com/Mendeo/jekyll-minifier. It is written purely on liquid, so you do not need any additional gems install and it is fully compatible with GitHub Pages.

Starve

I will try it out and see how it looks! – Veii

Answer 4

My approach to this is a Github action that:

• checks out the main branch
• performs the minification/purging etc
• pushes the changes to a gh-pages branch

Then you just need to point Github Pages at the gh-pages branch rather than the main branch.

You'd need to choose appropriate CLI tools to perform the minifying/purging in the virtual machine that the action spins up. There are lots of options here. I'd suggest using packages that can be installed through node so that you only have to install that on the VM. For example:

• PurgeCSS: Removes unneeded CSS
• terser: Minifies JS
• csso-cli: Minifies CSS
• html-minifier: Minifies HTML

This is relatively straightforward with a Github action that looks a bit like this:

# A Github Action that minifies html/css/js and pushes it to a new branch
name: purge-and-minify

# Run on pushes to `main` branch
on:
  push:
    branches:
      - 'main'

jobs:
  checkout-minify-push:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      # Install CLI tools
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - run: npm install -g terser
      - run: npm install -g csso-cli
      - run: npm install -g html-minifier

      # Use CLI tools to minify, overwriting existing files
      - run: for i in ./js/*.js; do terser $i --compress -o $i; done
      - run: for i in ./css/*.css; do csso $i -o $i; done
      - run: for i in ./html/*.html; do html-minifier [--your-options-here] $i -o $i; done
      
      # Push changes to `gh-pages` branch
      - run: |
          git config user.name github-username
          git config user.email [email protected]
          git commit -am 'Automated minify of ${{ github.sha }}'
          git push --force -u origin main:gh-pages

Here is a working example of a similar process in a Github project of mine.

Harmful

Answer 5

Netlify is an alternative to GitHub Pages that integrates with GitHub (even private repos) and similarly publishes the output of Jekyll (or other static site generators). There are some limits on the free tier, but most individual users are unlikely to run into them.

You should be able to add one of the Jekyll minifier plugins listed here to accomplish your goals. Here are plugin installation instructions.

Please add a comment if this worked for you! I'd love to hear how it went.

Bootblack