Blog changed to Hugo and Azure Static Web App

Hi All,

I’ was running my blog since 2007 on Subtext. At that Time i wanted to have a Blog that is using ASP.NET and MS SQL Server. To this day the Blog is running on an ol HP Server under my Desk at Home.

It worked fine, but the Project was archived in 2018 and has not seen much development since 2012. It had some quirks and was designed to work without SSL/TLS. The Website itself worked fine with SSL/TLS. But id had some Problems with the RSS Feed and the Admin Part did not work with HTTPS.

Requirements

• Run in Azure Cloud
• RSS Feed
• Needs to have a Search Functionality
• Track Blog Post Views
• Easy Workflow for me
  • Upload of Images
  • Editor
• Keep URL’s if possible

Step by Step

I’ve synced the Images in 2021 (about 1.9 GB) with Azure FileSync to a Azure Storage.

And a few Weeks ago i have moved the SQL Database also to Azure (Simply changed the Connection String in web.conf after the Migration)

New Approach

Since i love Microsoft Cloud i was thinking about how to Migrate the Blog to Azure Cloud. I had checked out several Options

• Using Wordpress on Azure
• Using ASP.NET Azure SQL Database and a Azure App Service
• Using a Static Website Generator like Hugo or jekyll or docusaurus

Analyzing the MS SQL Database i knew already that the Blog Posts where saved as HTML. And i was able to extract the Metadata such as Title, URL and Categorys of the Articles.

So i wrote a litte PowerShell Script to export the HTML Files into Folders with the Format YYYYMM. Also added the Front Matter Variables from the Meta Information of the Subtext Blog Database and keep the URL. And changed the URL’s of the Images (come to that later.) Over 2'300 Articles have been exported to HTML and with the Hugo “Front Matter” Meta Information.

I did choose the “Mainroad” Theme

Last Weekend i made some Test with hugo and i am pretty happy with the result

• Integrated Google Adsense
• Integrated Google Analytics
• Added Widgets
  • Clustermaps
  • Buy me a Coffee
• Configured RSS Feed
• Configured Custom 404 Error to Hugo 404 Error Page
• Enabled Disqus Comments
• Addet robots.txt and enabled the Sitemap

Due to the Limitations of the Free Plan with an Azure Static Web App i had to put my Images to a Storage Account.

Created a Static Website and added the Azure DevOps Repo and configured Hugo as a build Engine

Soon that was deployed

The Static Web App was ready but no content

It created automatically a Pipeline, so that when i push a new Change into the Repo the Website is built and deployed to the Static Website.

I’ve added my custom domain on Azure DNS

That updated the DNS Entry and created a SSL Certificate. Love that Automation!

Faster

A while ago i’ve setup a Website Monitoring with Azure Application Insight.

That has now changed it’s much faster

Architecture

The Architecture now does look like this

Upsides

What i like here is to write new Blog Posts in Markdown, use a Azure DevOps Repo and a Pipeline to publish the Blog Articles to the Static Website (My first Azure Pipeline by the way). And i just love how it works. The Blog now runs fully in the Azure Cloud 😍 On Top of that, the Blog should now be super fast! Let’s see if that improves the Search Engine Optimization (SEO).

Downsides

Of course there are also some downsides

• I have to upload the Pictures to the Storage Server first before Publishing a new Article in the Azure DevOps Repo. But i think that is Manageable.
• There is no integrated Search - it all relies on the Google Search
• There is no History of the Blog Posts for each Month as it was in Subtext
• Can’t see how many times an Article was viewed

RSS

The RSS Feed URL has changed: New RRS Feed

Regards
Andres Bohren