Today we will learn about hosting any static website in azure, for me it’s the cheapest solution. You can serve static content (HTML, CSS, JavaScript, and image files) directly from a storage container named $web. Hosting your content in Azure Storage enables you to use serverless architectures that include Azure Functions and other Platform as a service (PaaS) services.
We are going to learn here how to do it step by step, all you need is azure subscription and your website contents.
Hosting website in azure with your custom domain is super simple, here is the summary of the steps you will need :
1. Enable static website hosting
2. Upload your website files
3. Find the website URL
4. Enable Azure CDN for your static website
5. Map a custom domain with HTTPS enabled
Let’s go into details one by one
1. Enable static website hosting
· Sign in to the Azure portal to get started.
· Locate your storage account and display the account overview.
· Select Static website to display the configuration page for static websites.
· Select Enabled to enable static website hosting for the storage account.
· In the Index document name field, specify a default index page (i.e index.html).
· That would be the landing page when users navigate to your website
· Click Save. The Azure portal now displays your static website endpoint.
2. Upload your website files
These instructions show you how to upload files by using Storage Explorer which is a downloadable outside of Azure portal. However, you can also use the version of Storage Explorer that runs inside of the Azure portal.
1. Login to Storage Explorer
2. Expand the BLOB CONTAINERS node, and then select the $web container.
3. Choose the Upload button to upload files. I had downloaded template website from here and customized a little.
3. Find the website URL
You can view the pages of your site from a browser by using the public URL of the website.
In the pane that appears beside the account overview page of your storage account, select Static Website. The URL of your site appears in the Primary endpoint field
You can browse the website as you can see :
6. Enable Azure CDN for your static website
You can enable Azure CDN for your static website directly from your storage account, CDN is Azure Content Delivery Network (CDN) and it is designed to send audio, video, images, and other files faster and more reliably to customers using servers that are closest to the users. This dramatically increases speed and availability, which results in significant user experience improvements.
Locate your storage account in the Azure portal and display the account overview.
Under the Blob Service menu, select Azure CDN to open the Azure CDN page.
1. In the CDN profile section, specify whether to create a new CDN profile or use an existing one. A CDN profile is a collection of CDN endpoints that share a pricing tier and provider. Then enter a name for the CDN that’s unique within your subscription.
2. Specify a pricing tier for the CDN endpoint. To learn more about pricing, see Content Delivery Network pricing.
3. In the CDN endpoint name field, specify a name for your CDN endpoint. The CDN endpoint must be unique across Azure and provides the first part of the endpoint URL. The form validates that the endpoint name is unique.
4. Specify your static website endpoint in the Origin hostname field.
To find your static website endpoint, navigate to the Static website settings for your storage account. Copy the primary endpoint and paste it into the CDN configuration
7. Map a custom domain with HTTPS enabled
Go to CDN profile that you created by searching for CDN profile and click on summary screen.
Click on endpoint that you see :
Note down the endpoint host name, for me its :
https://learnwithme.azureedge.net
click on custom domain on the top and it will ask you for custom domain name
Provide your custom domain name and click add.
Note : you will need to add a cname record with your DNS provider, for me its ionos.com so I went and added following CNAME record.
I takes some time to update the DNS record name , give it sometime and you website is ready on a custom domain:
Final touch, you need to put it on https, click on custom domain you just added and enable https:
Select the defaults and save the settings :
Best part, there are no costs for certificate acquisition or renewal and no additional cost for HTTPS traffic. You pay only for GB egress from the CDN.
This will take some time to validate the domain, acquire certificate and complete the process, it may take up to two hours.
Once above is complete, you are done, and your website is ready on a custom domain with https encrypted traffic.
In the meanwhile, you can try accessing your website :
https://learnwithme.azureedge.net
once your certificates request is complete, you can try accessing the website on your custom domain, for me I have it on following and I can access website on https
Feel free to post any comments if you face Any challenges Following above.
