Hosting a Static website on the Azure Blob Storage Platform.

Abstract.

This ability is a cost-effective and scalable solution for deploying simple websites. It involves enabling static website functionality within an Azure storage account provided, uploading the website’s files to a designated container created, and accessing the website through a unique URL generated by Azure. This method is particularly well-suited for websites consisting of HTML, CSS, JavaScript, and other static assets.

Table of Contents.

  1. Introduction.

  2. Steps in creating a static website.

  3. Website Generated

  4. Conclusion.

INTRODUCTION.

The hosting of a static website on Azure Blob Storage involves storing website files such as HTML, CSS, JavaScript, etc. In a created storage account, this enables static website hosting functionality and allows the files to be served directly to users through a public endpoint, making it a cost-effective way to deploy static content. In essence, Azure Blob Storage with static website hosting provides a straightforward way to deploy and serve static websites, offering cost efficiency and ease of management.

Why Azure Blob Storage? Azure Blob Storage is a cloud-based object storage service that allows users to store large amounts of unstructured data. It's designed for storing various types of data, including text, images, videos, and other binary files. Blobs, or binary large objects, can be accessed globally via HTTP or HTTPS endpoints, making them accessible to web applications, APIs, and other services.

Benefits of Azure Blob Storage.

  1. Scalability and Availability: Azure Blob Storage is designed to handle massive amounts of data and is highly available, ensuring data is accessible when needed.

  2. Security: It offers various security features, including authentication, role-based access control, encryption at rest, and advanced threat protection.

  3. Cost-Effective: It offers different access tiers (hot, cool, archive) to optimize storage costs based on data access frequency.

  4. Data Management: It provides features for managing the lifecycle of your data, including policy-based access control and immutable (WORM) storage options.

  5. Data Types: Supports block blobs, append blobs, and page blobs for storing text, binary, and virtual hard drive data

STEP IN CREATING A STATIC WEBSITE.

Step 1. We should make sure we have created a Microsoft Azure free account. Sign in to the portal to create a storage account by searching for the storage account page and clicking on Create, as shown below.

Step 2. Select Basics to create a storage account. In the project details field of the subscription, select your subscription, and in the resource group field, select a name and click on create new, as shown below.

Step 3. Scroll down to instance details, input your unique storage account name, select your region you want the storage to be deployed on, to save cost click on "standard" in the performance field (However, if you require low latency, you can choose "premium."), Redundancy field select Geo-redundant storage (GRS) (this option has a failover capability in a secondary region and is recommended for backup scenarios. They are also stored in two regions). Click on the next tab as shown below to move to the Advanced page.

NB: Selections on any of the redundancy options are based on your needs, but for this guide, we are going with GRS. See other options as stated below.

Step 4. At the Advanced page, leave security as you met it and scroll to Blob Storage field; in the Access tier column, select “Hot” to frequently access your data at any time. NB: Please note that there are three types of Access tiers available: Hot, Cool, and Archive. When creating a storage account, only the Hot and Cool tiers can be seen. And click on the next tab to move to the Networking page.

Step 5. At the Networking page, scroll to Network connectivity at the Network access field, enable public access from all networks (this will allow the URL of the storage to be accessible over the internet, but if it is disabled, it becomes private and accessible to you alone).

Step 6. Scroll to Network routing and leave the routing preference in the default state, "Microsoft network routing,” and click Next to move to the Data Protection page as shown below.

Step 7. At the Data Protection page, leave the recovery field in its default state. The purpose of this page is to retrieve your deleted storage within a minimum retention period of 7 days, skip tracking and tab on Next twice to move to Tags page as shown below.

Step 8. At the Tags page, leave the resource as “All resources selected” and click Review+create as stated above. This will display your expected review page output of the created storage account, and click on create.

Step 9. Once validation is passed, it will take you to the deployment environment complete; then click on "Go to resource," which will redirect you to the storage account page.

Step 10. Now that we have our Storage account ready, in the same environment, we need to create our Container. On the left of our storage account page under data storage, click on "Container."

Step 11. Now we are on the Container page; click on + Add containers to create your container.

Step 12. This will direct you to a page displayed on the right side where you can input your container's unique name. On the anonymous access level, click on the dropdown and pick "Blob" to grant public access over the internet. Click on the "create" button, for the output of your container will be created as shown.

Step 13. File Upload: Click on the upload button to upload a file or picture (Unstructured data); it will show a cloud symbol, and click upload.

Now we have our file uploaded in the container as shown below.

Now that we have our file uploaded into the container directory, we need to click on the file and copy the URL as stated below to deploy our static website.

WEBSITE GENERATED.

The website output is a result of the file upload as stated above, and it’s as displayed and shared below with its URL output. The URL as copied above is now pasted on a new browser page with the output as shown below

https://gabbiesdite.blob.core.windows.net/gabscontainer/header-backgrouund.png

CONCLUSION.

This project successfully used Azure Blob Storage to build a robust and scalable photo-sharing application. Blob Storage's features provided users with a reliable and cost-effective solution for storing and sharing digital photos. Secure storage using access control mechanisms and efficient data transfer was implemented. Exploring different storage tiers to optimize costs based on access patterns is recommended. Further research could explore the integration of Azure Cognitive Services for image analysis and tagging. This project demonstrates the power and versatility of Azure Blob Storage for handling unstructured data and building modern cloud applications

NB: Use of VS Code with Azure Blob Storage..

You can effectively use Visual Studio Code (VS Code) to interact with and manage Azure Blob Storage through the Azure Storage extension. Additionally, the Azure Storage extension for VS Code offers a powerful and convenient way to work with Azure Blob Storage, making the development and management of your cloud storage solutions more efficient.

The benefits of using VS Code with Azure Blob Storage:

  1. Integrated Workflow: Manage your Azure resources, including Blob Storage, directly from your development environment.

  2. Streamlined Operations: Simplify tasks like uploading and downloading files, creating containers, and deploying websites.

  3. Visual Interface: The Azure Storage extension provides a visual way to explore and interact with your Blob Storage data.

0
Subscribe to my newsletter

Read articles from Gabriel Aboiraor directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Gabriel Aboiraor
Gabriel Aboiraor