--- title: "Create & Host Azure Static Websites with Ease" description: "Build and host an Azure static website with HTTP and HTTPS support using HTML, CSS, and JavaScript." canonical: "https://adamtheautomator.com/azure-static-website/" --- # Create & Host Azure Static Websites with Ease > Build and host an Azure static website with HTTP and HTTPS support using HTML, CSS, and JavaScript. Source: https://adamtheautomator.com/azure-static-website/ --- ATA Learning Tap to hide [ ATA Learning ](/) * [Home](/) * [Tutorials](/tutorials/) * [Instructors](/author/) * [Advertising](/advertising/) * [Recommended Resources](/resources/) * [About Adam](/about-adam/) Search for: * [](https://twitter.com/adbertram) * [](https://github.com/Adam-the-Automator) * [](https://www.linkedin.com/company/adam-the-automator-llc) * [](/feed/) ![Create & Host Azure Static Websites with Ease](https://adamtheautomator.com/wp-content/uploads/2019/07/5d238ae5c824b514689ea66e.jpg) # Create & Host Azure Static Websites with Ease [![](https://secure.gravatar.com/avatar/d0b9d42e21e5622713f8b693aa5c0f9244d5f7dd200ed29b8398f52dee5de337?s=192&d=mm&r=g)Adam Bertram](https://adamtheautomator.com/author/adam-bertram/)8 July 20194 min. read Categories: [Cloud](/category/cloud/) Tags:[CloudFlare](/tag/cloudflare/)[Microsoft Azure](/tag/microsoft-azure/) Table of Contents * [Create an Azure Storage Account](#create-an-azure-storage-account) * [Allowing HTTP and HTTPS for Your Static Site](#allowing-http-and-https-for-your-static-site) * [Create an Azure Static Website](#create-an-azure-static-website) * [Set up CloudFlare DNS](#set-up-cloudflare-dns) * [Set up an Azure Static Website Custom Domain](#set-up-an-azure-static-website-custom-domain) * [Testing it Out](#testing-it-out) * [Summary](#summary) Hosting an Azure [static website](https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website) in Microsoftis a way to build simple web pages. Coupled with the ability to use your own domain name (custom domain), choosing to use a static website is a win-win. Using a static website means you don’t have to mess around with complicated website hosting either. To make the deal even sweeter, you can also integrate CloudFlare’s cloud network to improve speed, security and manageability. Here’s how. In this blog post, I’ll show you how to create and host a static website in Azure capable of serving up pages both via HTTP and HTTPs with HTML, CSS, JavaScript or whatever other kinds of content you’d like to build. Once the Azure static website is created, we’ll then associate our own domain to it using a feature called a _custom domain_ using a [free CloudFlare account](https://www.cloudflare.com/plans/) for DNS and some URL forwarding. > _Note that you will be charged for any Azure resources you deploy. Be forewarned if you set up your blog and a month later get a bill! Although it should be minimal, always ensure you know [the costs ahead of time](https://azure.microsoft.com/en-us/pricing/details/storage/blobs/)._ Assuming you already have a Microsoft Azure account created and are logged into the Azure portal with an administrative user account, proceed on. Let’s get started! ## Create an Azure Storage Account To create an Azure static website, you’ll need to create an Azure storage account first. If you don’t know how to create an Azure storage account, check out the [Create an Azure Storage Account Microsoft Learn tutorial](https://docs.microsoft.com/en-us/learn/modules/create-azure-storage-account/). Below you will see the settings I’m using to set up my storage account. There’s nothing fancy going on here since the website I’ll be serving from Azure will not be resource intensive. ![Azure Storage Account Settings](https://adamtheautomator.com/content/images/2019/07/create-azure-static-website-custom-domain-cloudflare---image-7.png) Azure Storage Account Settings Since we’ll be using the CloudFlare network eventually, there’s no reason to spend a little extra to get redundancy built into the storage account. I’ve chosen the _Locally-redundant storage (LRS)_ option for this reason. ![Using Locally-redundant storage (LRS) option](https://adamtheautomator.com/content/images/2019/07/create-azure-static-website-custom-domain-cloudflare---image-6-1.png) Using Locally-redundant storage (LRS) option ### Allowing HTTP and HTTPS for Your Static Site Once you’ve created the storage account, it’s not quite time to create the static website. If you will ever need HTTP access to your static website on your storage account, you’ll need set the _Secure transfer required_ option on the storage account to _Disabled_. You’ll find this option in the _Configuration_ section as shown below. ![Enable HTTP access to Azure Storage Account](https://adamtheautomator.com/content/images/2019/07/create-azure-static-website-custom-domain-cloudflare---image-8.png) Enable HTTP access to Azure Storage Account If you don’t disable _Secure transfer required_, your static website will never have the ability to serve up HTTP resources. > _Note that once you’ve disabled Secure transfer required, you may need to wait for up to a minute while the change is applied. I ran into some issues receiving Access Denied error messages when attempting to go create to creating the website._ ## Create an Azure Static Website Now click on the _Static website_ option in your storage account and toggle the _Static website_ option to _Enabled_ as shown below. You’ll see that Azure will create a storage container in your storage account called _$web_ and assign you a primary endpoint like _https://.z13.web.core.windows.net_. This endpoint will be the one you’ll use in CloudFlare once we get there. Also, as you can see below, I’ve defined an _Index document name_ as _index.html_. I’m doing this here so that I can upload a simple HTML file to test whether or not we can hit the webpage via our custom domain later. ![Enabling Azure Static Website](https://adamtheautomator.com/content/images/2019/07/create-azure-static-website-custom-domain-cloudflare---image-14.png) Enabling Azure Static Website For a great video walkthrough on hosting a static website in Azure, check out this TechSnips short how-to video. How to Host a Serverless Static Website in Azure by Matt Browne @ TechSnips ## Set up CloudFlare DNS Before we can associate a custom domain to our Azure static website, we must first ensure DNS is set up properly with our domain name. Assuming that you’ve already [created a CloudFlare account and set up your site](https://support.cloudflare.com/hc/en-us/articles/201720164-Creating-a-Cloudflare-account-and-adding-a-website), we’ll now need to add a couple CNAME records which we’ll use to both verify to Azure we own this domain and to forward traffic to the static website primary endpoint. Go to the DNS section of your site in CloudFlare and add the following DNS records: | Type | Name | Value | Status | | --- | --- | --- | --- | | CNAME | asverify | asverify.%storageaccountname%.blob.core.windows.net | Grey cloud | | CNAME | %example.com% | %storageaccountname%.z13.web.core.windows.net | Orange cloud | ![CloudFlare DNS for Azure Static Website](https://adamtheautomator.com/content/images/2019/07/create-azure-static-website-custom-domain-cloudflare---image-10-2.png) CloudFlare DNS for Azure Static Website To toggle between grey and orange cloud icons, click on the cloud. If the cloud is orange, CloudFlare does some magic to the _asverify_ DNS record which will prevent Azure from verifying your custom domain. ## Set up an Azure Static Website Custom Domain Head back over to the Azure portal and click on _Custom domain_ within your storage account. Here, you will be presented with the options to verify the custom domain. Even though Azure says that you use option #1 to verify the account, using CloudFlare, I had no luck at all doing this. When trying option #1, I repeatedly ran into this error below when navigating to the site. ```markup InvalidQueryParameterValue Value for one of the query parameters specified in the request URI is invalid. RequestId:076c687e-b01e-0012-1c9e-31eb8e000000 Time:2019-07-03T12:51:53.7137522Z comp ``` Since we’ve already set up DNS in CloudFlare, provide your domain name in the box without the http or https and then select _Use indirect CNAME validation_. This method will query the _asverify_ DNS record created in CloudFlare to verify you own the domain name. ![Custom Domain Azure Static Website](https://adamtheautomator.com/content/images/2019/07/create-azure-static-website-custom-domain-cloudflare---image-11.png) Custom Domain Azure Static Website Click _Save_ and if all goes well, your custom domain should be verified! ## Testing it Out At this point, the initial set up should be working. To test it out, create an _index.html_ page with any text in it like “_Yay! My site is working!”_. This will be the static content that will be rendered by the user’s browser. Then, upload that file to the static website by going to _Blobs_ and clicking on the _$web_ storage container that was created. ![Inspecting the Azure storage blob](https://adamtheautomator.com/content/images/2019/07/create-azure-static-website-custom-domain-cloudflare---image-12-1.png) Inspecting the Azure storage blob Then, upload the index.html file by clicking on the _Upload_ button. ![Uploading file to storage container](https://adamtheautomator.com/content/images/2019/07/create-azure-static-website-custom-domain-cloudflare---image-13-1.png) Uploading file to storage container Now try to navigate to http:// and https:// and you should see the text in your test _index.html_ file. ## Summary You should now have an Azure static website set up that can be accessed via your custom domain with speed and security improved by using CloudFlare! Share this article [Share on X](https://twitter.com/intent/tweet?url=https%3A%2F%2Fadamtheautomator.com%2Fazure-static-website%2F&text=Create%20%26%20Host%20Azure%20Static%20Websites%20with%20Ease)[Share on Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fadamtheautomator.com%2Fazure-static-website%2F)[Share on LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fadamtheautomator.com%2Fazure-static-website%2F) ## Related Posts ![](https://adamtheautomator.com/wp-content/uploads/2026/07/featured_image-1.webp) ### [Microsoft Azure Certification Roadmap: Choose the Right Path](/azure-certification-roadmap-2/) Choose the right Microsoft Azure certification for your career goals. Compare AZ-900, AZ-104, AZ-305, AZ-400, AZ-700, DP-700, study timelines, and 2026 retirements. ![](https://adamtheautomator.com/wp-content/uploads/2021/05/How-to-RenameMove-Azure-Resource-Groups-GUI-and-CLI.jpg) ### [Smart Ways to Rename Azure Resource Groups (GUI and CLI)](/rename-azure-resource-group/) Unlock the secret to Rename Azure Resource Groups! Dive into our easy guide for reshaping your Azure landscape with Portal, PowerShell, and CLI techniques. ![](https://adamtheautomator.com/wp-content/uploads/2021/03/azure-cli.jpg) ### [Master Azure CLI: Command Your Cloud with Confidence](/azure-cli/) Unlock the full potential of cloud management with the Azure CLI. This guide provides the essentials to get you started with Azure resources efficiently. ## Categories * [IT Ops](/category/it-ops/) * [Cloud](/category/cloud/) * [DevOps](/category/devops/) * [Home Ops](/category/home-ops/) * [Information Security](/category/infosec/) * [Software Development](/category/software-development/) ## Site * [Home](/) * [Tutorials](/tutorials/) * [Instructors](/author/) * [Advertising](/advertising/) * [Recommended Resources](/resources/) * [About Adam](/about-adam/) Copyright 2026© ATA Learning | [Privacy Policy](/privacy/)