How To Host A Static Website On Microsoft Azure Blob Storage.

Azure Static Web Apps is a service that automatically builds and deploys full stack web apps to Azure from a code repository.

Static web apps are commonly built using libraries and web frameworks like Angular, React, Svelte, or Blazer where server side rendering isn't required. These apps include HTML, CSS, JavaScript, and image assets that make up the application. With a traditional web server, these assets are served from a single server alongside any required API endpoints.

Prerequisites to hosting a static website:

1: Download Visual Studio Code - Once downloaded, Install Azure subscription and Azure Storage, Azure CLI.

2: Download Themezy (free download). See the link here

Log in to Microsoft Azure and create a storage account. See link on how to create a storage account here. Once created, open the storage account and navigate to 'Static Website'. Click to open.

Once it opens to the right, click 'Enabled;

Once enabled, type 'index.html' in the Index document name tab and 'error.html' in the Error document path tab. Click save on top left of page.

Under the Storage overview, click 'Containers' and then click on '$web' on the right side (this is where the file uploaded to Visual Studio Code will appear later). '$web' is located under the blue 'Enabled' toggle.

Now go to your computer downloads folder for the 'Themezy' file downloaded earlier. It is called 'Ceevee'. Open the unzipped downloaded folder (CEEVEE).

Go to Visual Studio Code and click 'File', on top left.

Click 'Open Folder.

Click 'Downloads'. Select the downloaded, unzipped folder - 'ceevee and click on add.

Click the drop down arrow to the left to show the content of the folder CEEVEE. Scroll down and click 'index.html' opens to the right with a set of codes

Scroll down to line 59 and edit as you want. You may scroll down for more edits_, Once you're done editing, save.

Go to the search box to install.

Click on the Azure icon to the left (the letter A on the left pane).Click 'Allow, Click 'Sign in to Azure, Click the 'Azure subscription' drop down arrow to open content.

Once opened, click on the 'Storage' drop down arrow.

Click on your storage account name. the name you chose for your storage account in Azure.

Now right click on your storage name to open list of options as below and click 'Deploy to Static Website via Azure Storage

This opens with options on top of the page, click the 'ceevee' folder.

The deployment process begins.

It opens your static website!

To view the files you uploaded to Visual Studio Code in Azure, go back to your storage account on the Azure portal and click your storage name to open

Once it opens, navigate to 'Containers' and click to open. It should open with '$web' on the right. Click to open.

This opens with the same uploaded files from Visual Studio Code.

Thanks for your patience. I hope this guide has been helpful in hosting your static website on Microsoft Azure Blob Storage..