Static website hosting on Azure

In my last blog post, introduced a new blog series around the subject of Static Websites. I strongly recommend reading the introduction if you’re unfamiliar with this. In this post I’ll be looking into the possibilities of hosting your static website on Microsoft Azure. If you already have a static copy of your website at the ready, sign up for $200 in Free Azure credits and follow along.

Hosting options in Azure

In Azure there are a number of options for hosting your website. You could for instance run a webserver container or install your website software in a virtual machine. But we want the leanest option for running our stuff in Azure by using Platform-as-a-Service (PaaS) offerings. The traditional option (and more flexible offering that features a support for dynamic scripting like .NET or Java) is Azure Web App. Later Microsoft added Static website support to public storage accounts allowing you to serve HTML and images directly over HTTP. This year, they’ve added a combination of the two: Static Web Apps. Let us go over these services in more detail.

The new way: Static Web App

Let’s first start with the new and exciting stuff. During the digital Microsoft Build event in May, Microsoft announced the new App Service Static Web Apps. It combines all their lessons learned on the subject and it’s heavily based on DevOps code pipeline.

You store your website’s code in a code repository (for now only Github is supported, Azure DevOps support coming soon) and create a build-and-deploy pipeline that will parse any server-side code or build any website framework that’s needed for the deployment. Whenever you submit your code to the Github repository, the build pipeline will convert your code / framework and generate the static website output. This output is then transferred to Azure and hosted on their servers, ready to be served to end-users. You can use pretty much any framework that you want to generate the website, for instance Hugo works just fine but Microsoft also has demo’s on other frameworks like Vue or Angular.

If you want, you can just use it to serve HTML pages or the static output of your favourite framework but this is all a bit limited. That’s why Microsoft has added a couple of juicy extra’s to this service. It can support authentication of users (using Azure AD, Google, Github etc), routing of requests and supports custom domain names without having to manually setup a front-end like Azure CDN. On top of that, the service also allows you to include Azure Functions apps for you to program Serverless APIs. This makes is easy for your static website to have dynamic content based on real-time back-end driven data. You can of course use any service or API on your website that you want but it’s nice to see it included in one workflow.

I’ve been using Static Web App for a few projects now and I really like it. Sure it takes some getting used to and there are a few limitations. For instance, authentication/authorization is supported natively but you can’t assign it to specific people or Azure AD groups. You have to manually invite people, up to 25 people max. All this will change as the service is currently still in preview. The team is hard at work for the production release of this offering. A great getting started guide is found here.

The cheap way: Static on Storage Accounts

Near the end of 2018, Microsoft announced the launch of Static Website support on Azure Storage Accounts. In case you don’t know, storage accounts are a PaaS offering in Azure that allows you to store you files in various containers with different performance/resilience options. By creating a special $web container in the storage account and activating the Static website feature, Microsoft allows you to serve any file stored in that specific container. By default Azure will provide an url like http://staticwebsite.z3.web.core.windows.net/, not very sexy. In order to get full TLS/SSL support and true domain name support, you’ll have to match it with a CDN like Azure CDN or Cloudflare. A nice tutorial can be found on Microsoft Docs.

I’ve used this service for over a year and it works great, once you know it’s in and outs. It doesn’t feature any authentication or routing features or API integrations so that’s where the new Static Web App service really wins over this option. It is very cheap though: when combined with a free Cloudflare account, the Azure costs could be cents or dollars per month for a small to midsized website.

The traditional way: Web Apps

Of course you can still use Azure Web Apps to host any website you want, be it dynamic or static. It’s a very robust and feature rich service but it does come at a higher starting price, compared to the other services. You’re getting a lot of features but if you’re only hosting static HTML and a couple of images, I can’t really suggest this service anymore. I did have to use it for an internal project the other day because it was the only solution (for now) that provides Azure AD Group-based authentication to the whole site, out of the box. Using this service for hosting your static content is like buying a sportscar to go grocery shopping. Sure it can do it and do it really fast but a 2nd hand Honda would probably work just as well.

The perfect choice?

So what’s the best option? Well it depends. Hah, you saw that one coming. But really, although the new Static Web App service looks really promising, it’s still in preview right now and has some growing to do. For now, for production I would look at static websites on storage accounts with Azure CDN or Cloudflare. If you want any more features, you’ll have to resort to an Azure Web App. Be sure to keep an eye on the developments on the Azure Static Web App!

Upcoming blogposts

This post is part of a series. Here it’s an overview:

• Introducing a new blog series: Going Static
• Static website hosting on Azure (you’re reading this)
• Coming soon: Converting your WordPress to static
• Coming soon: Getting started with Hugo on Azure
• Coming soon: Migrating from WordPress to Hugo