Site assets minifying (or in another word compressing) helps to decrease site load and speed up browser loading time. Just like with CSS and JavaScript, HTML output can be compressed and minified by removing whitespace, new lines, comments and even removing certain optional closing tags, making for smaller file sizes.
Popular static site generator, Hugo version 0.47 introduced the --minify flag command which execute to minify the final HTML output to /public by simply running hugo --minify. Here, we are going to use the same dependency Minify written in Go language by Taco de Wolff. It’s extremely fast compare to other minify tools (and depends upon your site weight).
Following I have written simple procedures to Minify HTML pages after they have been generated locally with a static website generator like Jekyll.
Building site with Jekyll
First build Jekyll final production site with the following command line:
JEKYLL_ENV=production bundle exec jekyll build --profile --trace
Install minify deb package on Ubuntu
sudo apt-get -y install minify
Minify HTML files
minify --recursive --output "./_site/" --match=\.html --html-keep-conditional-comments --html-keep-default-attrvals --html-keep-document-tags --html-keep-end-tags --html-keep-quotes "./_site/" --verbose
Minify XML files
You can also minify *.XML files with following command line:
minify --recursive --output "./_site/" --match=\.xml --xml-keep-whitespace "./_site/" --verbose || true
Minify JSON files
You can also minify *.json files with following command line:
minify --recursive --output "./_site/" --match=\.json "./_site/" --verbose || true
Build, minify and deploy Jekyll site into GitHub Pages using GitHub Actions
If you have hosted your site in GitHub Pages, you can create a workflow for a continuous integration.
GitHub Actions are registered for a repository by using a YAML file inside the directory path .github/workflows (note the dot at the start).
Create a workflow file, say workflow.yml, using either the GitHub interface or by pushing a YAML file to the workflow directory path manually.
The base contents are:
name: My workflow
on:
push:
branches:
- main
env:
RUBY_VERSION: 2.7
jobs:
deploy:
name: gh-pages
runs-on: ubuntu-latest
steps:
- name: Clone repository
uses: actions/[email protected]
- name: Set up Ruby
uses: ruby/[email protected]
with:
ruby-version: ${{ env.RUBY_VERSION }} # Not needed with a .ruby-version file
bundler-cache: true # runs 'bundle install' and caches installed gems automatically
- name: Building site
run: JEKYLL_ENV=production bundle exec jekyll build --profile --trace
- name: Install minify deb package on Ubuntu
run: sudo apt-get -y install minify
# https://github.com/tdewolff/minify/tree/master/cmd/minify#usage
- name: Minify HTML files
run: |
minify --recursive --output "./_site/" --match=\.html \
--html-keep-conditional-comments \
--html-keep-default-attrvals \
--html-keep-document-tags \
--html-keep-end-tags \
--html-keep-quotes \
"./_site/" --verbose
- name: Minify XML files
run: |
minify --recursive --output "./_site/" --match=\.xml --xml-keep-whitespace "./_site/" --verbose || true
- name: Minify JSON files
run: |
minify --recursive --output "./_site/" --match=\.json "./_site/" --verbose || true
- name: Deploy
uses: peaceiris/[email protected]
if: success()
with:
allow_empty_commit: false
cname: yoursite.com.np
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_branch: gh-pages
publish_dir: ./_site/
After so much research and testings I have found, this is the best and fastest method to minify Jekyll’s output HTML files for your site.
If you search on Google you can also find another alternative, Jekyll layout that compresses HTML which is written in pure Liquid. But note that, I do not recommend using it because it slow down your Jekyll build time and has not been updated since long time.
