DEV Community

Cover image for Hosting a Static Website on Azure Blob Storage
Tracy Chinedu
Tracy Chinedu

Posted on

Hosting a Static Website on Azure Blob Storage

Azure storage stores all types of data. It is mainly designed for storage where we can easily store both structured and unstructured data. Blob Storage is optimized for storing massive amounts of unstructured data. Unstructured data is data that doesn't adhere to a particular data model or definition, such as text or binary data. In Microsoft Azure, you can easily upload your static website and share the link anywhere and anyone can see your website.

In Azure you can enable your static website for free, but you will pay for the storage account. Azure uses the encryption technique for storing the data. In this article, all the steps are mentioned one by one with proper screenshots. Follow all the steps and host your static website.

Log in to Azure

  • Click on Storage Accounts
  • Click on "Create"

Image description

Image description

Create a Storage Account
In the Basics tab, under Project details, make sure the correct subscription is selected and select StorageRG from my resource group list you create a new resource group if you don’t want to use an existing one.

  • Storage account name - Choose a unique name
  • Region -Select a region
  • Performance - Select Standard
  • Redundancy - Select Geo Redundant Storage
  • Click the next button or configure the other sections if required, otherwise leave as default.
  • Click on Review + Create

Image description

Validation
Check if storage account has configured properly or not,if proper then it will show the create option otherwise you need to check all the configurations again. Then click on the Create Button.

Image description

Deployment
Image description

  • Go to Resources Image description

Navigate to Static Website

  • On Data Management dropdown
  • Click on Static Website

Image description

Configure the Static Website

  • Enable Static Website
  • Enter index document name
  • Enter error document
  • Save

Image description

  • Now you will see that azure created two links ( Primary and Secondary)end points.
  • Copy the primary end point
  • Azure created a storage container to host the static website $WEB, Click on it

Image description

Navigate to Containers

  • On Data storage dropdown
  • Click container
  • Click $WEB

Image description

Uploading Files from the PC

  • click on Upload.
  • Navigate to where the website folder is located on the computer.
  • Drag and Drop the files from the location to the provided box. Image description Image description

Testing on a browser

  • When your files are successfully uploaded then paste your primary end point on your browser.

Image description

Thank you for sticking with this post and going through the steps, I hope you were able to use this guide to setup a static website on Azure Storage.

Top comments (0)