Static Website Hosting in Azure Storage
    • Dark
    • PDF

    Static Website Hosting in Azure Storage

    • Dark
    • PDF

    Article Summary

    #ServerlessTips - Azure Storage Account
    Author: Rahul Rai Microsoft MVP

    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.

    download 11

    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.

    download 12

    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.

    download 131

    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:

    download 141

    Fig4.Endpoint of the static website

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

    Fig5.Static website

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

    MicrosoftTeams-image 503

    Was this article helpful?