Introduction

A static website is a website that can be loaded and served from a pre-defined set of files, such as HTML, CSS, and JavaScript files. Static websites do not require a web server to render content, which makes them faster and cheaper to host. You can host a static website on Azure Storage, a service that provides scalable and secure cloud storage for your data.

In this tutorial, we will be hosting our static website in Azure Storage. follow these prerequisites;

1. Install Visual Studio Code on your desktop.

2. Install the Azure Subscription, Azure Account and Azure storage account extensions on the visual studio code.

3. Create Azure Subscription, if you don't have one.

4.Create a storage account in the Azure portal. learn how to create storage account by click on the drop-down

5.Create a folder that houses your static website data

Enable Static Website in Azure

To host a static website in Azure Storage, you must enable your storage account's static website hosting feature and specify a default index page and an optional error page. You can use the Azure portal, Azure CLI, or Azure PowerShell to enable this feature and configure the settings. On the Azure Portal, visit the "Overview" page of the storage account and select "Static website" option to display the configuration page for the static website.

a) Go to your storage account created, and click on the Static website button on the left side of the search bar.

b)Click on the "Enabled" button to enable the static website

c)On the index document name type "index.html" and the Error document path type "error.html"

d) Click on the save button

e)Once it's saved, It generates your primary and secondary endpoint

f) When you go back to your storage account, click on containers, you can see that a web container has been created to host your static website data

Open Your File On Visual Studio Code

a)The next step is to click on File at the top-left corner of your VScode.

b) Click on "Open File" and select the folder that houses your static website codes and data.

c)Once you open it, the file appears here as shown below.

d) Click on your file drop-down and click index.html

Connect To Azure

a) To connect to your $web container, click on the Azure extension.

b) Next click on the Resources drop-down, click on the Azure subscription drop-down

c) Under the Azure subscription, click on the storage account drop-down

d)You will see the storage account you created in the Azure Portal, right-click on it.

e) Click on "Deploy to the static website via Azure Storage"

f) You will be prompted to select your folder to deploy the static website

g) Wait for the deployment to be complete and click on browse static website

h) You will be redirected to your static website as shown below

i) On the Azure portal, go to the $web container in your storage account, you can see that all your static website data has been deployed in the container

Open your browser and try it :)

How simple was that?

If you have any questions, let’s get in touch and discuss.