Azure static web apps with Hugo

Nov 23, 2022 · 4 min read · Azure static wep apps hugo custom domain Obsidian Github ·

Obsidian + Hugo + Azure static app = True

My needs

I usually document things using markdown in Obsidian. There are many articles about Obsidian so I won't cover that here. Often I need to share my markdown notes with others. Obsidian has a lot of plugins to export notes in different formats like .docx, RTF, PDF and markdown. That's fine when sharing with a few recipients, but when you want to share with many a browser based sharing is better.

I wanted an easy way to share markdown notes. Obsidian does not offer easy sharing without paying. I wanted a solution to go from a markdown notes to a webpage on my custom domain. They way I do this I will explain below.

Tools and Services needed

The tools and services I use are:

Obsidian - to take and organize notes in markdown
Pandoc - universal document converter to be installed
Obsidian plugin - obsidian enhancing export (using Pandoc) to export markdown notes with attachments as input to Hugo
Hugo - https://gohugo.io/ - static website generator
Azure Static Web Apps: https://azure.microsoft.com/en-us/products/app-service/static/ free hosting of my static website that also supports custom domain over https
Github - https://github.com - to build my site and host my code for the site to build

Flow

Take notes in Obsidian using markdown
Export note using the plugin "obsidian enhancing export". Export as Hug format. This format will also export any images used in the notes. Destination is the content folder of your Hugo website content/post
Edit the generated md file in vscode to add Hugo specific meta data like date, tags, author and title.
Run Hugo server locally hugo server to debug and see that it looks ok
When I'm happy with the result. Add the new files to git with git add folder/ or git add file
Commit git commit -m "added new stuff"
Push to origin git push - which will trigger the Github action to build your site and it will be published when it succeeds.

Hosting - Azure static web apps

Azure static we apps can host a Hugo website. It's free for personal use and supports custom domains if you need. If you use Azure DNS Zone for the DNS settings of your domain it will set up a new DNS record for you and generate a certificate for you. I switched from my domain registrar DNS to Azure DNS as it was cheaper and also more convenient, to have everything in one place, as I use Azure a lot.

Here is an easy tutorial that describes how to create an Azure Static Web App using Hugo and github actions to deploy your site: https://learn.microsoft.com/en-us/azure/static-web-apps/publish-hugo

Errors when deploying site

The deploy using Github actions will fail if you follow the tutorial without adjusting one variable. You need to find the workflow file in GitHub in the .github/workflow/ folder there will be a random name yml-file:

Make sure to set the empty "" output location to "public" so that the build finds the static site generated because Hugo will generate the site to the public folder.

1output_location: "public" # Built app content directory

When you push to remote:

1git push --set-upstream origin main
2git push

a build will be triggered and if the build succeeds the Azure Static Web App site will be updated.

Hugo

Start the server with:

1hugo server -D

Add new posts to post. Depending of what theme you use the folder might differ:

1content/post/mypost.md

If you have the server running you can drop md files with any dependent attachments linked into the post folder in the content folder and Hugo will regenerate the site. This is very convenient.

Themes

There are many themes. The theme I use for this site is found here: https://themes.gohugo.io/themes/hugo-clarity/ Each theme might have it's own settings and structure that you can customize.