Introduction

In my search for a good blogging solution, I tried multiple Content Management Systems (CMS), dedicated blogging solutions, and even went so far as to develop my own. None of the solutions was what I was looking for.

Ultimately my goal was to end up with a lightweight website with blogging capabilities, and be cost-effective, as I don’t wish to monetize the site.

By coincidence, I saw the Azure Static Web Apps (Preview) offering.

After doing a few proofs of concept implementations, I was sure, it was exactly what I was looking for.

With Azure Static Web Apps, I could easily utilize the Hugo static website generator framework, as well as Azure DevOps as a DevOps Solution

A few bullets on what makes the three components great.

Azure Static Web Apps

Some key features of Azure Static Web Apps I’m using

• Web hosting for static content like HTML, CSS, JavaScript, and images.
• Free, as long the features in the free tier are enough.
• GitHub and Azure DevOps integration
• Globally distributed static content, putting content closer to your users.
• Free SSL certificates, which are automatically renewed.
• Custom domains to provide branded customizations to your app.

Hugo

Some key features of Hugo I’m using

• Completely free
• Amazing speed and flexibility
• Large free theme library
• Open-source with a large community
• Operating system agnostic

Azure DevOps

Some key features of Azure DevOps I’m using

• Free, as long the features in the free tier are enough.
• Complete DevOps solution
  • Pipelines (CI/CD)
  • Repositories with source control

Walkthrough

I have created the following walkthrough, as a guide with the assumption the reader has experience with all the components.

Hugo

Download and Install

In this example, I’m using a PC running Windows 11. It should be rather easy to follow the guide even if you are using another operating system, like Linux or macOS.

Chocolatey installation

If you are using chocolatey, simply run the following to install Hugo choco install hugo

Manually installation

Go Releases on the Hugo Github page, and download the build that corresponds to your system, and the theme you plan to use. In my case, it’s the hugo_extended_0.xx.x_Windows-64bit.zip release.

ℹ️ If a theme is chosen, that requires a specific version of Hugo. Download that version.

After the zip file is downloaded, extract it to a memorized location.

New site

Open a command prompt, go to the Hugo directory, and type the following to create a new site. In this example 2601.eu is the name of the site.

hugo new site 2601.eu

Now Hugo will create a new subfolder, with the name specified.

Theme

Go to the Hugo Theme site, choose and download the theme from the release page of Github.

ℹ️ Some themes require a specific version of Hugo, like Hugo Extended. This is important while setting up the Azure DevOps pipeline.

ℹ️ It’s easy to automate the download process using the git submodule command. This is out of scope in this article.

Once the theme is downloaded, extract the content to the themes folder in the site directory Hugo created. In my example, it is: “c:\Hugo\2601.eu\themes"

Rename the extracted folder to the theme name without version numbers.

Example: hugo-theme-stack-3.2.0 -> hugo-theme-stack

Example site

To get started, most themes come with an Example site, that can be copied directly into the Hugo folder.

Copy the content from “2601.eu\themes\hugo-theme-stack\exampleSite” to “2601.eu"

It’s now possible to start a local copy of the site. This is recommended to ensure everything works.

Use the following command to start the server

hugo server

After the server has started, the local URL is shown in the output.

Azure

Sign in to Microsoft Azure and create a new Static Web App

Fill in the required information and make sure to select the “Free: For hobby or personal projects” plan type.

In this scenario, the Deployment Type is “other”, as we are using Azure DevOps.

Go to the newly created Static Web App resource, and save the Deployment Token.

Save the URL from the browse button as well.

Azure DevOps

Project and Repository

Sign in to Microsoft Azure DevOps and create a new project.

Go to the newly created projects Repo, and initialize the main branch

Now Clone the project into Microsoft Visual Studio Code

Copy the content of the Hugo folder into the cloned project, and commit all the changes.

After the commit, push the content to the Repository.

Pipeline

Create a new Pipeline YAML file in the Repository with the filename: azure-pipelines.yml and insert the following code.

The code has a few steps and settings.

Under Parameters, change which version of Hugo you wish to deploy, and change the Hugo BaseURL to reflect your domain.

The pipeline will run under the latest Ubuntu image, with the following steps.

1. Download the selected Hugo version
2. Install Hugo
3. Build the website using Hugo
4. Deploy the website to Azure Static Web Apps, using the Deployment Token from earlier.

parameters:
- name: hugo_version
  displayName: Hugo Version
  type: string
  values:
   - 0.86.0
  default: 0.86.0

- name: hugo_edition
  displayName: Hugo Edition
  type: string
  values:
   - hugo
   - hugo_extended
  default: hugo_extended

- name: hugo_baseurl
  displayName: Hugo BaseURL
  type: string
  values:
    - https://www.2601.eu
  default: https://www.2601.eu

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- script: wget https://github.com/gohugoio/hugo/releases/download/v${{ parameters.hugo_version }}/${{ parameters.hugo_edition }}_${{ parameters.hugo_version }}_Linux-64bit.deb -O '$(Pipeline.Workspace)/${{ parameters.hugo_edition }}_${{ parameters.hugo_version }}_Linux-64bit.deb'
  displayName: Download ${{ parameters.hugo_edition }} v${{ parameters.hugo_version }} 

- script: sudo dpkg -i $(Pipeline.Workspace)/hugo*.deb
  displayName: Install Hugo

- script: |
    sudo hugo --baseUrl '${{ parameters.hugo_baseurl }}'
  displayName: Build website
- task: AzureStaticWebApp@0
  displayName: Deploy website
  inputs:
    app_location: 'public'
    output_location: 'public'
    api_location: 'api'
    skip_app_build: true
    azure_static_web_apps_api_token: '$(azure_static_web_apps_api_token)'

Create a new Azure DevOps Pipeline

Select Azure Repos Git and select the created Repository, and it should find the newly created pipeline YAML file.

Click edit, and create a new Variable called azure_static_web_apps_api_token with the Deployment Token from earlier as a value.

Now click Run, to test the Pipeline.

Check if the pipeline was executed successfully.

✔️ Now you have a free website based on Hugo and Microsoft Azure :)