Traditional shared hosting providers generally cost anywhere between $8 – $10 USD per month. The reason is you need to reserve some CPU and Memory resources on a VM to host your website. These are very useful for hosting dynamic web sites or applications with small amounts of traffic. However, if you have a static website then you don’t need CPU and Memory on a VM, all you need is storage and bandwidth. Since hosting a static website or static front-end to an API powered web application only requires storage and bandwidth, it makes Azure Storage a perfect service to host such a website. In this article I’ll explain what’s necessary to host static website in Azure Blob Storage, then I’ll show how you can estimate the hosting cost of the site as well. (Hint: It’s really cheap!)
Hosting Static Content
When hosting a static website, the best cloud service option within Microsoft Azure would be use use Azure Storage, more specifically Blob Storage. Azure Blob Storage is a massively scalable, object storage service that allows you to easily and cheaply store and service up hundreds to billions of objects.
Objects in Azure Blob Storage would be HTML files, images, videos, css, js, audio, or any other static content. There’s no need for an application written in .NET, Node.js, or some other language/framework since the Azure Blob Storage service provides the capabilities to host static content directly built into the platform itself.
Azure Blob Storage service is a Platform as a Service (PaaS) based storage service that allows you to extremely easily host static content for future download. This is what makes it perfect for hosting static websites.
Additionally, you can setup your own custom domain name to map to the Azure Blob Storage account too. Allowing visitors to your site to access it just as they would any other website on the Internet!
Creating Static Website in Azure Blob Storage
Step 1: Using the Azure Portal you can extremely easily setup a new Azure Storage Account.
Step 2: Once the Storage Account is created, you can go the Azure Portal and create a new Blob Container on the Storage Account with the Access Type set to either Blob or Container allowing Anonymous access to the files stored.
Step 3: Next you can use the Azure Storage Explorer to upload your static content to the Azure Blob Storage Container.
Step 4: Access the static website hosted in Azure Storage. The full URL will be made up of the URL of the Storage Account, following by a “/” and the name of the Container, then another “/” and the name of the File or Blob. For example, the URL for an “index.html” file within a Container named “content” would be as follows:
https://staticwebsitehosting.blob.core.windows.net/content/index.html
Custom Domain Mapping
With Azure Blob Storage you aren’t just limited to using the auto-generated domain name for blob storage that resides at *.blob.core.windows.net. You can setup custom domain name mapping to use your own domain name or subdomain to give your static website a nicer URL for accessing.
Limitations
Hosting a static website in Azure Blob Storage works really well, however, it does have a few limitations you’ll want to keep in mind when deciding where to host a static website.
- When accessing your static website, you will be required to include the name of the Blob Container in the URL, so the full URL even with a Custom Domain would be something like: http://domain.com/content/index.html
- There’s no method to define a default document. So when navigating to the root of the website, like http://domain.com/, you won’t get automatically redirected to http://domain.com/index.html as you would expected with a traditional website hosting provider or with Azure Web Apps hosting.
- Currently, SSL / TLS is only supported for the *.blob.core.windows.net domain name. You are not able to setup SSL with a Custom Domain mapping
Due to these limitations you wouldn’t really host a root or primary website in Azure Blob Storage, but you could definitely use it to host landing pages or other marketing sub-sites that are linked to from email blasts, ads, or other methods.
Hosting Cost
The biggest benefit to hosting a static websites in Azure Blob Storage is the cost. Blob Storage is the cheapest option to store files in Microsoft Azure. There are two metrics that you pay for with Blob Storage: Storage and Bandwidth. Using the Azure Pricing Calculator you can easily calculate the cost associated with your static sites.
If you had up to 1 GB of static files stored for your static websites, with a total monthly bandwidth usage of 10 GB / month, the total monthly hosting cost with Azure Blob Storage would be about $0.46 USD / month.
Happy cost savings!
Reblogged this on The Flying Maverick.
Great article! Limitation no 1 isn’t a problem though, there is a special $root container available:
https://docs.microsoft.com/en-us/rest/api/storageservices/fileservices/working-with-the-root-container
Have they done anything to fix the issue where you can use extensionless URLs? AWS has a website configuration for S3, which works awesome. Cannot believe Azure has not added this feature since AWS has supported pretty much since S3 was introduced.
I have heard that it’s in the roadmap to implement extension less URLs similar to what AWS supports, but I haven’t seen anything to indicate when this may be released.
Nice article. Is there a way to use a git push to deploy content to a blob storage container?
Azure Blob Storage is not a Git server, so not directly. However, you could setup an CI/CD pipeline with VSTS or other system that could publish to Blob Storage when commits are made to a Git repository.
I tried different ways to use my custom domain and failed to make this setup work with the functions proxy without having to sign up for a paid app services plan. After a few hours of digging I found this GitHub project that let’s you use DNS records to redirect pages: http://redirect.name/. After setting the two DNS records, an CNAME and a TXT record for the redirection I now have my domain linked to the specific page. I also have relatively easy control over the page to use. thought this might be helpful to someone who comes across this great instructions!
Chris, I am interested to move my wordpress site to static content website, What will be best?
It depends on what you need. Azure Storage has static website support that’s neat, but I’d recommend checking out GitHub Pages. You can host a website for free from a Github repo using a custom domain for free. I have a few microsites hosted this way and it’s great as long as they don’t have much traffic.