Static Website Hosting in Azure Storage

A static website is a website that can be loaded and served from a pre-defined set of files, such as HTML, CSS, and JavaScript files. Static websites do not require a web server to render content, which makes them faster and cheaper to host. You can host a static website on Azure Storage, a service that provides scalable and secure cloud storage for your data.

To host a static website in Azure Storage, you must enable your storage account's static website hosting feature and specify a default index page and an optional error page. You can use the Azure portal, Azure CLI, or Azure PowerShell to enable this feature and configure the settings. On the Azure Portal, visit the "Overview" pane of the storage account and select the "Capabilities" tab. Next, select the "Static website" option to display the configuration page for the static website.

Fig1.Enable the static website capability.

In the next pane, select "Enable" to enable the feature. Next, enter the name of the default HTML page displayed when a user navigates to the root of your website. Also, specify the page that should be displayed when the user attempts to navigate to a page that does not exist. Finally, click on the "Save" button to save the settings.

Fig2.Configure the website

Once you enable the static website hosting feature, you can upload your website files to a container named $web in your storage account. You can use any tool or library that can work with Azure Storage, such as Azure Storage Explorer, Visual Studio Code, or Azure SDKs. In the Azure Portal, select the "Containers" option from the left navigation pane to display the list of containers. Select the " $web " container from the results to open the container's overview pane. Upload the index and error documents you configured from this window in the previous step.

Fig3.Upload the documents for the website.

To view your static website, you can use the public URL of the website, which is based on the name of your storage account. You can also use a custom domain name or an Azure CDN endpoint to access your website. To locate the endpoint for your static website, select the "Static website" option from the left navigation pane and copy the address displayed in the "Primary endpoint" field as follows:

Fig4.Endpoint of the static website

Here is an example of a simple static website hosted in Azure Storage:

Fig5.Static website

You can refer to the feature guide on the Microsoft documentation website to learn more about this feature.