In this tutorial, you will learn how to host your Umbraco media folder within Azure. I'm assuming you already have an Azure account, if not then head over to Azure and create an account.

Setting Up Azure With Your Umbraco Files

In this section, we will first create an Azure blob storage container. To create some storage within Azure, log-into the Azure portal and go to the Storage Account Page and then create a new account. After creating an account you should be given an account name and one of the access key, keep a note of these as you will need them shortly.

Next, we will need a way to manage the files on our local PC. The easiest way to do this is to download Azure Storage Explorer.

To copy your media files into Azure, within your website's webroot drag all the contents within the media folder and drag them into the Azure file storage account.

Give it a few minutes and the explorer should refresh with all your changes in it.

Configuring Umbraco

Next, we will need to configure Umbraco to use our new cloud storage. First, you need to install 'UmbracoFileSystemProviders.Azure'. Within Visual Studio, open the package manager console:

Tools > NuGet package manager

Run this command

Install-Package UmbracoFileSystemProviders.Azure

To configure Umbraco to use a different file system provider, we will have to modify some config within filesystemprovider.config. The fileSystemProviders.config contains all the configurations that tell Umbraco to interact with file systems. If you want to read a little more about this you can view the official Umbraco documentation here.

You can find this file within the 'config' -> 'filesystemprovider.config'. If you open up a default Umbraco local storage, you should see something similar to this:

<FileSystemProviders>
  
  <!-- Media -->
  <Provider alias="media" type="Umbraco.Core.IO.PhysicalFileSystem, Umbraco.Core">
    <Parameters>
      <add key="virtualRoot" value="~/media/" />
    </Parameters>
  </Provider>
   
</FileSystemProviders>

To configure Azure you will need to update/add containerName, rootUrl and connection string values. You can find the connectionString details within the Azure portal.

<add key="containerName" value="<< Your Container Name >>"/>
<add key="rootUrl" value="http://<< Your Storage Account Name >>.blob.core.windows.net/"/>
<add key="connectionString" value="<< Your Container Connection String >>"/>

If you have everything set-up correctly, if you load your site it should be working correctly. If you really want to you can safely delete all the files within your webroot files system.