Prerequisites
Azure account: You ll need an active azure subscription
Static Website Files : JavaScript, HTML, CSS, and other assets to be hosted.
You can serve static content like HTML, CSS etc directly from a container in a general-purpose V2 or blockblob storage account.
3 MAJOR TOOLS TO BE USED
Visual Studio Code : - It must be installed on your desktop.
Install the azure subscription azure account and azure storage extension plugin on the visual studio code.
Create a Storage Account in the azure portal.
STEP 1
Enable Static Website Hosting
Go to your newly created storage account and hit the static website on the left side of the search bar.
Click Enable
Specify the index specific name (e.g. index.html)
Specify an error document path (e.g. error.html)
Click the Save button above to save your configurations.
This opens up a page with your primary and secondary endpoints.
Copy the primary endpoint, that's the URL of your static website.
STEP 2
Return to Your Storage Account
Once you are in your storage account, navigate to the Containers section, and you'll find a $web container already created to store the content of your static website.
STEP 3
Upload Your Website Files
In the storage account, navigate to Containers and open the $web container created automatically for static website hosting.
Click Upload to add your files
STEP 4
Test Your Static Website
Navigate to the Static Website in your storage account.
Click on the Primary endpoint URL to view your static website
Test the site and ensure everything uploaded completely and loads properly.
Conclusion
Hosting a static website on Azure Blob Storage is a straightforward, cost-effective solution for serving static content. By creating a storage account, enabling the static website feature, uploading your site files to the $web container, and optionally configuring a custom domain, you can quickly publish your website. Azure also provides scalability, secure HTTPS connections, and integration with Azure CDN to optimize performance.
This setup is ideal for personal projects, portfolios, and lightweight web applications. With Azure’s reliability and ease of use, you can ensure a smooth hosting experience for your static website.
Top comments (0)