Hosting a static website in Azure Storage

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

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.

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.

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.

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

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.

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.

1. 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.

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.

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.