Explain your Hugo workflow for Development and Deployment!

tips & tricks
1

Let us know how you develop, test and deploy! I’m interested in knowing which different workflows are suitable and what you guys think about your current workflow. How could you improve? What does an ideal workflow look like to you?

2

My website is a simple personal site so I use a basic workflow.

  1. I maintain the source code for my site in a git repo: https://github.com/hnarayanan/harishnarayanan.org
  2. I have a standard Linux machine acting as a webserver. This is I setup and maintained using Ansible:
    https://github.com/hnarayanan/harishnarayanan.org/tree/master/setup
  3. When I am editing the site and writing content, I run hugo server --watch to keep an eye out for changes as well as auto-refreshing my browser. This also serves as the “test.”
  4. When done, I run hugo to build the site.
  5. I copy it over using rsync to my webserver. These last steps are encapsulated in a Makefile: https://github.com/hnarayanan/harishnarayanan.org/blob/master/Makefile
1 Like
3

This sorta reflects my current approach to building sites with Hugo. I’m moving towards creating everything as “theme” from the get go.

Hosting and CD

Netlify has really become my go-to because it takes less than a minute. I have multiple test/dev sites being hosted through their service, their customer service is the sh*&, and it hasn’t cost me a penny. I’m trying to get my employer to move some WP sites to their service to return their generosity through $$$. For the record, I have ZERO affiliation with this company. I just love them that much.

I also use Wercker for an internal-only Hugo site I built that’s hosted on AWS. Wercker is a great service, but it was considerably more complex to set up than Netlify, since the latter took care of CD and hosting for me. Once Netlify can provide scheduling, I might just move everything to that service since it removes additional chron, etc dev for me and I want to focus on front-end dev and content exclusively.

Assets

Image resizing is something that I hope will be part of Hugo’s future, but for right now, I use a gulp-based asset pipeline that includes some image manipulation. You can see it in the link for the theme starter above.

Improvements and Ideal Workflow

My “ideal” woul be greater standardization around content types in Hugo, but that’s a much trickier task than most people realize. Then themes could be much more plug-and-play, but I’m biased because managing content is my job.

4

Here’s a little summary of my Hugo workflow.

I basically use the Hugo server to test my edits as I make them and have a Gulp pipeline that compiles my SCSS into CSS and compresses my CSS and JS files. After my changes are made I run hugo.

For deployment, I use hugodeploy and run hugodeploy preview and hugodeploy push to preview and deploy my website via FTP. Everything that is deployed to my shared host is copied to a deployed/ folder that is separate from my public/ folder.

After deployment, I run a little shell script that I created to clear the CloudFlare cache and tell CloudFlare to serve fresh resources.

And I use Github and maintain a public repo of it. This is my first time using Hugo after moving from Wordpress and really enjoy how simple and quick everything is.

I’m on the fence about if this would be an improvement but a change to my workflow could be to deploy on my git pushes, especially if I’m only pushing changes to content. I haven’t looked too much into and have only found tutorials for people that use GitHub pages.