How to Set Up Web Page Minification With Jekyll

Published on Oct 21, 2026, filed under development, html, performance, optimization. (Share this post, e.g., on Mastodon.)

You’re running a Jekyll site—and want to speed it up and minify your HTML (as well as inline CSS and JS)?

Jekyll doesn’t minify HTML out of the box (at least not as with Jekyll 4.4.1). HTML Minifier Next (HMN) can take care of that, performing strongly when compared with other minifiers.

While HMN is a Node package and Jekyll is written in Ruby, that’s not a problem: A small Jekyll plugin runs HMN on your output after each build.

1. Install

Install HMN in your project (as a dev dependency):

npm i -D html-minifier-next

If your project doesn’t have a package.json file yet, run npm init -y first. As Jekyll would otherwise copy them to your output, exclude the package files in your Jekyll configuration (_config.yml):

exclude:
  - package.json
  - package-lock.json

You can skip installing HMN (and the package files) by pinning a version in the plugin instead, as in 'npx', '--yes', 'html-minifier-next@x.y.z' (see configuration below). npx then downloads HMN on first use—simpler, but without a lockfile integrity check, and fresh builds need network access.

2. Configure

Add a plugin file to your _plugins folder (e.g., _plugins/html-minifier-next.rb):

Jekyll::Hooks.register :site, :post_write do |site|
  system(
    'npx', 'html-minifier-next', # Runs the locally installed HMN
    '--input-dir', site.dest,
    '--output-dir', site.dest,
    '--preset', 'comprehensive',
    # Options: https://github.com/j9t/html-minifier-next?tab=readme-ov-file#options-quick-reference
    exception: true
  )
end

This is it: Your HTML now gets minified with every jekyll build, and with every regeneration when using jekyll serve.

For more minification, note that Jekyll’s Sass output isn’t compressed by default, either. You can change that in _config.yml, by setting style: compressed under sass:.

If you deploy with GitHub Pages’ built-in Jekyll build, note that it runs in safe mode, which ignores custom plugins. Build with GitHub Actions instead.

The plugin uses HMN’s “comprehensive” preset for a pretty competitive result, but you can switch to the “conservative” preset or fully customize minification (CLI options use kebab case, as in --remove-comments).

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m an engineering lead, guerrilla philosopher, and indie publisher. I’ve worked as a technical lead and engineering manager at various companies (e.g., Google); I’m an active web and tool developer (code optimization, digital defense), a contributor to web standards (like HTML, CSS, WCAG), and a book author (O’Reilly, Frontend Dogma).

I love trying things—in web development and engineering management, but also in politics and philosophy, where I hold to one idea in particular: that we can only be well if we take good care of everyone. Here on meiert.com I talk about some of my perspectives and experiences. (Interpret charitably but be critical—and share feedback and advice that makes my work better.)