Hugo + Gulp starter project


hugulp is a starter project for Hugo + Gulp.

It combines Hugo’s fast static site generation with Gulp’s flexibility to coordinate related tasks..

The main idea is to recreate the famous Ruby on Rails Asset Pipeline, which minifies, concatenates and fingerprints the assets used in your website.

This leads to less and smaller network requests to your page, improving overall user experience.

Read this blog post and this article for additional context.

This project Includes the following tools, tasks and workflows:

Install Hugo

Follow the instructions.

If Hugo is already installed, copy the folders in its current location to the hugo folder of this project.

Also, copy the following folders: - hugo/static/img to src/img - hugo/static/css to src/styles - hugo/static/js to src/scripts - any svg files to src/svg

Install Node

Follow the instructions

If Node is already installed, no further action is required.

Clone the repository

Copy the stock project to a local folder

$ git clone

Change directory to the newly created project

$ cd hugulp

Install npm dependencies

$ npm install

This runs through all dependencies listed in package.json and downloads them to a node_modules folder in your project directory.

This will also install a copy of gulp locally (rather than globally), which is generally preferable

Run gulp

Run the default gulp task with

$ npm run gulp

It will do the following: - 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:all task is invoked to generate the static site
hugo will run as if invoked like this:

$ hugo --config=./hugo/config.yaml -s ./hugo -d ./public --buildDrafts=true --verbose=true --baseUrl="http://localhost:3000/"
  • The reference:all 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

Publish step

There’s also a publish task you can run:

$ npm run gulp publish

It will perform all the steps above, but Hugo will be run with as follows:

$ hugo --config=./hugo/config.yaml -s ./hugo -d ./public"


For changes, send a PR.


Made by Juan B. Rodriguez, with a MIT License.

Please share the article or leave your comments.

Related Repositories



Hugo + Gulp starter project ...

Top Contributors

jbrodriguez JamesMcMahon mgladdish stijnsymons birnbaum