Host a cheap static website on Azure blob storage

In Azure you have the ability to host a static website that requires no server side rendering. This could be used for a basic website like a small company site using HTML, CSS, JavaScript or basic image files.

All we need is a Storage Account of type General Purpose v2 or Block Blob.

Configuration

I’ve created a new Storage Account for the purposes of this blog, as you can see it has the Account Kind of StorageV2 (general purpose v2).

Under Data Management, find Static website and click on it.

Move the slider to enabled, then enter an index document name (the page that a user will hit if they go to the root of your website) and an error document path (the page that a user will get if they try to browse to a page that doesn’t exist). Then click Save.

You’ll then be shown your website addresses (primary and secondary endpoints).

At this point if we browse to the website we get an error as we’ve no web content.

Now we need to create a basic homepage that our users will hit. I’ve just created a very simple website with the line “My test website” and saved it as Index.html.

Back in the Azure portal, upload your Index.html file using the Storage browser (you could use another method but for this demo Storage browser is fine). To do this, find the blob container $web and click Upload.

Click Browse for files and then choose your Index.html file, then Upload.

NOTE: The file name is case sensitive, notice I had “index.html” in the index document field name earlier but I uploaded “Index.html” above, this didn’t work until I set the index document name with a capital i.

Now we can see our website displays the content of our html file.

If we try “/test” on the end of our URL we’ll get the content does not exist message again as below, so we need to upload the 404.html next.

Here’s our 404.html file.

Following the same process as earlier I will upload the 404.html file to the $web container.

Now when we try to browse to a page that doesn’t exist, we get our 404.html file.

That’s it, you’ve created a basic website in Azure. You could then expand on this, uploading different pages the the same $web container, and link to those pages from your homepage.

Here I’ve uploaded a second page called page2.html.

And this just becomes accessible as a browsable page on our website.

Should you want to use your own custom domain, Microsoft has documentation on that here.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top