How I built this blog (and everything that went wrong)

Table of Contents

I’ve wanted my own corner of the internet for a while. Somewhere to write down what I’m learning about cloud and infrastructure, mostly so future me can find it again. This week I finally built it, and since that’s what this blog is for, here’s how it went.

What I used #

Hugo to turn Markdown files into a website
Congo as the theme (I started on PaperMod and switched, more on that below)
GitHub to store the code
Azure Static Web Apps to host it, on the free plan
Bicep to create the Azure resource
GitHub Actions to build and deploy on every push
Cloudflare for the domain

The whole thing costs me about $10 a year, and that’s just the domain.

The setup, step by step #

1. Hugo on Windows. winget install Hugo.Hugo.Extended, plus Git. You want the extended version. Most themes need it, and the plain one is an easy mistake to make.

2. A new site and a theme. hugo new site, then the theme added as a Git submodule rather than copied in. The theme stays linked to its own repo, so updating it later is one command.

3. First post and a local preview. hugo server -D serves the site at localhost:1313 and reloads every time you save. This is where I spent most of my time.

4. Push to GitHub. Nothing special here. I added a .gitignore so Hugo’s generated public folder never gets committed.

5. Azure, with Bicep. Instead of clicking through the portal, I wrote a short Bicep file describing one Static Web App on the Free tier. One az deployment group create and it existed. The file is about 15 lines, and if I ever need to rebuild the whole thing, it takes a minute.

6. GitHub Actions. A workflow runs on every push to main. It checks out the code (theme included), installs Hugo, builds the site and uploads the public folder to Azure using a deployment token stored as a GitHub secret. After the first green run, the site was live on a random azurestaticapps.net address.

7. A real domain. I bought prempanjala.com on Cloudflare, mainly because they sell at cost and the renewal price is the same as the first year. Then I added a CNAME for www, a TXT record so Azure could check I own the domain, and a CNAME on the root. The one thing to keep in mind is Cloudflare’s proxy has to be off (grey cloud, “DNS only”), or Azure can’t validate the records. The root domain sat on “Validating” for a while, so I left it overnight and it was ready in the morning.

Things that went wrong (the useful bit) #

My first post broke the build. I’d typed my text inside the +++ front matter block, and Hugo tried to read my sentence as a setting. Settings go between the +++ lines, writing goes below.
az login said I had no subscriptions. I did. I just had to log in with --tenant and my tenant ID.
My Bicep deployment “succeeded” and created nothing. Notepad hadn’t actually saved the file, so I’d deployed an empty template. That was the moment I moved to VS Code.
I ran git add . in my user folder instead of the project. Git tried to add my entire Windows profile. Nothing got committed, but I check which folder I’m in now.
VS Code couldn’t find git. It had been open since before I installed Git. Restarting it fixed it.
My profile photo worked locally but not on the live site. Windows doesn’t care about capital letters in file names. The Linux build server does.

None of these were hard once I knew what was going on, but each one cost me a few minutes of staring at the screen.

Why I switched themes #

PaperMod is clean and fast, and it got me started. But it felt a bit plain for something that’s half blog, half portfolio. Congo gave me a profile homepage with my photo, colour schemes, dark mode and built-in search without writing any CSS. Switching was mostly a case of moving my settings into a new config folder.

What’s next #

Writing actual posts, mostly. I’ll be putting down notes on Azure and infrastructure as I learn them. If you’re thinking about starting a blog, this setup is cheap, easy to update, and you pick up a bit of Git, infrastructure as code and CI/CD along the way.

Thanks for reading.