Hosting a static site in Microsoft Azure is quite easy. Since it is possible to use Azure Storage to host a static site an App Service is not needed for that. To also add a custom domain with a free and managed SSL certificate Azure CDN can be used. In this post I’ll show how to create those two services via the Azure CLI to host a static site.

First we need to create a resource group, which holds the needed resource for the static site.

az group create \
    --name "rg-mystaticsite" \
    --location "westeurope"

Create and prepare Storage Account

After that we can create an Azure Storage account. It is important to create a general-purpose v2 (--kind StorageV2) storage, since only this version can serve static sites.

az storage account create \
    --location "westeurope" \
    --name "stmystaticwebsite" \
    --resource-group "rg-mystaticsite" \
    --sku Standard_LRS \
    --kind StorageV2 \
    --encryption-services blob

To actually have static site support, we need to enable the static site feature on the Azure Storage account. We can configure which is the index document (--index-document) and which is the document to serve on a 404 (--404-document).

az storage blob service-properties update \
    --account-name "stmystaticwebsite" \
    --static-website \
    --index-document index.html \
    --404-document 404.html

This command will create a new “magic” container “$web”. This container will be used to serve the content of the static site. We can now query the primary endpoint URL which then we use to configure Azure CDN.

az storage account show \
    --name "stmystaticwebsite" \
    --resource-group "rg-mystaticsite" \
    --output tsv \
    --query "primaryEndpoints.web"

Custom domain without SSL

If we only need a custom domain, but we do not need SSL for that, we can configure the custom domain directly on the storage account. To use a custom domain for Azure Storage we need to create a CNAME record with our DNS provider that points from the domain (like staticsite.mydomain.com) to the domain we queried in the previous step (like stmystaticwebsite.z6.web.core.windows.net). After that we can set the custom domain on the storage account.

az storage account update \
    --name "stmystaticwebsite" \
    --resource-group "rg-mystaticsite" \
    --custom-domain "staticsite.mydomain.com"

Custom domain with SSL

To have a custom domain with SSL Azure CDN can be used to solve this. Azure CDN provides free managed SSL certificates. First we need to create an Azure CDN profile.

az cdn profile create \
    --name "cdn-mystaticwebsite" \
    --resource-group "rg-mystaticsite" \
    --sku Standard_Microsoft

After we have create an Azure CDN profile we need to create an Azure CDN endpoint. The endpoint will point to the Azure Storage URL which we have queried in the previous step and serve and cache the static site.

az cdn endpoint create \
    --resource-group "rg-mystaticsite" \
    --profile-name "cdn-mystaticwebsite" \
    --name "cdn-ep-mystaticwebsite" \
    --origin "stmystaticwebsite.z6.web.core.windows.net" \
    --origin-host-header "stmystaticwebsite.z6.web.core.windows.net" \
    --enable-compression true

Once the profile is created we need to query the domain, in order to create a CName record.

az cdn endpoint show \
    --resource-group "rg-mystaticsite" \
    --profile-name "cdn-mystaticwebsite" \
    --name "cdn-ep-mystaticwebsite" \
    --output tsv \
    --query hostName

In order to use a custom domain for Azure CDN we need to create a CNAME record with our DNS provider that points from the domain (like staticsite.mydomain.com) to the domain we queried in the previous step (like cdn-ep-mystaticwebsite.azureedge.net). After that we can set the custom domain on the Azure CDN profile. After that we can add the custom domain to the Azure CDN profile.

az cdn custom-domain create \
    --resource-group "rg-mystaticsite" \
    --profile-name "cdn-mystaticwebsite" \
    --endpoint-name "cdn-ep-mystaticwebsite" \
    --name "mydomain" \
    --hostname "staticsite.mydomain.com"

Once the custom domain was validated and added, managed SSL can be enabled. Unfortunately at the time of writing there is a bug in the Azure CLI which prevents the command to work, so you need to enable SSL via the portal.

az cdn custom-domain enable-https \
    --resource-group "rg-mystaticsite" \
    --profile-name "cdn-mystaticwebsite" \
    --endpoint-name "cdn-ep-mystaticwebsite" \
    --name "mydomain"

To enable SSL on the custom domain via the portal, navigate to the Azure CDN endpoint, click on the custom domain and enable “Custom domain HTTPS”

Summary

Et voila, we now have a static site up and running in Azure. Just with a few commands and just a couple of minutes we can create and configure a static site in Azure! The hosting via Azure Storage and Azure CDN is very cheap. By the way, that is how my blog is hosted 😉.