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

Imagine monitoring actually built for developers

Billboard image

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay