DEV Community

Cover image for HOST A STATIC WEBSITE ON AZURE BLOB STORAGE
Adah Okwara
Adah Okwara

Posted on

HOST A STATIC WEBSITE ON AZURE BLOB STORAGE

Deploying a static website on Azure Blob Storage is a cost-effective and scalable solution for website hosting. Azure Blob Storage offers secure and scalable object storage for unstructured data and includes the capability to host static websites directly from a storage account. This blog will walk you through the process of deploying a static website to Azure Storage, enabling you to have a publicly accessible website.

Prerequisites

  1. An active Azure account. However, if you do not have one, you sign up at Azure

Step 1: Log in Azure

Step 2: Create a storage account

  • In the middle side menu, Click on "storage account"
  • Click on "Create"

Image description

Image description

2. Configure Storage account

- Basics Tab:

  1. Select your subscription.
  2. Choose or create a new resource group.
  3. Enter a unique storage account name.
  4. Select a region.
  5. Choose "Standard" for performance.
  6. Select "Geo-redundant storage (GRS)" for redundancy
  7. Click the "Next" button and configure the remaining sections as needed, or leave the default settings in place.
  8. Click "Review + Create".

Image description

Validation and Create

  • Verify that all configurations are correct.

  • Click "create"

Image description

Deployment complete

  • After the creation of the storage account, click on "go to Resource"

Image description

Step 3: Navigate to Static website

  • In the left-hand menu, Click "Data management"

  • On the data management drop down, click "Static website"

Image description

Enable static website

  • Click "Enabled"
  • Enter 'index.html' as the index document name.
  • Enter '404.html'on the error document path
  • Click "Save"

Image description

Note Down the Endpoints:

After saving, you will see primary and secondary endpoint URLs. Copy the primary endpoint URL.

Image description

Step 4:Upload website files

1.** Navigate to containers:**

  • In the left-hand menu, On "Data storage" drop down, Click on "Containers".
    • Click on the '$web' container.

Image description

2. Upload Files from your laptop

  • Click on "upload"
  • Navigate to where 'my website' folder is saved on your PC
  • Drag and drop the website files into the upload box.
  • Click "Upload" to transfer your files to the $web container.

Image description

Image description

Image description

Step 5: Testing your Website

  1. Access your website
  • Open a web browser
  • Enter the primary endpoint URL copied earlier and paste on your browser.
  • Your static website should now be live and accessible anywhere

Image description

Conclusion
Hosting a static website on Azure Blob Storage is a straightforward and efficient process. By following these steps, you can quickly deploy and share your static website. Azure’s scalability and robust security features ensure that your site performs optimally and remains secure.

Happy Hosting!!!

Top comments (2)

Collapse
 
ifenna_oyeka_ profile image
IFENNA OYEKA

Adah Okwara's guide on hosting a static website on Azure Blob Storage is an excellent resource for anyone looking to leverage Azure's powerful features for web hosting. The step-by-step instructions are clear and comprehensive, making it accessible even for those with limited technical experience. The use of visuals enhances understanding, and the emphasis on Azure's scalability and security highlights the benefits of this hosting method. Overall, it's a well-structured and informative tutorial that can help users efficiently deploy their static websites.

Collapse
 
nadine_okwara_e29a3ccf7e3 profile image
Nadine Okwara

Beautiful piece. I've come to understand it better. Thank you Adah