DEV Community

Cover image for HOSTING A STATIC WEBSITE ON AZURE BLOB STORAG
OLALEKAN john Ayansola
OLALEKAN john Ayansola

Posted on

HOSTING A STATIC WEBSITE ON AZURE BLOB STORAG

Azure Blob Storage is a cloud-based storage solution provided by Microsoft Azure, designed to handle large amounts of unstructured data. "Blob" stands for Binary Large Object, which refers to data like text, images, videos, documents, logs, backups, and other file types that don't follow a fixed schema.
Hosting a static website on Azure Blob Storage is an efficient and cost-effective way to serve static content such as HTML, CSS, JavaScript, and images.
Here's a step-by-step guide
Step 1: Create a Storage Account

  • Log in to the Azure Portal.

Hosting portal

  • Navigate to Storage accounts and click + Create.

CREATE

  • Configure the settings

Subscription: Select your subscription.

  • Resource group: Choose an existing group or create a new one.

  • Storage account name: Enter a globally unique name.

  • Region: Choose a region near your audience.

  • Performance: Choose Standard (default) for cost-effective storage.

  • Redundancy: Select redundancy based on your needs

CONFIGURATION

Click Review + Create and then Create.

Review

  • Deployment complete then click on go to resource

resource

Step 2: Enable Static Website Hosting

  • Open the newly created storage account in the Azure Portal.
  • In the left-hand menu, find and click Static website under the Data management section.

  • Enable Static website.

  • Specify the index document name (e.g., index.html).

  • Optionally, specify an error document path (e.g., 404.html).

  • Save the changes.

This action generates a Primary endpoint URL where your website will be accessible.

change

Step 3: Upload Your Website Files

  • Navigate to the Containers section in your storage account.
    You’ll see a container named $web (created automatically for hosting).

  • Click on $web and upload your static website files:

  • Click Upload.

  • Drag and drop your files or select them manually.

  • Ensure your files include the index.html file and other required
    assets.

Error

index

Step 4: Test Your Website

  • Access the Website

  • Open the primary endpoint URL in a browser to view your website.

primary

  • Paste in a browser

paste

By following these steps, your website WILL be live and accessible via Azure Blob Storage

Thanks

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay