How to Deploy Hugo Static Website to IIS Using Git

Continuing the posts on Hugo website tutorial, after all the setup is done, the question now is about static site hosting. The reality is hosting a static website is very easy so you have a lot of flexibility in choosing your hosting and platform. In fact, you can use Github, Bitbucket or Gitlab to host your static website.

This post will show you how you can host your static website on IIS server using a git-push.

Prerequisites

1. Make sure IIS is setup. If you haven’t done so, make sure you check out the post to install IIS on Windows 10 which could be applied for Windows Server as well.
2. You need to have Hugo installed on your system. Check out this post if you still need to install Hugo.
3. Install Git. This process is also very straightforward, just head to Git website and follow its instructions to install it. You might also want to customize Git to work with your favorite text editor.If you decided to use Visual Studio Code, check out this post as the setup might be useful for editing and also publishing your Hugo website.
4. You have already created a Hugo new site in a folder and you have already committed all the files with Git with a .gitignore file which has at the minimum the following entry:

   # Exclude folder
   public/
   
   # OS
   [Tt]humbs.db
   .DS_Store
   

For this exercise, I have my laptop as the source where I install all the tools and to write and generate the static website. For the IIS host, it will be a Windows 10 VM that can be mapped from the laptop. You can substitute the mapping with SSH for a different hosting but the principle is the same.

Now that we get all the prerequisites and objective out of the way, here are the steps to setup our environment:

Hugo/Git Public Folder Setup

1. 1. Important: Hugo publish the website to a sub-folder public, so we also need to Git initialize and commit all the files in sub-folder public separately from its parents folder. Remember, we exclude the public folder in .gitignore file (see the prerequisites). So we’re tracking the published website separately. It is from within this public folder that we do all the setup described below.
   2. On your target server, setup a folder that you can use as a temporary repository. In this example, a folder C:\inetpub\Git\hugo-repo was created for this purpose.
   3. We will publish the static content to default folder C:\inetpub\wwwroot.
   4. From within Git Bash and within your Hugo public folder, add the temporary repository as a remote repository by typing the following command:

      $ git remote add prod //MACHINENAME/c$/inetpub/Git/hugo-repo
      

   5. From within Git Bash, go to the remote repository to initialize it:

      $ cd //MACHINENAME/c$/inetpub/Git/hugo-repo
      
      $ git init --bare
      

   6. Go to the repo folder and open the hooks folder and create a new text file called post-receive (do not put any file extension) and edit it with the following code:

      #!/bin/bash
      
      git --work-tree=//MACHINENAME/c$/inetpub/wwwroot --git-dir=//MACHINENAME/c$/inetpub/Git/hugo-repo checkout -f
      

      

If this sounds complicated, don’t worry about it as you only need to set this up once and forget about it.

Now every time you are ready to publish your Hugo website (i.e., by running the command “hugo”), go to your public folder, commit all the changes in Git, just do a Git push to prod:

$ git push prod master

The website will be automagically pushed to your IIS PROD and ready for public consumption.

We use this same exact method to publish an intranet site within our company. If there’s any step in this explanation is not clear, leave a comment below and I will try to improve the step-by-step guide in this post.

Further Reading

How to Install Hugo on Windows 10
How to Setup Visual Studio Code for Hugo Static Site Generator
How to Setup Naked Domain to Resolve in Cloudflare Pages

Downloads

Visual Studio Code
Git
Hugo