How you can host a static website on azure

In this blog we will see how you can host your static website on azure, the process is a bit long but once you do it one step at a time it is almost free.

Step 1:
Develop your static website keeping index.html as your home page. Make proper folder structure as standard for developing any website. Once you have everything ready, go to Azure Portal and create a storage account.

Step 2:

Fill in the basic information to create a storage account and go to that resource. Keep all configurations to basic as we need a storage account just to store our static website files Once the account is created go to the static website section.

Step 3:
Enable the static website option. It will create a $web folder in your container. Put index.html as your index document name and error.html if you have any error page.

If you hit this primary endpoint you can access your website if you have added the necessary files in the web folder. Later in this blog, we will see how we can map this to a custom domain. Stay tuned.

Step 4:
Now let’s quickly add the website files to our folder on azure. Now if you have only one page you can directly upload it via the azure portal. But if you have multiple folders and files inside the folder then it is not convenient to upload things from the portal.

Another Method for complex folders:

As you can see you can only upload files from the portal and not the entire folder we need to use the Azure storage explorer to upload your files.

Go to Azure Storage Explorer — cloud storage management | Microsoft Azure download and install this software. Log in with your Azure credentials and it will show you your containers folders in the software.

Step 5:
Now click on the $web folder and hit upload folder. Select your files and folders from your system and click on the upload button.

Once the upload is done you can see the files on the Azure portal. Now if you click on the primary link present under the static website section you can see your website is live. The only thing now remaining is mapping it to your custom domain.


Step 6:
For mapping, it to custom domain first buy a domain from GoDaddy or hostinger activate your domain. Once you have your domain name ready go to azure and click on create resource CDN Profiles.

Create a new CDN profile

Once the profile is created click on create end point.

Select the options as follows

Once this is created (it takes around 10 mins to reflect) click on the custom domain and put your domain name there.

You will get a following error on hitting save.

As your DNS is not yet mapped to azure.

All you need to do is change the target end point of your domain to the above end point name.

Things will reflect in 1 to 8 hrs.

In this way you can host static website on azure. Hope this helps!