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.
This project Includes the following tools, tasks and workflows:
- SASS (super fast libsass)
- Image optimization (only changed images)
- Asset Fingerprinting using gulp-rev and gulp-rev-replace
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
If Node is already installed, no further action is required.
Clone the repository
Copy the stock project to a local folder
$ git clone https://github.com/jbrodriguez/hugulp
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
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
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.