DEV Community

Cover image for A step-by-step walkthrough on how to host a Static Website on Microsoft Azure Blob Storage
Ikponmwonsa Okundigie
Ikponmwonsa Okundigie

Posted on

A step-by-step walkthrough on how to host a Static Website on Microsoft Azure Blob Storage

In Azure Storage are designed to store various types of data, including structured, semi structured and unstructured data. Blob Storage is specifically optimized for storing large amounts of unstructured data, like text or binary files. Azure allows you to upload your static website easily, share its link anywhere, and make it accessible to anyone.

Hosting your static website on Azure is free, but you'll need to pay for the storage account. Azure ensures data security using encryption techniques. This article provides step-by-step instructions with screenshots to help you host your static website successfully through Azure and visual studio code. Just follow these steps to get your static website up and running.
Steps – Hosting a static website with Azure Storage

STEP 1
Open your Google drive link then click on mywebsite to download the file to your PC.
Image description

STEP 2
Click on your Download tab and locate the
mywebsite-20240629T172754Z-001 file to extract the file.

Image description

Install Visual Studio Code on your desktop.

Image description

STEP 3
Open your File in the visual studio code then Click on file at the top -left corner of your Visual Studio Code Click on Open file and select the folder that houses your static website codes and data.
Click on your file drop-down and click Index.html

Image description

Image description

STEP 4
A. Change only white text on command line 7 and
47 to your name
B. Change orange text on command line 59 from
index.html to about.html to test run and see
when it’s deployed and not part of personal
information to change.
C. Edit command line 92, 93 and 109 to reflect
your name and other details.

Image descriptionImage descriptionImage descriptionImage description

D. Click on your file drop-down and click 404.html as
the error page.
E. Change only white text on command line 7 and 47 to
your name.

Image descriptionImage description

To access Azure, you need to log in to your Azure account using your credentials.
Search and Navigate to Storage Accounts and then click on Create
Image description
Image description

To set up a Storage Account

  1. Go to the Basics tab, under Project details and ensure the correct subscription is chosen. From the resource group list, select azurestorgaeRG or create a new one if needed.
  2. Enter a unique name for the Storage account.
  3. Choose a region for its location.
  4. Select Standard for performance.
  5. Choose Geo Redundant Storage (GRS) for redundancy.
  6. Proceed to the next step or adjust other settings if necessary; otherwise, keep them as default.
  7. Click on Review + Create to finalize the setup. Image description

Validation
Before proceeding, validate the configuration of the storage account to ensure everything is set up correctly. If the configuration is correct, the option to create the storage account will be available. If not, review all configurations thoroughly before clicking on the Create button.
Image description

Go to Resources
Image description

STEP 5
To find the Static Website settings:

  1. Click on Data Management dropdown.
  2. Select Static Website Image description

To set up the Static Website

  1. Enable the Static Website feature.
  2. Enter the name of the index document.
  3. Enter the name of the error document. Afterward, Azure generates two links: Primary and Secondary endpoints. Copy the Primary endpoint link. Azure also creates a storage container named $WEB to host the static website; click on it. After that two option appears on the screen (Disable and Enable), Click on the Enable.
  4. Click on Save icon for your changes. Image description

Go to Containers

  1. Open the Data storage dropdown.
  2. Select Containers
  3. Click on $WEB Image description

To upload files from your PC

  1. Click on Upload
  2. Navigate to the folder on your computer where the website files are located.
  3. Select all then Drag and drop the files from this location into the designated box.

Image description

To test run on a browser
When your file is successfully uploaded then paste your primary link on your browser.
At this point your Static Website is ready.
Image description

STEP 6
Connecting your static website to your Azure Account through Visual Studio Code
Click on the Azure extension to install your Azure account and Azure Storage
Image descriptionImage descriptionImage description

Click on explorer then drag the path and right click to deploy to static website via Azure storage to sign in to Azure account.
Image descriptionImage descriptionImage description
Click on the Resources drop- down and then click on the Azure subscription drop- down
Image description
Next click on the storage account drop-down
Image description
Click on Deploy to the static website via Azure storage
Image description
You will be instructed to select your preferred folder to deploy the static website. After the deployment is completed, ensure to click on browser static website.
Image description
Image description
At this point your Static Website is ready that was done through visual studio code
Image description
Thank you for sticking with this post and going through the steps, I hope you were able to use this guide to setup a static website on Azure Storage.

Top comments (1)

Collapse
 
andrea_from_italy profile image
andrea_fazzi

Thank you for providing us the result of your skills.
Very important and useful issue....