<commit_before>+++
date = "2017-07-30T12:05:21+02:00"
title = "Using Gulp and UnCSS in Combination with Sass based Hugo themes"
description = "Using UnCSS and Gulp to build Hugo themes which pass the PageSpeed Insights test. Eliminate render-blocking CSS and minify CSS and HTML of a blog created with Hugo."
intro = "My own blog – you're currently reading – runs on Hugo and so far I'm very happy with it's simplicity and speed. Today I'll show you how we can use a Gulp build process to establish a convenient way to work on Hugo themes. Furthermore we will utilize UnCSS to enable building a blog which loads almost instantly and scores highly in the Google PageSpeed Insights test..."
draft = false
categories = ["Development"]
tags = ["CSS Architecture", "Sass"]
+++

In one of my previous articles I wrote about [setting up a basic blog with Hugo](https://markus.oberlehner.net/blog/building-a-blog-with-the-static-website-generator-hugo/). My own blog – you're currently reading – runs on Hugo and so far I'm very happy with it's simplicity and speed. Today I'll show you how we can use a Gulp build process to establish a convenient way to work on Hugo themes. Furthermore we will utilize UnCSS to enable building a blog which loads almost instantly and scores highly in the Google PageSpeed Insights test.

## Basic Gulp and npm setup

Depending on what kind of process you're following, there are essentially two ways of how you can setup the build process for your theme. If you want to create a reusable theme, not only for your own personal usage but the world, and you're planning to publish the theme on GitHub or some (Hugo) theme platform, you want to setup your theme as a separate project with a separate `package.json` file and a separate build process. On the other hand, if you want to create a build process for a theme only for your own personal usage and if you want to optimize the files created by Hugo in your build process, you might be better off creating a build process for the whole blog, directly in the root directory of your blog.

In this blog article we're going to examine the second approach. Because thats the way I setup my blog and this approach makes it easier to implement a build step which utilizes UnCSS to optimize the HTML files generated by Hugo.
<commit_msg>Improve phrasing<commit_after>+++
date = "2017-07-30T12:05:21+02:00"
title = "Using Gulp and UnCSS in Combination with Sass based Hugo themes"
description = "Using UnCSS and Gulp to build Hugo themes which pass the PageSpeed Insights test. Eliminate render-blocking CSS and minify CSS and HTML of a blog created with Hugo."
intro = "My blog – you're currently reading – runs on Hugo, and so far I'm very happy with its simplicity and speed. Today I'll show you how we can use a Gulp build process to establish a convenient way to work on Hugo themes. Furthermore, we will utilize UnCSS to enable building a blog that loads almost instantly and scores highly in the Google PageSpeed Insights test..."
draft = false
categories = ["Development"]
tags = ["CSS Architecture", "Sass"]
+++

In one of my previous articles, I wrote about [setting up a basic blog with Hugo](https://markus.oberlehner.net/blog/building-a-blog-with-the-static-website-generator-hugo/). My blog – you're currently reading – runs on Hugo, and so far I'm very happy with its simplicity and speed. Today I'll show you how we can use a Gulp build process to establish a convenient way to work on Hugo themes. Furthermore, we will utilize UnCSS to enable building a blog that loads almost instantly and scores highly in the Google PageSpeed Insights test.

## Basic Gulp and npm setup

Depending on what kind of process you're following, there are essentially two ways of how you can setup the build process for your theme. If you want to create a reusable theme, not only for your own personal usage but the world, and you're planning to publish the theme on GitHub or some (Hugo) theme platform, you want to setup your theme as a separate project with a separate `package.json` file and a separate build process. On the other hand, if you want to create a build process for a theme only for your own personal usage and if you want to optimize the files created by Hugo in your build process, you might be better off creating a build process for the whole blog, directly in the root directory of your blog.

In this blog article we're going to examine the second approach. Because thats the way I setup my blog and this approach makes it easier to implement a build step which utilizes UnCSS to optimize the HTML files generated by Hugo.

{'fraction_non_alphanumeric': 0.047010398613518196, 'fraction_numerical': 0.00779896013864818, 'mean_word_length': 4.368604651162791, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2146873', 'n_tokens_mistral': 1164, 'n_tokens_neox': 1094, 'n_words': 763}