Hosting A Static Website on Azure Blob Storage

Table of Content

1. Introduction
2. Prerequisites
3. Steps to hosting a static website on Azure blob storage

INTRODUCTION
Azure Blob Storage is a cloud-based object storage solution provided by Microsoft Azure. It allows users to store and serve large amounts of unstructured data, such as; images, videos, audio files, documents, static websites.

A static website is a website made up of pre-built files like HTML, CSS, JavaScript, images, and videos. These files are stored on a server and delivered directly to the user's browser without any server-side processing.
Examples of static websites are; personal blogs or portfolios, small business websites, landing pages etc.

PREREQUISITES

1. Azure subscription
2. Azure Storage account
3. Visual studio code app
4. Static website files (HTML, CSS, JavaScript, images, etc.)

Steps to Hosting Static Sites on Azure Blob Storage
Step 1: Create a Storage Account

• log in to the Azure portal [https://portal.azure.com]
• use the search box to search for and select "storage account"
• click on create
• select an existing regional group or create a new one
• fill in the required details (e.g., name, location, resource group).
• click review and create.
• click on create
• go to resource once your deployment is completed

Step 2: Upload and edit a static website file on Visual studio code

• download a portfolio template on themewagon.com
• create a new folder with a preferred name on file explorer
• unzip the downloaded folder and move the file in it to the newly created folder
• edit the file name to your preferred name
• open the visual studio code app
• open folder
• select the downloaded file in the created folder
• click on select folder
• click on index.html, run, and run without debugging
• select the preferred browser you want it to run on
• return to visual studio code app
• click on index.html, edit necessary information like name, logo, image, contact etc. use ctrl+H to find and replace

Step 3: Configure Static Website Hosting

• return to your azure portal
• navigate to the static website through capabilities on the overview page or through the data management on the left pane
• click on the static website
• enable the static website
• set the "Index document name" (e.g., "index.html").
• set the "Error document path" (e.g., "404.html").
• click "Save".
• observe that a primary end point appeared after save was successful

Step 4: Upload Static Website Files

• navigate to the container
• click the space on the "web" column
• click "Upload" and click on "browse for files"
• select the static website files
• click upload to upload the files to the container

Step 5: Test the Static Website

• navigate to the Storage account created
• click "Static website" under the "Data management" section.
• copy the URL on the "Primary endpoint"
• verify that the static website is displayed correctly.

Summary
Hosting a static website on Azure Blob Storage provides a scalable, secure, and cost-effective solution. By storing static website files in a blob container, users can take advantage of Azure's global content delivery network (CDN) and robust security features. With Azure Blob Storage, users can easily deploy and manage their static websites, while also benefiting from features like custom domains, SSL encryption, and analytics.

Conclusion
In conclusion, hosting a static website on Azure Blob Storage offers numerous benefits, including scalability, security, and cost-effectiveness. With its ease of deployment and management, Azure Blob Storage is an ideal solution for hosting static websites. Whether you're a developer, business owner, or individual, Azure Blob Storage provides a reliable and efficient way to host your static website and reach a global audience.