When I choose free static website hosting plans, I would use GitHub pages in the past. But now, since the GA of Azure Static Web Apps (SWA), I now have another free of charge option. I've tried to host a few pure HTML/JS website as well as .NET Blazor WASM applications with Azure Static Web Apps. In this post, I'll share how to create a static website by SWA.

Azure Static Web Apps

Typically on Azure, if you want to host websites, you will choose App Service or VMs. They support major backend languages and frameworks like .NET, Python, NodeJs, etc. However, if your website is pure static without any backend code, using App Service or VMs would be overkill since they are too expensive for a simple static website. Azure Static Web Apps solves this need of static websites by providing a free or less expensive option for hosting just static pages. 

It can host pure HTML/JS websites that doesn't require code compilation as well as Angular, React, Vue or Blazor applications that need to be compiled. For GitHub pages users, you may like static page generators like Hugo, VuePress and Gatsby, SWA supports all of them.

In this post, I've already created a pure HTML website and upload the code to my GitHub repository. Let's see how to setup hosting and domain binding for this website on Azure SWA.

Create a Static Web App

Go to Azure Portal, find Static Web Apps service and click "Create".

Give it a name and select a hosting plan. I use free plan for this website. Then choose GitHub as source, click "Sign in with GitHub" to finish authorization.

Choose my GitHub repo that contains the source code of my website. For pure HTML site, leave "Build Presets" as blank. 

Confirm the details and click "Create".

Now, back to my GitHub, I can see Azure added a new commit in this repo that created a new GitHub Action to build and publish my website. Wait for a few minutes for this action to finish.

Now, go back to Azure Static Web Apps, click the URL that is generated randomly by Azure, my website is up and running now.

Bind Domain Name

The default URL https://salmon-mushroom-0dc8efe00.azurestaticapps.net is super ugly, I'm going to bind it to the domain name I bought. Azure Static Web Apps will provide a free HTTPS certificate just like GitHub Pages does.

Go to "Custom domains" menu in SWA. Click "Add", and enter my domain name.

SWA supports apex domain and sub domains. For apex domains, we have to verify it by a TXT record. In my case, ec4ever.net is an apex domain, so I need to click "Generate code" to get a TXT record value for validation.

Copy the generated code

My domain name is managed by Azure DNS. I need to add this TXT record to ec4ever.net. For other third party DNS providers, the steps are similar.

Then, bind an A record to the SWA application by setting an Alias record in Azure DNS.

Now, wait about 10-20 minutes for SWA to finish validation.

Once it's done, I can see "Ready" status for my domain name.

Now, I am able to access my static website by my custom domain name with HTTPS.

Conclusion

It's super easy to host a static HTML website free of charge with Azure Static Web Apps and GitHub. If you are interested in hosting Angular, Vue and other type of static web apps with REST APIs, please check Microsoft document for SWA. I've also successfully setup a .NET 5 Blazor WASM application running on SWA from my GitHub https://github.com/EdiWang/RMBCapitalization-Blazor