DEV Community

Cover image for Hosting a static website on Azure Blob Storage
Akinsooto Abidemi
Akinsooto Abidemi

Posted on

Hosting a static website on Azure Blob Storage

Azure Storage is a cloud-based storage service provided by Microsoft Azure, designed to store a vast range of data types in a scalable, secure, and cost-effective manner.

Azure Blob Storage is a service for storing large amounts of unstructured data such as text, images, videos, and backup files.
Blob Storage is often used to host websites, distribute media files, and store backup data.

So how do you host a static website on an Azure Blob storage?
Here’s a step-by-step guide to help you get started:

  1. Create an Azure Account If you don’t already have an Azure account, sign up at portal.azure.com
  2. Prepare Your Website Files Ensure you have all the static files (html, git, font, JavaScript, images, etc.) ready in a local folder.

3. Create an Azure Storage Account
Azure Storage provides a scalable and secure way to host static websites.

Go to the Azure Portal: Log in at Azure Portal.
Create a Storage Account:
Click on the “Create a resource” button.

Search for “Storage Account” and select it.
Click “Create”.

Image description

4. Configure the Storage Account:
Subscription: Choose your subscription.
Resource group: Select an existing group or create a new one.
Storage account name: Enter a unique name for your storage account.
Region: Choose a region close to your users.
Performance: Choose Standard.
Replication: Choose the replication option that suits your needs (e.g., LRS, GRS).
Click “Review + Create” and then “Create” after validation.

Image description

Image description

Image description

When deployment is done, click on go to resources.

Image description

5. Navigate to Static Website

  • On Data Management dropdown
  • Click on Static Website

Image description

6. Configure the Static Website

Enable Static Website
Enter index document name
Enter error document path
Then save

Image description
Azure will create 2 links to host the static website. The primary and secondary endpoint.

Image description

7. Upload Your Website Files
Go back to the Storage Account:
Then navigate to the “Containers” section under “Data storage”.
You’ll see a new container called $web (created when you enabled static website hosting).
Upload Files:
Click on the `$web

Image description

Image description
8. Upload files from the PC
click on Upload.
Go to where the website folder is located on the computer.
Highlight all the files in the folder.
Drag and Drop the files from the location to the provided box.

Image description

Image description
It will upload the blob storage, it might take a while to upload all the files.

Image description
9. Testing on a browser

When your files uploads successfully, then paste your primary end point on your browser.

Image description

I hope this step-by-step guide helped you host a static website on Azure Storage. Thank you.

Top comments (0)