Hosting Static Website on Azure Blob Storage

Table of Contents
Introduction
Requirements
Steps on Hosting a Static website on Azure Blob Storage

Introduction

A static website is a website whose content is constant. They present the same content to all users and do not use databases or server-side processing. The contents are not generated using server-side scripting languages like PHP, Java, Ruby, Pithon rather they are built using front end languages like HTML, CSS and JavaScript.

Azure blob storage is a type of storage in Azure that store massive amount of unstructured data. Blobs are organized in a container. A container can store unlimited number of them. A container is located in a storage account.

What does it mean to host a website? To host a website also known as web hosting is to make a website available and accessible on the internet. Hosting your content in Azure storage enables you to use serverless architecture. it is a good option when you do not require a server to render your content.

back to Contents

Requirements

This guide uses Visual studio code to deploy already built static website to Azure blob storage. Hence, you need to do the following:

• Download and install Visual studio code.
• install extensions like Azure Account and Azure Storage on the Visual Studio Code. The extensions will be used by visual studio code to deploy your static website to Azure Storage.
• Already created static website saved in a folder.

back to Contents

Steps on Hosting a Static website on Azure Blob Storage

Sign in

sign in to portal.azure.com if you already have azure subscription otherwise click here to create a free one.

Create a Storage Account

• Search and select storage accounts on the search bar, then click create.

• On the basic tab, fill the following On the Project details, select the subscription in which to create the new storage account. Create a new or select an existing resource group to organize and manage your storage account.

On the Instance details, give the storage account a name. Select region closest to your user. For performance, select standard or premium performance. Standard is recommended for most general-purpose v2 account scenarios while premium is recommended for scenarios that require low latency. Finally, select the redundancy type.

• Click review and create then create.

Configure Static Website for Hosting

• Once deployment is complete, click go to resource to move to your storage account overview page.

• On the left pane, click on data management.

• Select static website blade and click enable.
  Enabling static websites on the blob service allows you to host static content.
  In the Index document name field, provide the name for your default index page, for instance index.html. This is the page that displays when a user navigates to the root of your static website.
  In the Error document path field, specify the path to a default error page of your site. This is the default error page that is displayed when a user attempts to navigate to a page that does not exist in your static website. For example, "C:\Users\HP\Documents\mywebsite\404.html" or just simply 404.html.

• Click Save.

Azure portal now displays your static website endpoint. Also, a container named $web is automatically created for you. The $web container will contain the files for your static website.

• On the left pane, go to data storage. Click on container to view the $web container that was created. Notice it has no content.

Host a Static Website

• Launch Visual studio code to open your static website folder. Click on the explorer and select open folder. Locate and open the folder for your site.

• Right-click under the folder in the explorer panel and select Deploy to Static Website via Azure Storage to deploy your website.

• You will be prompted to sign in. Click sign in to Azure and select the right subscription containing the storage account for which you enabled static website hosting.

• You will be redirected to a browser. When you have successfully login, go back to visual studio code and select the storage account when prompted.

• Visual Studio Code will upload your files to your web endpoint and show the success on the status bar.

• Launch the website to view it in Azure. On Azure portal, copy your static website endpoint displayed when you enabled static website. Paste on a browser and launch.

Congratulations!!! You've successfully hosted a static website on Azure blob storage.

back to contents