Hosting Static Website On Azure Blob Storage.

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

Using file explorer makes it very easy to open the root folder(index.html and 404.html)

• Open the vs code
• Click on file

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

• 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
• The new edited index.html page will look like

• Open the 404.html
• This is a folder which has a polite error message
• Edit some elements here
• Save

• The new edited 404.html page will look like below as you click works on home page

Creating new storage account

• Log in to Azure portal

• Click + Create

• From the Basic tab under project details
• Make sure the right subscription is selected
• Create a new resource group (websiteRG)
• Under Instant details
• Choose a unique storage account name
• Region is East(US)
• Performance is standard
• Redundancy is Geo-redundant storage
• Click next

• Advanced
• Networking
• Data protection
• Encryption
• Tags
• The above is left at default
• Click Review + Create

• Deployment completed
• Click on Go to resource

Locating the static website

• Done in two ways
• From the Overview page
• Click Capabilities
• Locate the static website

• Still on the Overview page
• 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

• 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

• 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

Uploading Blob

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

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

• Click Upload
• The folder is ready on the container and can be accessed 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 See the Static website below