Posts Static Website Hosting in Microsoft Azure Storage
Post
Cancel

Static Website Hosting in Microsoft Azure Storage

Hosting Static website in Azure

Because this entire blog is mostly about Azure, it was only logical to host it in there and use as many Azure services as possible. But that is not the only reason for it. Azure offers several very interesting and convenient ways to host websites. It can handle everything, from simple static single page websites to monstrosity web applications running in dedicated server farms. Azure gives web admins more control over the resources than typical web hosting would and in some cases can cost as little as $0.10 per month.

This article starts the series where I hope to cover the most common cloud-unique scenarios.

Depending on when you are reading this, some of them might not be published yet. Make sure you come back or subscribe to my RSS feed to get notified when new articles are published.

Azure website hosting series

#NameRelease date
1Configure Azure storage for static website hostingThis article
2Using Azure DevOps Pipeline to automatically build and publish your Jekyll static website 
3Configuring Custom Domain and CDN for Azure Website HostingMay
4Hosting WordPress website in AzureMay
5How to host your website in Azure App ServiceMay
6Using GitHub Pages and GitHub Actions for automatic website deploymentMay
7Comparison of Azure Static Website hosting and GitHub PagesMay
8Using Azure Cognitive Services to add search function to static website hosted in AzureMay

Configuring Azure storage for static websites

Hosting a simple informative static website or a blog can be a hassle. Azure offers super inexpensive, Ad-Free and really fast method to host a website like this.

Subscription

First, you need an Azure Subscription. If you don’t have one, go here and create it for free.

Resource Group

Then we need a resource group and a storage account. Let’s create them.

Go to Azure Portal home page, click Create Resource, and type Resource Group.

Create New Resource

Select your Azure Subscription, typ a Resource Group name and select a region.

Create a Resource Group

Add Tags and click Create.

Storage Account

Now let’s create a storage account. Go to Create Resource again and select storage account. Select the Resource Group we just created, give your storage account a unique name, select location, performance and replication type. The selected name will be part of the URL that is provided for our static website. If you don’t plan on using the custom domain then you can play with the name here.

We also need to make sure that the account kind is StorageV2.

Leave the rest as is and create it.

Create Storage Account

Enabling static website

Once we have a storage account created, it is really simple to configure the Static website hosting. We just have to enable it and specify the names for the Index document and for the page-not-found error document. Click Save.

Enable Static Websites on Storage Account

That will create the $web container in our Storage Account and create a region-specific public-facing primary endpoint. This is the URL for our storage account. This is a slightly different URL from the storage account URL that can be used to access and copy files.

Upload your content

Now let’s go to our container.

Opening Azure $Web Container

From here we can upload content. Click Upload, select your static files from your computer and click Upload again. Successfuly uploaded files will show in the list of files.

Upload files to Azure blob

To upload multiple files and folders faster, you can use Azure Storage Explorer, a free cross-platform tool from Microsoft that allows you to access your Azure storage accounts and manage files.

And that’s it. We now have our website configured.

Now let’s go back to our Storage Account, click Static Websites and copy the URL of our website.

Azure Static Website URL

Open your browser and try it :)

How simple was that?

If you have any questions, let’s get in touch and discuss.

The next blog post in series is going to cover everything you need to know about configuring a custom domain for your hosting that you just created.

Thank you for sticking around.

Vukašin

Updated May 1, 2020 2020-05-01T11:36:14+02:00
This post is licensed under CC BY 4.0