A Guide to Hosting a Static Website in Azure
Up until now I’d never considered Azure for hosting a simple website. I’ve previously setup and hosted several websites whether it be independently hosted, or through use of other platforms, WordPress, Squarespace etc.
However, I was pleasantly surprised to learn that everything needed to host a static website in Azure for my purposes was almost free! If it wasn’t for those pesky CDN costs.
I wanted to host a static website that hosted a coming soon page and thought, why not try Azure? One of my key requirements was to resolve the naked domain, thirddecade.store (no www.), which is where I had difficulty. I managed to get my setup right eventually, thanks to following Microsoft articles and several other blog posts, but I wanted to consolidate all that information. This post will guide you through the steps necessary to setup your website using either a www. prefix or a naked domain.
Before we dive in, here’s an overview of the core components we’re going to use.
Here’s How I Did It
Before diving in, this post assumes that you are familiar with creating resource groups to keep your resources organised.
Setup DNS in Azure
You’re going to want to create a DNS Zone. The Name under instance details must be your domain name.
After creation, navigate to your newly created DNS zone and you’re going to want to note down the name servers for the next step.
Now you have a set of name servers created in Azure. Next you’re going to log-in in to your domain registrar to update your name servers for your domain to point those for your DNS zone in Azure. Every Domain registrar is different, so it’s impossible to document, but here’s a screenshot example below.
Prior to making any changes it’s a good idea to create a copy of any existing records in your DNS registrar.
Adding a CNAME record to the root of domain is bad practice. Azure doesn’t even permit you to do this which is great. However, I believe some hosting companies do allow you to do this. Here’s a good blog post on why this is considered bad practice.
Setup static website through a storage account
Next up, you’re going to create a storage account which can later be converted into a static website. From the screenshot below, my ‘Storage account name’ was taken because I had already set this up and working backwards to document and share with you all.
Navigate to your newly created storage account, click ‘Static website’ on the left pane and toggle ‘Static website’ to ‘Enabled’. I’ve chosen to set my ‘Index document name’ to coming-soon.html but you can enter any other name, as long as it matches the file name of the file you’re going to upload as your home page. Copy the ‘Primary endpoint’ for use later on. Click ‘Save’ and voila, few minutes later you now have a Static website, but now we need a homepage!
Click ‘Storage Explorer (preview)’ in left hand pane of the Storage account. By default by enabling Static website Azure should’ve created ‘$web’ container under ‘Blob containers’. Enter the ‘$web’ container by simply clicking the name and click ‘Upload’.
Here we’re going to upload our home page for our website which for me was coming-soon.html. Browse to the local file on your computer and click ‘Upload’. You can optionally overwrite existing files by selecting the option ‘Overwrite if files already exist’. You’ll see from my screenshot below that I have additional files which are the stylings for a webpage I created. These are optional.
At this point, if you navigate to the primary endpoint for your Static website which you copied from earlier on and paste that into a new tab in the browser you should see your home page render.
Resolve domain
Now this is where we hook up everything together so when we navigate to either www.thirddecade.store (swap for your domain) or thirddecade.store, then both will resolve to our homepage.
The way in which Microsoft Azure supports resolving of the root domain is through a CDN (Content Delivery Network). Now you may not need a CDN for your content, I didn’t either, but if you want to resolve the root domain, you need to setup a CDN. So, let’s do that now.
On your Storage account, in the left pane, click ‘Azure CDN’.
Give the endpoint a name. You can probably use any of the four available options for pricing tier but I’ve only used Standard Microsoft. CDN endpoint name, for consistency I recommend using the name of your website, for example I’ve used ‘thirddecade’. This one is important, the ‘Origin hostname’ must have the same value as your Primary endpoint for the Static website Storage account which you copied earlier. See screenshot above for example. Click ‘Create’.
At this point, if you navigate to your CDN Profile in Azure, you will have something that looks similar to this, but tailored to your domain.
Next, we are going to add 2 new record sets to our DNS zone that map to our newly created CDN Endpoint. This is a precursor to us being able to map our custom domain to our CDN.
Navigate to your DNS zone and click ‘+ Record Set’. The first one will enable our website to resolve www. We’re going to use cdnverify as a method that allows to verify that we own the domain. Name must be cdnverify.www, type must be CNAME and Alias will be your CDN endpoint prefixed with cdnverify.
Repeat for a second record set which will allow us to add the root as a custom domain to our CDN endpoint.
Now we are going to add our custom domain to our CDN endpoint. So first, navigate to your CDN endpoint resource in Azure and click ‘+ Custom domain’. In ‘Custom hostname’ enter ‘www.<yourdomain>’.
Add a second custom domain but this time, ‘Custom hostname’ should just be <your domain>.
At this point you should now have two custom domains mapped to your CDN endpoint.
You can optionally enable HTTPS for these domains by clicking into the Custom domain and selecting ‘On’ for ‘Custom domain HTTPS’. Select CDN managed’ for ‘Certificate management type’ and click ‘Save’. This can take some time to complete.
Here’s the final piece of the puzzle that enables our DNS to resolve to our custom domain through our CDN endpoint. One final record set is required.
Navigate back to your DNS zone and click ‘+ Record set’. This time we want an ‘A’ type record at the root domain so ‘@’ but we want this to be an alias record set that maps to our Azure CDN resource.
After many steps, we finally have a working site at the root domain! If you enter into a browser <yourdomain> you should see your home page which you uploaded towards the beginning.
You can also use www.<your domain> and try both http and https (if you enabled this setting).
Now that we’ve mapped our domain to our CDN endpoint, there’s no real need to keep ‘cdnverify’ in our dns records. Back to our record sets we go!
Add a new CNAME record set with a prefix of www which maps to your Azure CDN endpoint.
You can now delete any record sets that had cdnverify in the name or value (should be 2). Your final set of DNS records should look as follows.
One final thing! It’s best practice for you to ensure users who enter your web address to visit your site are redirected to https. Some browsers redirect users to https automatically. We want to make sure this is the case for all browsers.
Navigate to your CDN endpoint resource and in the left pane click ‘Rules engine’.
We’re going to want to add a new rule, so click ‘Add rule’ and then firstly we must check if the user has landed on http. To do this we click ‘Add condition’ and select ‘Request protocol’. We then set ‘Operator’ to ‘equals’ and ‘Value’ to ‘http’. If this condition is met we want to perform a URL redirect to https.
For the rule, click ‘Add action’ and select ‘URL redirect’. Set ‘Type’ to ‘Found (302) and ‘Protocol’ to ‘https’ and click ‘Save’.
There we have it. Now if you navigate to http://<your domain> you should be redirected automatically to the https version of your website.
Thank you sticking with this post and its many steps but I hope you found it useful if you’re wanting to setup a static website on Azure hosted at the root of your domain.
Do you enjoy creating with Azure? Join The Capgemini Microsoft Team!
