How does an efficient deployment workflow with grunt look like?


I am fiddling with Hugo since the beginning of the year. I moved my old Wordpress website to HUGO, changed it and now let the website recreated by an agency. After all the website now looks great, because everything I wanted to see running on HUGO is now implemented. However, when new pages are created CSS and images are added to the site, resulting in a bunch of code that can be optimised. I am now looking for a deployment workflow that automatically runs Hugo, optimises the final site and then uploads it to the web-space. The first and last step are nobrainers. I used grunt for that task. I can run “grunt dev” to deploy first to the development site to check everything looks as expected and then run “grunt prod” to have it created and uploaded to the production site.

My issue is the optimisation part. I read a lot about processors here in the forums and am using now a bunch of grunt tasks. Mainly, I struggle with grunt-uncss, because it does not seem to get all selectors right from the site. Hence, the resulting CSS file does not fit and the site looks weird afterwards. Next thing are the images that should get minified automatically at best. But since the resulting CSS file is not created correctly the images can’t be rendered right either.

So, I wonder how does you manage the deployment process if used in conjunction with grunt? Is there anything that needs to be taken care of, like special prerequisites?


Grunt and Hugo

Hugo and Gulp
Hugo with Brunch

For me, Hugo with Gulp or brunch is much easier.

Hope this helps

1 Like

Thanks Beny,

this is very helpful! I will try them to see what works best for me and my situation.


I agree with @Beny. Gulp is much easier. I haven’t had the chance to update this in quite a bit, but it might give you an idea of how to get started with Hugo and Gulp: