DEV Community

Cover image for Host Static Website on Azure Blob Storage
Seyi Lufadeju
Seyi Lufadeju

Posted on

Host Static Website on Azure Blob Storage

Introduction

Azure Blob Storage is a scalable, cost-effective solution for storing large amounts of unstructured data like images, videos, and documents. It can also be used to host static websites, such as HTML, CSS, JavaScript, and other client-side assets. This approach is popular due to its simplicity, scalability, and low cost.

Hosting a static website on Azure Blob Storage involves the following key steps:

  • Setting up an Azure Storage account.
  • Uploading your website files to a Blob Storage container.
  • Configuring the container to serve the website.
  • Configuring a custom domain (optional).
  • Enabling HTTPS (optional, but recommended).

This guide will walk you through each step in detail.

Step 1: Set Up an Azure Storage Account
Before you can host a static website, you'll need an Azure Storage account. If you don't already have one, follow these steps to create it:

Sign in to the Azure portal:
Go to Azure Portal and sign in with your credentials.

Create a new Storage Account:

In the left sidebar, click on Create a resource.
In the Search the Marketplace field, type "Storage account" and select it.
Click on Create.

Image description

Configure the Storage Account:

  • Subscription: Select the Azure subscription to use.
  • Resource group: Either select an existing resource group or create a new one.
  • Storage account name: Choose a globally unique name for your storage account. This will be used in your storage URL, so pick something memorable.
  • Region: Choose the region that is geographically closest to your users for better performance.

Image description

  • Performance: Select Standard (recommended for most static websites).
  • Replication: For a static website, you can use Locally-redundant storage (LRS) as it offers good performance and is cost-effective.
  • Review and create: Once you've configured your storage account, click Review + Create and then Create after validation passes.

Image description

Image description

Step 2: Enable Static Website Hosting
To serve the files as a static website, you need to enable the static website hosting feature in Azure Blob Storage.

Enable static website hosting:

In your Storage account's left sidebar, scroll to the Data Management section and click on Static website.
Toggle Static website to Enabled.

Image description

Configure index and error documents:

Index document name: Enter index.html (or the appropriate filename if your homepage is named differently).
Error document path: You can either leave this blank or enter 404.html if you have a custom error page for missing pages.
Save the configuration: After entering these settings, click Save.

Image description

Upload Your Website Files to a Blob Storage Container
Once the storage account is set up, you can upload the files for your static website (e.g., HTML, CSS, JS, images, etc.) to a blob container.

Image description

Once this is done, Azure will provide a primary endpoint URL for your static website. This URL will look something like:

Image description

You can open this URL in your browser to view your static website.

Image description

Top comments (0)