Hosting a static website in Azure Storage
Tags: storageaccount, cloudcomputing, staticwebsite, powershell
Published: 2024-07-06 13:40:22

**Table of Contents**
Step 1: Edit Static Website on Command Prompt
Step 2: Sign in to Azure portal
Step 3: Create Storage account
Step 4: Click Create
Step 5: Enable static website hosting
Step 6: Upload files
Step 7: Find the website URL

A storage account is a container that groups a set of Azure Storage services together. Only data services from Azure Storage can be included in a storage account (Azure Blobs, Azure Files, Azure Queues, and Azure Tables). 
The following illustration shows step by step guide on how to host a static website.

**Step 1: Edit Static Website on Command Prompt**

A sample Static website


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



How to edit:

- 
Open Command Prompt on your Window Laptop

- 
Select File to open the downloaded file

- 
Select Index and start editing words written with white ink carefully.


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



**Step 2: Sign in to Azure portal**

Sign-in to _portal.azure.com_ to get started.

**Step 3: Create Storage account**
On the Azure Portal page, create a storage account by performing the following steps:

Click on Storage accounts in the Azure services section
On the Storage accounts page, click on + Create.

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

Provide the following details on the Create a storage account page:

- 
Resource group: Select any available group of your choice. Else, create a new one by clicking Create new.
Storage account name: Enter a unique name for your storage account

- 
Region: Choose any appropriate region. In our case, it’s “East US.”

- 
Click on Review + create. This will initiate the validation process.


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

**Step 4: Create and Deploy**

If the function passes the validation, you’ll see the Create button at the bottom of the page. Click on it. It will then start and complete its deployment process.
Then click on the _Go to resource button_ to visit the recently-created function’s page


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


**Step 5: Enable static website hosting**
Static website hosting is a feature that you have to enable on the storage account via azure Portal, Azure CLI or Powershell.

In the Overview pane, select the Capabilities tab. Next, select Static website to display the configuration page for the static website.

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


Select Enabled to enable static website hosting for the storage account.

- 
In the Index document name field, specify a default index page eg index.html. The default index page is displayed when a user navigates to the root of your static website.


- 
In the Error document path field, specify a default error page eg 404.html. The default error page is displayed when a user attempts to navigate to a page that does not exist in your static website.

- 
Click Save to finish the static site configuration.


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



3. 
A confirmation message is displayed. Your static website endpoints and other configuration information are shown within the Overview pane.
Diagram 

**Step 6: Upload files**

- 
In the Overview, navigate to the Data storage then click on Containers on the left navigation pane.

- 
In the Containers pane, select the $web container to open the container's Overview pane.


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


In the Overview pane, select the Upload icon to open the Upload blob pane. Next, select the Files field within the Upload blob pane to open the file browser. Navigate to the file you want to upload, select it, then select Open to populate the Files field. 


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


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




**Step 7: Find the website URL**
You can view the pages of your site from a browser by using the public URL of the website.
In the pane that appears beside the account overview page of your storage account, select Static Website. The URL of your site appears in the Primary endpoint field.


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




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