Hosting a Static Website On Azure Storage with Azure CDN

4 min readMay 20, 2023

Our static website would have a custom domain with which our end users would be able to access our website from the public web.

Prerequisites

Resource Group
Storage Account
CDN

A resource group is a container where all related resources reside in. Now let’s proceed and create a resource group.

CREATING A STORAGE ACCOUNT

After creating the resource group static-website-demo-rg for this demo, the next step is to create a storage account.

Go to the newly created storage account resource which is staticwebsitestorage454 for this demo. This is where most of the tasks would take place. As shown in the image below, this is the interface you should see when you go to the storage account.

Click on capabilities and you see that the storage account at the moment is not configured for static website hosting and Azure CDN is also not configured as shown in the image above.

ENABLING STATIC WEBSITE ON STORAGE ACCOUNT

Now click on a static website and enable the storage account to host static content webpages.
Enter the index.html inside the index document block

Check the link https://staticwebsitestorage454.z13.web.core.windows.net/

Also, after enabling a static website a container $web is automatically created, this container would hold your web content files and folders.

Upload the website files

Check now https://staticwebsitestorage454.z13.web.core.windows.net/

Navigate to the primary endpoint, you will see the index.html page displayed.

CONFIGURING AZURE CDN

Now it’s time to configure Azure CDN, firstly let’s try to understand what Azure CDN is and its benefits to our end users.
Azure Content Delivery Network (CDN) is designed to send web content such as audio, video, images, and other files faster and more reliably to your end users using servers that are closest to the end users. This helps to increase speed and availability, resulting in significant user experience improvements.

Click on Azure CDN on the left pane under “security + networking*”* and create a new endpoint.
Give it a CDN profile name, select the pricing tier “Select Microsoft CDN (classic)” and give the CDN endpoint a name.
Origin hostname — You have to select the origin server from which the CDN endpoint pulls content. I would be using my primary endpoint which is “https://staticwebsitestorage454.z13.web.core.windows.net/"

Now proceed to create the CDN. See the image below