Hosting Static Website On Azure Blob Storage.
Tags: microsoft, azure, vscode, website
Published: 2024-07-05 23:16:53

A static website is an already developed or written code which is done using (in this case Visual Studio Code (VSCode) ) There is no authorization or authentication to this static website. Everything is fixed unless one decides to change the codes
A static website is prepared by professional website developers and uses variety of syntax and codes that will be understood by the browser when launched. There is also another functional attribute known as CSS, which works with every website. Its function is to add colour and beauty to the website. A static website enables us to edit some elements and we can also customise. Of important note is the root folder, which enables us to effectively run and launch the website.

**Steps**

- Download the latest version of vs code and install it. 
- A link to a sample website will be given for download.
- The sample website folder is compressed and unzipped with seven zips and/or files are extracted.
- You will see the root folder which is in the form of index.html and 404.html

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gsrnb71xnthvz96pejpm.png)
Using file explorer makes it very easy to open the root folder(index.html and 404.html)

- Open the vs code
- Click on file

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

- Select a folder.
- Locate the folder on your desktop download, click on it to select and upload to vs code.

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

- Click index.html which has the code as seen
- You can edit some elements especially those on white characters
- You can edit elements as they appear in the lines 7,46,91,109
- Be careful not to change the code, so the browser will not be scattered 
Note index.html is a home page
- Save
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vnp3nectt0opudh1kr4q.png)
- The new edited index.html page will look like

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gql7cyjvg7d8sqd1dca8.png) 
- Open the 404.html
- This is a folder which has a polite error message
- Edit some elements here
- Save 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3solya88cm8rnrkutab.png)
- The new edited 404.html page will look like below as you click works on home page
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98i5ja1lo6dnsp7yjamm.png) 

**Creating new storage account**

- Log in to **[Azure portal](portal.azure.com)**

- Click + Create

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

- From the **Basic tab** under<u> _project details_</u>
- Make sure the right subscription is selected
- Create a new resource group (websiteRG)
- Under <u>_Instant details_</u>
- Choose a unique storage account name
- Region is East(US)
- Performance is standard
- Redundancy is Geo-redundant storage
- Click next 

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

- Advanced
- Networking
- Data protection
- Encryption
- Tags
- The above is left at default
- Click <u>_Review + Create_</u>

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

- Deployment completed
- Click on <u>_Go to resource_</u>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxmj0onenfrt8bt5vrtz.png)
**Locating the static website**

- Done in _<u>two ways</u>_
- From the **_<u>Overview page</u>_**
- Click Capabilities
- Locate the static website

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

- Still on the _<u>Overview page</u>_
- Scrow down
- Click data management
- Click static website
- Click enable
- Index document name - Input the root folder (_index.html_) 
- Error document path - _404.html_
- Save
- Azure generates primary and secondary endpoints automatically

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

- Copy the link to the primary endpoint 
- Paste it on a browser and Enter
- Error message displayed because we have not uploaded our documents which are still in a local folder

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

- Azure created a new storage account to host our static website ($web)
- Still on the Overview page
- Scrow to data storage
- Click Container
- Click the $web

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

- Click upload
- Browse for file
- Locate the file on the computer

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

- Highlight the files
- Drag and drop for assessment on the blob

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfv5tniux632mwv4dto8.png)
- Click Upload 
-  The folder is ready on the container and can be accessed
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3abehlj9ztwhe2h28e80.png)
**To access the static website**
- From the overview
- Scrow to Data management
- Click static website
- Copy the link on the primary endpoint 
- Paste on a Browser
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z11rkkypq3cv1uxzwyt0.png)
See the Static website below

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