Hosting a simple website in Azure 🛫

Hello folks!

A static website with domain in Azure

Big and powerful web platforms are interesting and everything, but the market is living not only on containers or front-back website. For example, my friend wanted to host his 1-page website somewhere cheap and without paying to much.

So here I’ll show you how we deployed a 1-page website into Azure Storage with CDN.

Deploy website in Azure Table Storage 📁

1. In your Azure Storage, go Static website:

And enable the feature.

2. After, go to Containers:

3. Upload your static website and all needed assets.

4. Change access level to Container and save

5. Test changes. Go to Static website tab and go to an endpoint to check if everything works well.

Connect domain name with Azure CDN 🔗

There are 2 ways to connect your domain name to a static website in Azure Table Storage.

• Table storage Custom domain configurations
• Content Delivery Network

With Azure CDN you have many more possibilities, including SSL configuration, which is essential for the production website.

1. Create Azure CDN — https://docs.microsoft.com/en-us/azure/cdn/cdn-create-new-endpoint. I used Standard Akamai tier for my website
2. Configure Origin for your CDN

Where Origin hostname and Origin host header is Primary endpoint of from storage Static website

3. Test your CDN by opening the Endpoint hostname, which should open your static website from Azure Storage.

4. For your domain name add CNAME which points to your Endpoint hostname

5. In the Azure portal, display the settings for your CDN endpoint. Navigate to Custom domains under Settings to configure the custom domain and the SSL certificate.

6. Select Add custom domain and enter your domain name, then click Add.

7. Select the new custom domain mapping to provision an SSL certificate.

8. Set Custom Domain HTTPS to ON, then click Save. It may take several hours to configure your custom domain. The portal displays progress as shown in the following image.

9. Test your domain name

10. Enjoy 🎉

Price

Well, surely it depends on the number of users that you’ll have visiting your website and the size of it. But for my landing page price was approximately $0.10, which is not bad.

Price for hosting in Azure

So even if you have a bigger Angular website, you have a way to host it without WebApp and pay less for consumption.

Thanks for reading!

If you have other errors during deployment or you interested in another topic, please add comments and upvote 👍. I‘am interested in the dialog.