Since most of my job is entails using Azure and the Microsoft dotnet stack it is time to retool my website.

Instead of a traditional web application, I chose to host the site in a static context, using the new (still in preview) Azure Static Web Apps, github for source repo and CI/CD build pipeline, and Hugo to generate it.

There are several benefits of using the approach.

  • Since I am the only one using the site its trivial to regenerate the static site each time there is a change.
  • No compute cost to render the page each time it is hit.

Hugo is a framework for generating static websites and is written in Go. There are a number of prebuilt themes that are freely available. And all of the content is written in simple markdown, which is human readable/writable.

Follow hugo’s documentation and create your site however you wish.

Next publish your application to your own github of choice.

  • In the azure portal create a new Static Web App resource.
  • When prompted enter allow access to your github account.
  • Azure will then allow you to select your project/branch.
  • Select Hugo as the type of application.

AzurePortal1

Azure will create a github CI/CD work flow that will trigger once you commit to the select repo’s branch. The hugo files will be published to the azure static web app automatically after this.

The static site auto assigns itself a random URL. You can use your own domain fairly easily. You have to update your CNAME record and point it to azure. This is all done from within the static web app’s settings.

AzurePortal1

I recommend creating a dev or preview branch/static site, and a production branch/site. This way you can preview any changes, and promoting to the live site is simply a PR into your main branch.

There appears to be the ability to include functions in the project as well, which I am excited to have a look at as well.