How to host Static Website on Azure Blob Storage
Published: 2024-07-05 11:52:15

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqkluov2mxuzsaug11zf.jpg)

**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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5byedv2fhh8d3kyjnr6.png)

**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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6yw1651uhiup3uxmme5.jpg)
* After deploying, Click on Go to Resource

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4dqouibaghhdhy9yu90q.jpg)

**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)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxc38x1nbfmibm2j3pe5.jpg)
**Step 4. Upload root/main folder:**
- Navigate through the left panel, locate and click Data Storage
- Click on Container
- Click on $web

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nw9jvvhv846msk8jgy90.jpg)
- Click on upload. 
- Click Browse for file (explore and select all the necessary folders) drag and drop

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vbyvxuoupibxnz049wot.jpg)
- Click Upload and wait for it Upload.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wka775tasobghsvdbf8k.jpg)

Files uploaded successfully.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwkksgi0mdwq17sj9mpj.jpg)

**Step 5. Browse the Url (website):**
- Navigate through the left panel, locate and click on Data Management
- Click on Static Website
- Copy the primary endpoint url
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zsk6igro16qs0owk1gz.jpg)
- Open the Url through a browser
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/za2agoslq7sfr0sqd5ij.jpg)