How to Set Up Web Page Minification With Jekyll

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

This post originally used HTML Minifier Next. It was updated when HTML Minifier Next merged with and continued as HTML Minifier.

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 (HM) can take care of that, performing strongly when compared with other minifiers.

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

1. Install

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

npm i -D html-minifier

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 HM (and the package files) by pinning a version in the plugin instead, as in 'npx', '--yes', 'html-minifier@x.y.z' (see configuration below). npx then downloads HM 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.rb):

Jekyll::Hooks.register :site, :post_write do |site|
  system(
    'npx', 'html-minifier', # Runs the locally installed HM
    '--input-dir', site.dest,
    '--output-dir', site.dest,
    '--preset', 'comprehensive',
    # Options: https://github.com/j9t/html-minifier?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 HM’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 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, dxsrc). You’ll like my work if you value principled, pragmatic problem-solving. Let’s connect.