rabiatucloud
Effortless Static Website Hosting with Azure Blob Storage.

Effortless Static Website Hosting with Azure Blob Storage.

Rabiatu Mohammed's photo
Rabiatu Mohammed
·

5 min read

Table of contents

Overview

Creating and hosting a static website has never been easier, thanks to Azure Blob Storage. Whether you're a developer, a small business owner, or a hobbyist looking to share your work online, Azure provides a scalable and reliable platform to host your static websites effortlessly.

In this guide, I'll walk you through the step-by-step process of setting up and deploying a static website using Azure Blob Storage. You'll learn how to configure your storage account, upload your website files, and make your site publicly accessible. By the end of this guide, you'll have a fully functional static website hosted on Azure, ready to share with the world.

Let's get started and discover how simple it can be to leverage Azure Blob Storage for your static website hosting needs!

Prerequisites

Before you begin deploying a static website using Azure Blob Storage, ensure you have the following prerequisites in place:

  1. Install Visual Studio Code:

  2. Install Azure Extensions in Visual Studio Code:

    • Open Visual Studio Code and install the following extensions:

      • Azure Subscription

      • Azure Account

      • Azure Storage Account

  3. Create a Storage Account in the Azure Portal:

    • Sign in to the Azure Portal.

    • Navigate to "Storage accounts" and create a new storage account if you don’t already have one.

  4. Create a Folder for Your Static Website:

    • Organize your static website files (HTML, CSS, JavaScript, images, etc.) in a dedicated folder on your local machine.

Enable Static Website Hosting

In the Azure Portal, navigate to your storage account (in this example, "rymaastorage").

  1. Select "Static website" from the left-hand menu under the "Data management" section.

  2. This will open the static website configuration pane.

Configure Static Website Settings

  1. Enable Static Website:

    • In the "Static website" pane, toggle the Static website option to Enabled.

  2. Set Index Document Name:

    • Enter index.html in the Index document name field. This is the default page that will be served when users access your website.

  3. Set Error Document Path:

    • Enter error.html in the Error document path field. This page will be shown if there are any errors (like a 404 error) when users navigate to non-existent pages.

  4. Save Settings:

    • Click the Save button to apply the changes.

Review Static Website Configuration

After enabling the static website, you will see the primary and secondary endpoints for your website.

  1. Primary Endpoint:

  2. Secondary Endpoint:

  3. Index Document Name:

    • Confirm that index.html is set as the index document.

  4. Error Document Path:

    • Confirm that error.html is set as the error document.

Upload Your Website Files

  1. Navigate to the $web Container:

    • In the Azure Portal, go to your storage account.

    • Select Containers from the left-hand menu under "Data storage."

    • Click on the $web container. This container is created automatically when you enable static website hosting.

Open Your Static Website Files in Visual Studio Code

  1. Open Visual Studio Code:

    • Launch Visual Studio Code on your desktop.

    • Click on the File menu at the top left corner.

    • Select Open File... or press Ctrl + O.

  1. Select Your Website Folder:

    • Navigate to the folder where your static website files (HTML, CSS, JS, etc.) are stored.

    • Click Select Folder.

Your folder should now be open in Visual Studio Code, and you should see your website files, such as index.html, in the Explorer pane on the left. This allows you to easily edit and manage your static website files.

Connect To Azure

  1. To connect to your $web container, click on the Azure extension in Visual Studio Code.

  2. Next, click on the Resources drop-down, then click on the Azure subscription drop-down.

  1. Click on the Storage accounts section to view your storage accounts.

Deploy to Static Website

  1. Navigate to the Azure extension in Visual Studio Code.

  2. In the Azure extension, under Resources, click on Storage accounts to expand it.

  3. Right-click on the specific storage account you want to use (e.g., rymaastorage).

  4. From the context menu, select Deploy to Static Website via Azure Storage....

  1. In the prompt that appears, select the folder containing your static website files (e.g., ceevee).

  1. Visual Studio Code will show a notification indicating the deployment process.

This message confirms that your static website files are being deployed from your local machine to the $web container in your Azure Storage account.

You have successfully deployed your static website to Azure Blob Storage, making it live and accessible to the public.

Your error.html has been successfully uploaded to the Azure Storage container as shown in the screenshot. Here is the unique error.html code.

Verify the Configuration

  1. Navigate to a non-existent URL on your website to verify that the custom 404 error page appears.

Example

For example, if your website URL is https://yourstorageaccount.z33.web.core.windows.net/, navigating to https://yourstorageaccount.z33.web.core.windows.net/nonexistentpage should display your custom 404 error page.

This setup ensures that any broken links or non-existent pages will redirect users to your custom 404 error page, improving user experience.

Congratulations on successfully deploying your static website on Azure Blob Storage!

Static WebsiteAzureazure-storage