How to Set Up Development Environment for Hugo Web Application

If you’ve just emerged from my blog creation tutorial or you’ve created a site with Hugo for other purposes, this tutorial is for you. When you create a web application which you deploy on the Internet, you must assume that people are going to access it. Having worked in multiple DevSecOps environments before, I envision hundreds, even thousands, of people accessing my web app at once, even as I make changes to it in the background.

Having said that, in web development, it is easy to write front end code which you think will render in a certain manner but ends up ruining your home page. You should strive to only allow this to happen in a development environment, independent of your live web application which the public can access. This is effective to maintain full availability of your application and avoid reputation damage by self-defacement.

Assumptions

This tutorial makes the following assumptions:

• Your production app is deployed from your Git repository through a continuous integration/deployment pipeline, either on GitHub or GitLab.
• You currently lack a development branch in your Git repo.

Tools and Techniques

In this tutorial, you will make use of:

• Git
• Hugo Version <= 0.90.0. (The reason for the version restriction will be discussed later)

Kickoff

Start off by creating a development branch in your Git repository. Base it off of the main branch and name it something indicative of its nature; dev for example. You will use this branch to push changes to your web application as you go along, leaving the production branch unaffected until the changes are satisfactory.

Once you’ve done that, clone your repo to your local machine and switch to the development branch via the command git checkout BRANCH_NAME.

Now, whenever you make changes to your web application, rather than hop onto the web browser and visit your site on the Internet, first deploy it on your local machine to see if the changes you’ve made are to your liking. To do this with Hugo, run the command hugo server -D from the Terminal.

At this point, if you run into errors related to failed template execution such as here, check your Hugo version and consider downgrading it to 0.90.0 or below. Hugo versions 0.91.0 and above are known to cause issues when trying to deploy a web app locally rather than through an online service such as Netlify. In particular, if you’ve had no trouble deploying your app into production on Netlify or other related services but you run into issues when trying to deploy locally, the Hugo version is the most likely cause.

If you’ve made changes to your web application with which you are satisfied at this point, it is time to push your changes to your dev branch if you have not done so already. You can do this from an IDE of your choosing or from the command line via the following commands:

git add .
git commit -m 'MESSAGE'
git push

Once you’ve pushed your final changes to the dev branch, merge your dev branch with the production branch. You can do this from GitHub or GitLab through a merge request, or you can accomplish it from the command line as such:

git checkout PRODUCTION_BRANCH_NAME
git merge DEVELOPMENT_BRANCH_NAME
git pull
git push

Once you merge, the changes you made on the dev branch will become changes to the production branch, which will automatically deploy.