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:
- BrowserSync
- SASS (super fast libsass)
- autoprefixer
- ClearCss
- Javascript Lint
- Uglify
- 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.
Copy the stock project to a local folder
$ git clone https://github.com/jbrodriguez/hugulp
Change directory to the newly created project
$ cd hugulp
$ 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 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
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.