Hugulp, a Hugo + Gulp toolchain

Not all blogging engines are the same

There are basically two types of blog-creating engines:

  • Dynamic generation
  • Static generation

Hugulp

Having decided on Hugo, I created a workflow that would allow me to replicate the famous Ruby on Rails Asset Pipeline.

Folder structure
  • hugo
    Contains the standard hugo install. The content subfolder contains all Markdown documents which will become separate blog articles.
  • gulp
    Each file here describes a separate gulp task. This improves sharing and readability of the tasks.
  • src
    It’s the master copy of all the asset files (css, js, jpg, png, svg, etc.).
  • staging
    It holds processed assets, as an optimization step, so that specially images compression doesn’t need to run during each build.
  • The styles, scripts and images tasks get executed first to do the heavy lifting of compressing images and minifying css/js files.
  • The revision task runs next to fingerprint the optimized assets.
  • Then the hugo task is invoked to generate the static site
  • The reference task replaces all asset ocurrences with their fingerprinted versions
  • Finally, the browser is reloaded so that you can very quickly check the changes you made

Conclusion

There are other options besides Wordpress, so your hands are not tied.

--

--

I’m a Software Engineer, with an extensive background in Banking and Project Management

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Juan B. Rodriguez

Juan B. Rodriguez

I’m a Software Engineer, with an extensive background in Banking and Project Management