One of the goals I had when I converted my blog to Jekyll was to speed up front end performance. To do this I wanted to minify the CSS and HTML files I deployed (I’m already manually handling the minification of the JS files). Luckly, grenadesandwich.com by Steven Merrill was already doing this and provided a good outline. I’m now able to use the command make deploy to generate the site, minify everything, and deploy it to the server.

To do all of this I take advantage of yuicompressor, htmlcompressor, make, and rsync. While make and rsync are installed on the system the Java jar files for yuicompressor and htmlcompressor are in a _build directory within my Jekyll site.

At the root of the site I have a Makefile containing the code snippet below (with some modifications for paths).

server:
  @@jekyll --server

render:
  @@echo "Building the site..."
  @@jekyll --no-future
  
minify:
  @@echo "Minifying the CSS..."
  @@java -jar _build/yuicompressor.jar --verbose --type css -o _site/path/to/style.css _site/path/to/style.css
  @@echo "Minifying the HTML..."
  @@java -jar _build/htmlcompressor.jar -r --type html -o _site _site

build: render minify

deploy: build
  @@echo 'Deploying site.'
  @@rsync -avq --delete-after _site/ sshAlias:/path/to/site/html

.PHONY: server render build minify deploy

You can get this as a gist.

The path to the css file and the location where rsync places the files are customized for my site and you should update those as well.