How to host a static website using Azure blob storage in 10 mins
Hello peeps! If you want to host a simple website quickly you have landed at the correct place. I will show you step by step process of how to host your website using Azure Blob storage. So let’s get started.
The first thing that we need is of course an Azure subscription. You can create an Azure subscription for free though you will have to have a card handy (don’t worry they won’t charge you unless you use a paid service). You will need blob storage which will be available for free for 12 months. For more information Click here.
Once you have the Azure subscription, go to the Azure portal. You can search for Storage Account, create a storage account by filing out the details:
Remember that the static website feature is only available in StorageV2 version for Account kind. We are not going to go into depth of each field here, but you can leave the defaults and fill out the Subscription, Resource group(create a new one) and Storage Account name and hit the Review + Create button.
Now that we have the storage account set up, let’s get the files for the static website we want to host. I have created a basic angular application using angular cli and have the files available in the github repository here. If you want you can clone/download these files for this exercise.
Once you have the repo cloned, run the app locally to see how it looks (you can use VS code). This will also create a dist folder where the files would look like these:
We would be using the above files to host simple website through blob storage. So let’s head to the azure portal and do the magic✨
Navigate to the storage account you previously created in the azure portal, on the left hand side blade you will see an option called Static Website. Click on the Static Website option, turn on the Enabled button and you would see there will be two endpoints available for the website. You will also notice a $web blob container created as highlighted below:
You will have to mention index.html file name in the Index document name as shown above. We are almost there, now click on the $web link which will take you to the blob container and upload all the files from your local dist folder.
As promised that was indeed the last step, now to browse the simple website just copy the primary endpoint (from the static website option) and open in a browser. You should be able to see the app 🎉
This is it for now, probably would come back with more information on security, calling Restful APIs etc.
Hope you enjoyed reading this!
