From Local Files to Live: Deploy Your Static Website Using Azure Storage

Introduction

Hosting a static website on Azure Storage provides a cost-effective, scalable, and secure solution for delivering lightweight, static content such as HTML, CSS, JavaScript, and images. With Azure's global architecture, you can guarantee quick load speeds for users worldwide and features like built-in redundancy and high availability ensure your website stays up and running. Azure Storage is a great option for developers, companies, and enthusiasts looking for a dependable platform for delivering static material because it also streamlines the hosting process by doing away with the requirement for server maintenance.

Procedure

Create an Azure Storage Account

1. Sign in to the Azure Portal.
2. Click Create a resource > Storage Account.
3. Fill in the required details:
   • Resource Group: Select or create one.
   • Storage Account Name: Enter a globally unique name.
   • Performance: Standard (recommended for static websites).
   • Redundancy: Choose a redundancy level (e.g., LRS, GRS).
4. Click Review + Create, then Create.

Enable Static Website Hosting

1. Go to your newly created Storage Account.
2. In the left-hand menu, click Data management > Static website.
3. Toggle Static website to Enabled.
4. Specify the index document name (e.g., index.html).
5. (Optional) Specify an error document path (e.g., 404.html).
6. Click Save.
   • Azure will generate a Primary Endpoint URL for your website.

Upload Website Files

1. In the Storage Account, navigate to Containers > select the $web container (automatically created when Static Website is enabled).
2. Click Upload and select your static files (e.g., index.html, CSS, JS).
3. Ensure the files are successfully uploaded.

Test Your Website

1. Copy the Primary Endpoint URL from the Static Website settings.
2. Open the URL in a browser to view your hosted website.