Hugo blog on Azure Static Web App

calendar Jan 31, 2023 · 4 min read · Azure Hugo  ·
Share on: linkedin copy

Hugo Website on Azure static pages

When I start with my new blog. My requirements are:

  • Low nor No Costs,
  • Fast,
  • Less complexity,
  • High portbailitaly
  • Secure.

So I found a few open-source static website generators. I liked Hugo and started with it.

How to start with Hugo

What is Hugo:

Hugo Framework

Hugo is a general-purpose website framework. Technically speaking, Hugo is a static site generator. Unlike systems that dynamically build a page with each visitor request, Hugo builds pages when you create or update your content It renders Markdown docs into a website. This rendering is amazing fast and the site is also fast. For my work I did already write documentation in Markdown. If you want to start with a website it's definitely worth to take a look at Hugo

There are a lot of website with quick start quides, also the documentation is very good. So I skip this part. For a qucik start see the Hugo Quick start guide

Hugo and Git

For version control a lot off people use Git. I have created a github repository for my blog in my personal github account. This repo can be public or private. I think that reader of my blog understand Git, otherwise there a lot of tutorials on the internet. On a later moment we use the Github repo as a source for the hosting.

Hosting

You need some hosting for the website. Because Hugo has not database or other complex technology it's easy to host. I choose azure static pages because on my work I work also with Azure do I have a develop account in Azure. Azure static pages are free for personal use.

Hugo Framework

Azure Static Web Apps is a service that automatically builds and deploys full stack web apps to Azure from a code repository. The workflow of Azure Static Web Apps is tailored to a developer's daily workflow. Apps are built and deployed based on code changes.

See: https://docs.microsoft.com/en-us/azure/static-web-apps/publish-hugo

The static website has a free plan with a SSL certificate. https://learn.microsoft.com/en-us/azure/static-web-apps/plans

Setup Azure static pages

In the Azure portal go to static web app and create a static web app.

Create a static web app
Create a static web app

  • Fill in the required field. I made a seperate resource group for it.
  • The name is the name of my domain.
  • Choose for the free plan.
  • And as source for Github

Now you need to log-in in Github and authorize to static web app for your repository.

Create a static web app
Login in Github
Create a static web app
Authorize the static web app
Create a static web app
Enter your repository details

  • Organization: that you Github Account.
  • Repository: that is the repository where you blog is stored.
  • Branch: the main branch for the website.

Create a static web app
Select the Hugo Preset

In the build details You choose the preconfigured Hugo

When you finish and Review + Create, a new GitHub action will be set up and your site is being deployed! Now any time you commit a change to the main branch, it will get automatically deployed! The automatic configured pipeline does the deployment.

Create a static web app
Github Action Pipeline

Hugo Framework

GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline. You can create workflows that build and test every pull request to your repository, or deploy merged pull requests to production.

Help my site is broken

When you go the the dynamic generated url which you find in the Azure static web app and open your website in your favorite broken. It can look broken. Check the next paragraph.

Configure the site

Open the config.toml file in you favorite editor. I prefer to use VSCode. Set the baseurl to the generated url from the webapp or use a own domain. Push the changes and your site is not broken anymore.

1# set `baseurl` to your root domain
2# if you set it to "/" share icons won't work properly on production
3baseurl = "https://www.sethdaemen.nl/"  # Include trailing slash

Edit the baseurl to your needs.

Domain

It is possible to add your own domain. DNS hosting can at Azure or at your own provider. I use Transip for my domain and dns hosting. In the static webapp under Custom domains you can add your own domain. You need the make some modifications in your dns. You can find a good guide at Microsoft. See: Custom domains with Azure Static Web Apps

comments powered by Disqus