Hosting Static Website on Azure using Azure Storage |Azure Storage| Developing Solutions for Azure | Dushyant Singh | Truth Power Info. | #Azure04

6 min readSep 4, 2021

You can serve static content (HTML, CSS, JavaScript, and image files) directly from a storage container named $web. Hosting your content in Azure Storage enables you to use serverless architectures that include Azure Functions and other Platform as a service (PaaS) services. Azure Storage static website hosting is a great option in cases where you don’t require a web server to render content.

Features

-Mapping a custom domain to a static website URL

You can make your static website available via a custom domain.
It’s easier to enable HTTP access for your custom domain, because Azure Storage natively supports it. To enable HTTPS, you’ll have to use Azure CDN because Azure Storage does not yet natively support HTTPS with custom domains. see Map a custom domain to an Azure Blob Storage endpoint for step-by-step guidance.

If the storage account is configured to require secure transfer over HTTPS, then users must use the HTTPS endpoint.

-Adding HTTP headers

There’s no way to configure headers as part of the static website feature. However, you can use Azure CDN to add headers and append (or overwrite) header values. See Standard rules engine reference for Azure CDN.

If you want to use headers to control caching, see Control Azure CDN caching behavior with caching rules.

-Multi-region website hosting

If you plan to host a website in multiple geographies, we recommend that you use a Content Delivery Network for regional caching. Use Azure Front Door if you want to serve different content in each region. It also provides failover capabilities. Azure Traffic Manager is not recommended if you plan to use a custom domain. Issues can arise because of how Azure Storage verifies custom domain names.

-Permissions

The permission to be able to enable static website is Microsoft.Storage/storageAccounts/blobServices/write or shared key. Built in roles that provide this access include Storage Account Contributor.

-Pricing

You can enable static website hosting free of charge. You’re billed only for the blob storage that your site utilizes and operations costs. For more details on prices for Azure Blob Storage, check out the Azure Blob Storage Pricing Page.

-Metrics

You can enable metrics on static website pages. Once you’ve enabled metrics, traffic statistics on files in the $web container are reported in the metrics dashboard.

To enable metrics on your static website pages, see Enable metrics on static website pages.

Feature support

3 Esayy steps

1-Website code
2-Azure Storage Exproer
3-Azure Portal access

Demo

Step 1 — Website Sample site:

You can download a free opensource website template from my GitHub repo. https://github.com/Dushyantsingh-ds/sample-site

Step 3 — Download Azure storage explorer

Manage your cloud storage on Azure

Upload, download, and manage Azure Storage blobs, files, queues, and tables, as well as Azure Data Lake Storage entities and Azure managed disks. Configure storage permissions and access controls, tiers, and rules.

Download: https://azure.microsoft.com/en-in/features/storage-explorer/

Step 4 — Setup Storage Account from Azure Portal

login page azure portal | Dushyant Singh

Create an Azure storage account.
1.1- Basic page setup
-Create a Resource Group
-Give your Storage account service name
-Select your Region
-Select Performance according to you your website size.
-Select your Redundancy option.

1.2- Advance page setup.(Optional)
On the Advanced tab, you can configure additional options and modify default settings for your new storage account. Some of these options can also be configured after the storage account is created, while others must be configured at the time of creation.
See: https://docs.microsoft.com/en-us/azure/storage/common/storage-account-create?tabs=azure-portal

1.3- Networking page setup.(Optional)
On the Networking tab, you can configure network connectivity and routing preference settings for your new storage account. These options can also be configured after the storage account is created.
See: https://docs.microsoft.com/en-us/azure/storage/common/storage-account-create?tabs=azure-portal

1.3- Data Protection page setup. (Optional)
On the Data Protection tab, you can configure data protection options for blob data in your new storage account. These options can also be configured after the storage account is created. For an overview of data protection options in Azure Storage.
See: https://docs.microsoft.com/en-us/azure/storage/common/storage-account-create?tabs=azure-portal

Data Protection tab Azure | Dushyant Singh

1.3- Tag page setup.(Optional)
On the Tags tab, you can specify Resource Manager tags to help organize your Azure resources. For more information, see Tag resources, resource groups, and subscriptions for logical organization.
See: https://docs.microsoft.com/en-us/azure/storage/common/storage-account-create?tabs=azure-porta

1.3- Tag page setup.(Optional)
When you navigate to the Review + create tab, Azure runs validation on the storage account settings that you have chosen. If validation passes, you can proceed to create the storage account.

If validation fails, then the portal indicates which settings need to be modified.

Review + Create tab Azure | Dushyant Singh

After completing the deployment of the service.
Enabling the Static website settings
-Go to Resource.
-Go Static website option under Data Management option.
In the Index document name field, specify a default index page (For example: index.html).
-The default index page is displayed when a user navigates to the root of your static website.
-In the Error document path field, specify a default error page (For example: 404.html).
-The default error page is displayed when a user attempts to navigate to a page that does not exist in your static website.
-Click Save. The Azure portal now displays your static website endpoint.

Step 5 — Uploading the website code.

We will use the Azure storage explore to upload the code.
-Login in to your Azure storage explore tool.
-Find your ~Web folder under the container option.
-Put your code in ~Web folder