Hosting Static Website using Azure Storage Blob Part 2/2

In previous article, we created Azure Storage Account and hosted static website into Blob Storage. If you don’t read the article yet, please go here to check.

Step 0— Understanding High Level

Setting custom domain for Azure is not pretty straight forward. But don’t worry, I will explain you in very simple steps. The following diagram is high level diagram of the processing.

Unfortunately, Azure only support subdomains (example: www.yourwebsite.com) for domain mapping. If you want to use root domain (example: yourwebsite.com), we need to use Azure CDN.

In this article, we are going to use root domain and enabling HTTPS.

Step 1— Create CND Profile

Let create Azure CDN profile, Search “Front Door and CDN profiles” in main search bar and click “Create Front door and CDN profile”.

You will see the offering page and select “Explore other offerings” and then select “Azure CDN Standard From Microsoft (classic)”.

Click “Continue” button. Provide the “Subscription” and “Resouce Group” and Profile Name. For me, I will keep Microsoft CDN (Classic) Pricing tier. You can check different pricing tier here.

Create the CDN profile. Wait for a few second when deployment progress completed.

Now CDN profile is ready.

Step 2— Create CND Endpoint

After CND profile is created, we need to create an endpoint connection. That endpoint connection will establish mapping between your custom domain name and blob storage end point URL.

Instead of creating endpoint directly from CDN profile, we going to create endpoint from storage account. Some time, it has failure in creation.

Go to your storage account and scroll down until you see “Security + Networking” section. Click “Azure CDN”.

Since we already created CDN profile, select the “Use Existing” as below. Double check your Origin Hostname. We are creating endpoint for static website not for Blob Storage.

And then click “Create”. It will take a few minutes to propagate successfully.

When you go to check “Front Door and CDN profile”, you will see static website endpoint is running.

Copy the URL and check the accessible to the static website and the CDN endpoint is provisioned.

Everything is good. Let go mapping with your domain.

Step 3— Mapping Custom Domain

Before you can use a custom domain with Azure CDN endpoint, you need to create a CNAME record. A CNAME record is a DNS record that maps source domain name to a destination domain name. You can create CNAME record in Azure DNS zone or your DNS service providers (e.g. Namecheap, GoDaddy, Cloudflare).

In this article, I will create CNAME record inside Cloudflare DNS. There are two methods to map records: - one is for temporary, and another is for permanent. I will create a permanent record.

Login your DNS provider (for my case — Cloudflare) and go to DNS setting. Create new CNAME record entry for entry as follow. Content Value is the CDN endpoint hostname.

We have done configuration for DNS service provider side. Need to update on Azure Side.

Go to “CDN Profile” and click on endpoint we created in previous step. Click “Custom Domains” under “Settings” section and click “+Custom domain”.

For custom hostname, enter your custom domain including the subdomain.

Now the custom domain is configured successfully. By default, HTTPS is disabled and we need to enable manually.

Click on custom domain name to enable HTTPS.

If you have an own certificate, you can use yours and I will use CDN managed Certificate. Click the “Save” button. It will take few mins to generate validate certificate.

After those 4 steps is passed, the website is ready with your custom domain.

Step 4— Verifying Your Domain

Even since you can access your website with custom domain, some other regions may not be able to access it yet. It will take some time to get access from other regions. You can check using this URL.

Step 5 — Final thought

To be honest, setting custom domain name for blob storage account has a lot of steps and sometime there is a lot of error. We host our static web page especially for portfolio. Usually, most of portfolio page don't have massive user's request and even can host complete free except domain fee.

I used serval methods to host my portfolio without paying any extra fee. (Used GitHub for hosting) and will do in 2–3 steps. But Azure come with a lot of steps and need to use other Azure services (not free) to host static web page.

Hosting Static Website on Blob Storage also don’t have DevOps pipeline setup and you still need to manually deploy and manage your website.

In next article, I will share why we can do the same thing using Azure Static Web Apps instead of using Blob Storage and how to setup DevOps Pipeline for our website.

Thanks for reading. If you like my article, please follow me.