JAMstack Serverless Hugo Deployment

This site is built on Hugo which is really fast and easy to work with - even if you are only a basic developer. Here is how I setup my Hugo deployments. It’s actually really simple and it will help you save a lot of time updating your site.

Setup vscode to play nicely with Hugo

These will help you to see your syntax and build your site from vscode directly using the command pallete.

• Hugo Language and Syntax Support
• Better TOML
• Hugo Helper

Setup your Github repos for Hugo deployment

I setup 3 different repos on Github: 1. Hugo source code 2. Hugo-generated static HTML. 3. Hugo theme fork

I added the theme fork and html repos as submodules. One step from the linked instructions on GoHugo was not totally clear. I had to delete the public folder from my source repo and added the html repo as a submodule to keep it all clean. This is the actual command I used to create the public folder and setup the submodule: git submodule add -b master https://github.com/<Hugo-html-repo.git> public

Hugo bash script for single command deployment

Finally, I made a bash script to commit and push the code to the source and html github repos.

# commit-push-hugo.sh - commit and push hugo site for deployment
# usage: commit-push-hugo.sh commit-message
git add . && git commit -m "$1" && git push
cd public && git add . && git commit -m "$1" && git push

I put that script into my $PATH and made it executable by my user and now I am able to easily commit and deploy my changes to Github by typing:commit-push-hugo.sh commit-message from within my Hugo src repo root.

Netlify deployment

Part of my choice for using Hugo was that I had wanted to check out this new decentralized web deployment called JAMstack. This site has no central webserver. It runs completely on a CDN. The free CDN I’m using is provided by Netlify. Netlify is a CDN for static html files specifically designed for JAMstack. I added my html repo as a source for the site’s code. It is also possible to setup Netlify to run your Hugo deploy script.

If you have any quesitons or comments about this setup please feel free to reach out to me on Twitter.