Host a Static website on Azure.

In this guide, I will explain how you can host your static websites on Azure storage accounts.

What is a static website? A static website is a website that you can use to serve static content that is made up of HTML, CSS, JavaScript, and images.

Microsoft Azure provides a service that you can use to host static web pages. This feature is known as Azure static website hosting on Azure cloud. In static website hosting you don't need a web server instead you only rely on the storage account.

Let's get started.

  • Sign in to the Azure portal using the URL:https://portal.azure.com

  • Sign in using your username and password.

    • Click on Create a resource

    • Under search services and marketplace, search for storage account, and click on it.

      • Go to storage account and click on create.

        Under the basic tab, ensure you have selected a subscription and a resource group. Note that all resources created on Azure should reside in a resource group and a subscription in that order.

        1. Give the storage account a name. The name should be globally unique.

        2. Set the region to East US.

        3. Leave everything else as default and click on Review + Create.

        Launch VS Code Editor.

      • Launch your Visual studio code editor and head over to the extensions.

      • Search for Azure storage and click install.

        • Wait for the download to be completed.

        • Head over to your storage account. Under data management, click on the static website.

          • Ensure to toggle the enabled option. Specify the index document as index.html and the error document as 404.html as the default error code. Click save.

Note the primary endpoint which we will use later to access the webpage.

  • Create a new folder on your desktop and create two HTML files for the static websites: Index.html and error.html

    When completed, right-click on the empty space inside the folder and select Deploy to static website via Azure storage.

    • A sign-in option will pop up on vs code, click on the sign-in link. The sign-in link will redirect you to your browser to sign in. Input your Azure portal sign-in credentials.

    • Select the storage account that we created earlier.

      • Our static files will now be deployed to Azure storage endpoint. Click on the browse option or copy the primary endpoint.

      • Head over to the browser and paste your link. Our static website is now deployed.

        • On completion ensure to delete the resources. Head over to resources groups. Select your resource which is the storage account. Select delete.

          Thats it. You can like and share the blog post with others.