How much does it cost to host a static site on Azure?
Azure can be used for this purpose at little or no cost. Except for Azure DNS (which costs 0.5 USD and is optional), none of the services used in this tutorial have any fixed costs, and the only thing you will be paying for is bandwidth and storage. You can find information about those costs with the Azure pricing calculator. For a small blog like my own, the total cost is unlikely to amount to much more than a dollar or two over a given month.
If you have a Visual Studio subscription, you are entitled to a monthly renewing credit. This credit can be activated from the Visual Studio Subscription website. Look for the Azure credit tile and click the link inside to activate the subscription.
What is covered in this tutorial?
We are going to cover the following:
- Set up an Azure Storage container for static website hosting.
- Set up a CDN endpoint for the website.
- Configure a custom domain with Azure DNS.
- How to enable HTTPS.
- How to enforce HTTPS.
- Configure root domain forwarding.
- Using the Azure Storage Explorer app to update your website.
Before proceeding, it is assumed that you have an Azure account with an active subscription.
If you don’t have a VS subscription you can always just head over to the main Azure website and sign up to a normal account from there.
Step 1: Storage account
We need to create a storage account to hold the storage container which will hold our files in the cloud. To start, you can search for “Storage account” from the Azure Portal start page:
From the storage account blade, click the Add button to create a new storage account. First choose your subscription and resource group. You may have to create a new resource group if you haven’t done so already. I called mine RG1. You must also find a unique name for your account. For this tutorial I chose the name cbtutorials. The rest of the properties on the Basic tab can use the default values:
From here you can just press Review + create.
Verify the properties and then click Create.
Wait until the deployment is complete and navigate to your newly created container.
Proceed to the static website blade from the menu on the left. Click enable to enable static website hosting for this container. Enter the filenames that should be used for index (default) and 404-error landing pages. For now, I’m going to use index.html and 404.html, which I will upload shortly. Press Save and it should create a web endpoint. Note the URL of the primary static website endpoint; we will use it shortly when creating a CDN enpoint. You can use also this adress to access your website directly from the storage account.
Step 2: Set up a CDN endpoint
In order to use a custom domain with HTTPS enabled, we will need to provision a CDN endpoint for the website. The first step is to set up a CDN profile. Navigate to CDN profiles in the Azure Portal and click Add. Type in a name (for this tutorial I will use cbtutorials-cdn-profile) and choose subscription/resource group. I will also use the Standard Microsoft pricing tier. Don’t check the Create CDN endpoint now box, I will do that manually later. Click Create and wait for the profile to deploy.
Navigate to the newly created CDN profile and start creating a new enpoint (by clicking + Endpoint from the profile overview page). Choose a unique name (I’m using cbtutorials here) and set the Origin type to Custom origin. Use the static website endpoint of your storage container as Origin hostname and Origin host header. Click Add.
Step 3: Set up DNS configuration
Now that we have our CDN endpoint set up, we can set up a custom domain with HTTPS enabled.
This tutorial assumes that you will be using Azure DNS for your domain, which makes the configuration a bit simpler. Using the standard tier, this currently costs 50 cents monthly per domain (will be deducted from any monthly credit you have). It should also be possible to use an external DNS provider, but that is not covered here.
To set up Azure DNS for your domain, do the following:
- In the Azure Portal, go to DNS zones and click + Add.
- Set the Name to the root of your domain.
- Review and create the DNS zone.
- Once deployed, open the properties of the DNS zone.
- Note the four name server adresses. Copy these into the name server configuration with your domain registrar (e.g. GoDaddy, Namecheap, etc).
Now that your domains DNS is managed with the Azure DNS Zone, we can add a CNAME record for the www subdomain so that www.codebolt.com connects to our CDN endpoint. From the DNS zone overview page, press + Record set.
Set name www, select type CNAME and choose Yes for Alias record type. Find the CDN endpoint you just created in the dropdown. Click OK. Azure now creates the record and automatically adds a verification record, which is also required.
We’re now able to navigate to our website with the URL http://www.codebolt.com. However, HTTPS is support is still missing.
Step 4: Enable HTTPS
Navigate back to the properties for your CDN endpoint in the Azure Portal. Go to the Custom domains page and add press + Custom domain.
Use the www subdomain that we just created a CNAME record for as custom hostname, in this case www.codebolt.com. Press Add.
Wait untill the domain appears in the custom domains list. Click it and switch Custom domain HTTPS to On. Select certificate management type CDN managed.
Click Save. Wait untill the process completes before proceeding, this could take a while. When finished, you can verify that https://www.<yourdomain>.com is working in your browser.
Step 5: Enforce HTTPS
Now your page can be used with both HTTP and HTTPS. However, I would recommend setting it up so that http://www.<yourdomain>.com automatically resolves to https://www.<yourdomain>.com.
Navigate back to the properties of your CDN endpoint and go to the Rules engine page. Here we can set up a rule that transforms HTTP requests to HTTPS by doing:
- Press + Add rule to add a new rule. In this example I am using the name enforcehttps, but you can choose anything.
- Press + Add condition and select type Request Protocol. Set Operator to Equals and Value to HTTP.
- Press + Add action and select type URL Redirect. Set redirect type to Found (302) and protocol to HTTPS. The rest of the fields should remain blank.
- Press Save.
With this rule enabled, all HTTP requests are transformed to HTTPS.
Step 6: Root domain redirect
Sadly, Azure doesn’t currently support using the root domain as hostname for the website with HTTPS enabled the way mentioned above. This means we can’t use https://codebolt.com, but have to go through a subdomain (like www). However, it is possible to set up a redirect so that codebolt.com requests are redirected to www.codebolt.com, which is a useful compromise.
To do this, we first need to add a new record to our DNS zone:
Leave name blank, select type A and set Alias record type to Yes. Select the correct CDN endpoint as before and click OK.
Now go to the custom domains of the CDN endpoint and add a reference to the root domain there (simply <yourdomain>.com). You don’t need to enable HTTPS for this domain.
Finally, go back to the Rules engine of the CDN endpoint and set up the following rule:
- Add a condition with type Request URL, operator Begins With and value http://<yourdomain>.com.
- Add an action with type URL Redirect, redirect type Found (302), protocol HTTPS and hostname www.<yourdomain>.com. Leave the other fields blank.
- Save. Use the arrows to move this rule above the other rule, making it higher priority in the chain of evaluation.
With this rule enabled, all requests at the root are redirected to the www subdomain, meaning you should be able to simply type <yourdomain>.com into your browser, and end up at http://www.<yourdomain>.com automatically.
Step 7: Using the Azure Storage Explorer to upload files
The Azure Storage Explorer is a desktop application that makes browsing and uploading files a bit more convenient than simply using the web interface. You can download it here.
Once installed, launch the application. First run, you may need to sign into your Microsoft account, after which you will be asked which resources should be made visible in the app. Typically, you will just want to include everything. In the Explorer view on the left, find your storage container and navigate to the $web blob container:
Now press the Upload button and upload some files:
Notice that 404.html and index.html are the files we referenced as error and landing page when we set up our storage container back in step 1 of this tutorial.
After updating, you may have to purge the CDN endpoint in order to make your changes visible on the web. To do this, navigate to your CDN endpoint, click Purge, check Purge all and execute.
Congratulations, your website is now up and running! Just continue to use the Storage Explorer to upload your website files. If your website is a Jekyll blog or similar, I recommend placing it in a subfolder. When updating, you can then just delete the old folder and upload the new version.
If you have any remarks, questions or suggestions, just leave me a comment below.