Bradley Taunt Designer & Developer

Swapping Jekyll for Hugo

Fixing Brain

I’ve quite enjoyed using Jekyll for my blog and utilizing the free hosting with Github Pages. It has always been an easy and straightforward process. But it was time for a change.

This site is now built through the wonderful Hugo static site generator and hosted on

I find it helpful if people share their experiences working with different technologies. So, I will explain my process below - blemishes and all.

Migrating content

I could have ran:

hugo import jekyll

to port over all my content into a new Hugo build. Since I have so few blog posts though, (for now) it seemed easier for me to pull the _posts folder into the new directory.

Once those posts were set, I only had to copy over my custom pages into their proper directories.

Not super smooth

I ran into a couple small hiccups while making this content transition:

  1. .Date.Format was irritating me until I realized you need to use the date structure “January 2nd, 2006”
  2. Updating the article front matter was something I overlooked caused some pondering
  3. Figuring out the best permalinks took more thought than I expected

Porting over my ET-Jekyll theme

It’s funny, I just open sourced my personal Jekyll theme ET-Jekyll not even a month ago and now I decide to switch site generators.

On the plus side, I’ll be able to open source this new Hugo theme soon for others to use. I’m calling it ET-Hugo. I know, I’m so original.

I was tempted to build out the theme using vanilla CSS and get a chance to use CSS variables, but Gulp makes life easier. Gulp allows me to automate compression of my compiled CSS files.

Setting up Gulp

This post isn’t a detailed explanation of Gulp, so I’m going to lazily paste my simple gulp.js file below:

let gulp = require('gulp');
let cleanCSS = require('gulp-clean-css');

gulp.task('default', () => {
    return gulp.src('themes/et-hugo/src/css/*.css')
        .pipe(cleanCSS({compatibility: 'ie8'}))

Pulling in the CSS

Once gulp runs and builds my compiled main.css, all I have to do is tell Hugo to grab the latest version. It looks in my header.html partial and places it inline (for best performance):

<style>{{ readFile "static/css/main.css" | safeCSS }}</style>


Testing and running a local version of my website is simple. I run the hugo command, then run hugo server to spin up a local server. Easy as pie.

Creating a deploy script

Finally, since I am hosting with, implementing a simple deploy flow was pretty easy:

cd <project directory>

This would then run my deploy script, pushing my updated changes from the public folder to my live site:

surge /public

Pleasantly happy

I’m quite happy with my switch from Jekyll to Hugo. It’s taken me out of my comfort zone and increased my knowledge of another great site generator. Next on my list: building out a Hugo theme built on top of blogdown.