Said's Blog

How to host a static website in Azure Blob Storage

June 15, 20225 min read
image

BLOB (Binary Large Objects) is a Microsoft Azure service that stores files. It is used to store and retrieve BLOBs, commonly known as files.

It simplifies the process of uploading, sharing, and managing online files along with off-loading static content from your webserver to reduce the load. You can use Blob for hosting static websites.

In this guide, I will show you the steps to follow in order to create a secured static website using Azure Blob Storage.

1- Create a Microsoft Azure Account

An Azure account can be created by following the steps below:

  1. In the Microsoft Azure page, click on the Start free button.
  2. Log in with your credentials if you already have an account. Otherwise, click on the Create one! link.

    3. Note: In this article, we will be using a free plan. But, if you want, you can purchase a paid plan by clicking on the Or buy now button.

2- Create Storage account

On the Azure Portal page, perform the following steps to create a storage account:

  1. Click on Storage accounts.
    2. Azure Portal page
    Image Credit: contentstack.com
  2. Click on + Create.
  3. Provide all the mandatory details.
    4. Fields to fill in
    Image Credit: contentstack.com
  4. Click on Review + create and then click on Create.
  5. Once the deployment process completed, click on the Go to resource button to visit the recently-created storage account’s page.
    6. Deployment process
    Image Credit: contentstack.com
  6. On the left navigation panel, click on Static website inside the Data management section.
  7. Enable the Static website option + Enter the name of the index document and the path of error document (e.g: index.html and 404.html) + And Save.
    8. Static website menu
    Image Credit: contentstack.com
  8. After saving, you’ll get two links: Primary endpoint and Secondary endpoint.

    9. Note: Note down the Primary endpoint as we will be hosting the website on this endpoint.

3- Upload files

  1. In the storage account you created previously, select Containers in the left navigation pane to display the list of containers.
  2. In the Containers pane, select the $web container to open the container's Overview pane.
    3. Image showing where to locate the website storage container in Azure portal
    Image Credit: docs.microsoft.com
  3. In the Overview pane, select the Upload icon to open the Upload blob pane and select the Files field within the Upload blob pane to open the file browser.
  4. Navigate to the file you want to upload, select it, and then select Open to populate the Files field. Optionally, select the Overwrite if files already exist checkbox.
    5. Image showing how to upload files to the static website storage container
    Image Credit: docs.microsoft.com

4- Enable Azure CDN for your static website

  1. Access to your storage account's overview page.
  2. Under the Security + Networking menu, select Azure CDN to open the Azure CDN page.
  3. Create a CDN profile by filling all mandatory fields and clicking on Create. Here is an example of endpoint configuration:
    4. Screenshot showing sample CDN endpoint configuration
    Image Credit: docs.microsoft.com

    Note: in origin hostname field, specify the Primary endpoint we noted during the creation of the Storage account.

  4. To verify that the CDN endpoint is configured correctly, click on the endpoint to navigate to its settings. From the CDN overview for your storage account, locate the endpoint hostname, and navigate to the endpoint, as shown in the image below.

5- Create a CNAME DNS record

    Before you can use a custom domain with an Azure CDN endpoint, you must first create a canonical name (CNAME) record with Azure DNS or your DNS provider to point to your CDN endpoint.

    Example of DNS configuration in namecheap
    Example of DNS configuration in namecheap

6- Add a custom domain to your CDN endpoint

  1. Browse to the CDN profile containing the endpoint that you want to map to a custom domain.
  2. On the CDN profile page, select the CDN endpoint to add the custom domain.
    3. CDN endpoint selection
    Image Credit: docs.microsoft.com
  3. Select + Custom domain.
  4. Add custom domain button.
  5. In Add a custom domain, Endpoint hostname, is pre-filled and is derived from your CDN endpoint URL: 'endpoint-hostname'.azureedge.net. It cannot be changed.
  6. For Custom hostname, enter your custom domain, including the subdomain, to use as the source domain of your CNAME record. And Click on Add

    7. Azure verifies that the CNAME record exists for the custom domain name you entered. If the CNAME is correct, your custom domain will be validated. It can take some time for the new custom domain settings to propagate to all CDN edge nodes.

7- Enable HTTPS

  1. Browse to the CDN profile select the endpoint containing your custom domain.
  2. In the list of custom domains, select the custom domain for which you want to enable HTTPS.
  3. Under Certificate management type, select CDN managed.
  4. Select On to enable HTTPS. And continue to validate the domain.
    5. Custom domain HTTPS status
    Image Credit: docs.microsoft.com