How to host Static Website on Azure Blob Storage

Table of Contents

Introduction
Step 1. Obtain these necessary tools:
Step 2. Create a storage account:
Step 3. Enable Static Website:
Step 4. Upload root/main folder:
Step 5. Browse the Url:

Introduction
Static website is a simple website anybody, enterprise, NGO etc. can own to showcase their object clause. It could contain business advert, public announcement and any other info-display that does not require connecting and adding data to the database or running queries from the database.

Static Website is not dynamic in the sense that it requires static content and client-side scripts, HTML codes and does not accept higher programming languages or Server-side scripting like PHP, Python, Laravel etc. But it can run with JavaScript, ajax etc.

Below are the steps to host a successful Static Website.

Step 1. Obtain these necessary tools:
A. You have to have developed a script/folder that contains all the information you want to be displayed over the web. This comes in form of codes written in HTML format. If you are not a developer, kindly engage the services of a developer to obtain such script. Also, the root/main folder could be named "MyWebsite" which should house these items below:

index.html
errorpage.hmtl or 404.html
css folder or file
image folder
javascript folder
other folders depending on the desired website end result.

B. You have to have an account that runs subscription with Azure. From a browser, quickly open portal.azure.com to register or sign in if you are an existing user.

Step 2. Create a storage account:

Navigate to the search bar, type storage account and select storage account.
Click on +Create and fill in the necessary details which includes:
Creating a new resource group
Type the storage name
Select your Region
Pick your Performance
Select your Redundancy
Click Review and Create (leaving every other tab on default) and wait for it to deploy.

After deploying, Click on Go to Resource

Step 3. Enable Static Website:

Navigate through the left panel, locate and click on Data Management
Click on Static Website
Switch the button to Enable
Fill in these 2 fields below:
- Index document name This is the root folder/script/file that contains, calls up and displays your website contents. It must be a file in HTML format E.g. index.html
- Error document path This is the script/file that contains an error message that displays whenever an invalid/empty page is clicked.
Click Save.
Saved, it will automatically create
- $web container (where *MyWebsite * root/main folder will be uploaded)
- Primary endpoint (this contains the url)