DEV Community

Cover image for How To Host A Static Website In Azure Blob Storage
Chidera Enyelu
Chidera Enyelu

Posted on

How To Host A Static Website In Azure Blob Storage

Hosting a static website on Azure Blob Storage is a straightforward process. Here’s a step-by-step guide,

Step 1: Create a Storage Account

  • Login to Azure Portal: Go to the Azure Portal.
  • Create a Storage Account:
  • Navigate to "Storage accounts" and click "Create".

Image description

  • Fill in the necessary details (Subscription, Resource Group, Storage account name, etc.).

Image description

  • Choose the Performance and Replication options as per your needs.
  • Click "Review + create" and then "Create".

Image description

Image description

Step 2: Enable Static Website Hosting

  • Navigate to the Storage Account: Once created, go to your storage account.
  • Enable Static Website Hosting:
  • In the left-hand menu, find the "Data management" section and click on "Static website".
  • Click on "Enabled".
  • Specify the "Index document name" (e.g., index.html).
  • Optionally, specify the "Error document path" (e.g., 404.html).
  • Click "Save".

Image description

Step 3: Upload Your Website Files

  • Access the $web Container: When you enable static website hosting, Azure creates a special container called $web.
  • Upload Files:
  • In the left-hand menu, under "Data storage", click "Containers".

Image description

  • Click on the $web container.
  • Click "Upload" and upload your static website files (e.g., index.html, styles.css, app.js, etc.).

Image description
Click on upload
Image description
Uploading in progress
Image description
Uploaded static website

Step 4: Access Your Website

  • Find the URL:
  • Go back to the "Static website" section under "Data management".
  • The "Primary endpoint" URL is your website's URL.
  • Navigate to this URL in your web browser to see your static website live.

Image description

By following these steps, you can host a static website on Azure Blob Storage effectively

Top comments (0)