Blog with hugo migrated to Azure Web App

Andres Bohren
Blog with hugo migrated to Azure Web App

Hi All,

About three years ago, i’ve changed my Blog to Hugo and Azure Static Web App. I was quite happy with that setup.

In the last few week’s i had more and more Issues with the Azure DevOps Pipeline - sometimes i was not able to release a blog Article for days. You can imagine how fustrating that is. And i don’t want to spend Time on trying to run the Pipeline multiple times. I would rather invest my time to write new Articles.

I’ve tried multiple things:

  • Changed the SKU from Free to Standard
  • Optimized Pagination in Hugo (pagerSize = 20) - that helped for a while
  • Converted old HTML Blog Articles from HTML to Markdown

The Site ist built with Hugo but the deployment failed - it just timed out. I found no way to dig deeper and see what’s the real issue.

I’ve built the Site locally

.\..\hugo.exe build --config config.toml --destination ./public --logLevel error

According to the Quotas in Azure Static Web Apps an App can get up to 250 MB and up to 15'000 Files. I am nowhere near that limit.

It’s less than 4'000 Files and the size is less than 90 MB - that should still fit in the Limits of Azure Static Web App.

I’ve zipped the whole folder and that resulted in a ZIP File with 23 MB.

I’ve tried alternate Solutions with swa cli - but that ended with the same result

swa deploy ./public --env production

Azure App Service

I’ve alredy had an App Service Plan for my other Websites. So i’ve created two new Azure App Service Instances

I’ve created a Dotnet - v10.0 App Service

In Azure DevOps > Project Settings > Service Connections > I’ve added a “Azure Resource Manager” Service Connection

With the Help of Copilot i’ve created a new YAML for the Pipeline

#name: Azure Static Web Apps CI/CD
name: $(Build.Repository.Name)_$(Build.SourceBranchName)_$(Date:yyyyMMdd)$(Rev:.r)

trigger:
- main

pool:
  vmImage: ubuntu-latest

variables:
  azureSubscription: 'Azure-Service-Connection'
  appName: 'prodblog'
  resourceGroupName: 'RG_PROD_MPN'
  packagePath: '$(Build.ArtifactStagingDirectory)/site.zip'

steps:
# Install Hugo 0.148.2 (extended)
- script: |
    HUGO_VERSION=0.148.2
    wget https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_Linux-64bit.tar.gz
    tar -xzf hugo_extended_${HUGO_VERSION}_Linux-64bit.tar.gz
    sudo mv hugo /usr/local/bin/hugo
    hugo version
  displayName: 'Install Hugo 0.148.2'

# Fetch Theme submodules
# - script: git submodule update --init --recursive
#  displayName: 'Fetch theme submodules'

# Build Hugo site
- script: |
    cd blog.icewolf.ch
    hugo --config ./config.toml
  displayName: 'Hugo build'

# Zip public folder (IMPORTANT!)
- task: ArchiveFiles@2
  displayName: 'Archive Hugo public folder'
  inputs:
    rootFolderOrFile: './blog.icewolf.ch/public'
    includeRootFolder: false   # ✅ critical for App Service
    archiveType: zip
    archiveFile: '$(packagePath)'
    replaceExistingArchive: true

# Deploy ZIP to Azure Web App
- task: AzureWebApp@1
  displayName: 'Deploy to Azure Web App'
  inputs:
    azureSubscription: '$(azureSubscription)'
    appType: webApp
    appName: '$(appName)'
    resourceGroupName: '$(resourceGroupName)'
    package: '$(packagePath)'

The deployment with the pipeline works

Now i’ve added a custom Domain to my Azure App Service and binding the Certificate

Since yesterday the Blog now runs on Azure App Service

The cost is mainly the Azure App Service that is shared among the four Websites.

Summary

It’s a little bit sad, that Azure Static Web App could not keep up. I liked the “Free” SKU. Now the Blog with the other Websites will cost me about CHF 25 per Month. I think its worth, because i don’t have to change my way of writing the Articles in Markdown and VSCode and use Azure DevOps for the Repository and the Pipeline. The whole thing was migrated in less than two hours. Probably could be done in 30 Minutes if you know what youre doing 😎 It took me a while to figure out how the Pipeline has to be adopted - but Copilot was a big help here 😉

Regards
Andres Bohren

Azure Logo

Web Logo