Setting up a Hugo blog using Github Workflow and Azure Blob Storage

In the following post, I am going to elaborate how I finally run my blog on Azure blob storage using static site generator Hugo. I also use Github Actions workflow to perform CI/CD by generating the site and publish to Azure blob storage. Github Actions provides 2000 free build minutes per month for private repo - and unlimited free build minutes if you use public repo in Github.

My Configuration

  1. Github, private repo that contains my Hugo blog and resources.
  2. Forestry, back-end CMS that provides web based content management editor functionality.
  3. Azure Blob, blob storage to host static file in Azure.
  4. Azure CDN, content delivery network from Azure for delivering high-bandwidth content and accelerate dynamic content.
  5. Cloudflare, CDN, firewall, ddos protection for web application.

Prerequisites

  1. Azure subscription
  2. Github account
  3. Git

With the prerequisites met, create a Hugo blog site repository in your Github account. Follow Hugo installation instruction here : https://gohugo.io/getting-started/installing/. Then configure CI/CD using Github Action to deploy the site to Azure Blob Storage and finally configure the CDN.

Understanding Manual Deployment

Setting up Hugo static website in Azure Blob Storage can be done easily from command line. Understanding the manual deployment process provides fundamental know-how later when we enable CI/CD.

Step-1 Create a Hugo static website

In my Windows 10, I use Scoop as package management to install Hugo. Previously I have been using Chocolatey but I found Scoop is more non-obtrusive and straight forward for me. You can read some of the Why Scoop here.

I open PowerShell command console, and run following commands to prepare my Hugo website

SET-EXECUTIONPOLICY remotesigned -scope currentuser
IWR -useb get.scoop.sh | iex
scoop install hugo-extended
scoop install git

Notes, that I install hugo-extended not just hugo.

For simplicity we start using Hugo Academic kick start, which is available here https://sourcethemes.com/academic/docs/install/. I like Academic themes for its completeness and rich feature. Using this theme, you can make the new website up and running quickly.

From the PowerShell console run following commands:

git clone https://github.com/sourcethemes/academic-kickstart.git SampleWeb
cd SampleWeb
git submodule update --init --recursive
hugo server 

You should be able to open web browser in http://localhost:1313 and see beautiful Hugo static website using Academic theme.

Step-2 Create Azure Blob Storage

I will use Azure Blob Storage to host the static website. We will need Azure subscription to create the blob storage in https://portal.azure.com. We can create the blob storage using Azure CLI or web interface. Since I don't want to install Azure CLI, I will just use web interface - otherwise if you have Azure CLI installed you can run following action using command line.

In Azure portal, click Create New Resource and search for Storage.

Click on the icon, and complete the settings. I use following setting in Azure Storage creation.

After sometimes, the storage account will be created. Open the storage account blade and click Static Website on the left navigation.

In the Static website configuration page, enter Index.html as the default Index document name, and click Save.

Step-3 Use Storage Credentials to Deploy

In Storage Account blade, click Access keys in the left navigation. Copy paste the storage credentials, shown in the figure below:

  • Storage account name
  • Key1

Open config.toml in SampleWeb folder and add following entry and save the file.

[deployment]
[[deployment.targets]]
   name = "AzureBlob"
   URL = "azblob://$web"

That entry tells Hugo to deploy to azblob (Azure Blob Storage) to blob name $web. You can read the detail in Hugo documentation for other options.

In the Command prompt, run following command:

set AZURE_STORAGE_ACCOUNT={{Storage account name}}
set AZURE_STORAGE_KEY={{Key1}}

Replace {{Storage account name}} and {{Key1}} with the storage account name and the key that you have copied previously.

Finally run following command to deploy:

hugo deploy --maxDeletes -1

Hugo CLI will create the static pages and deploy to Azure Blob Storage. If you forget what is the URL of the new website, you can open Static Website link in the Storage Account blade.

Avatar
Riwut Libinuko
Sr. Cloud Solution Architect

My research interests include distributed robotics, mobile computing and programmable matter.

comments powered by Disqus