Host A Static Website In A Azure Storage Account

What is a static website?

By the definition, the static website contains web pages with fixed content and displays the same content to every user on every visit, and static websites are very basic and easy to create.

Now static websites can be built using HTML, CSS and JavaScript and hosted on Azure Storage, and support client-side script execution but not server-side, if the static website needs some data processing or manipulation on server-side you can leverage it to Azure Cognitive Services or Azure Functions.

What is the use?

Static websites are very useful when it doesn’t require high bandwidth, backend support and targeted to limited audiences and mostly for the shorter duration of time.

Some useful areas are…

• Explain about the project and the road map.

  • Just for the sake of presentation in the meeting, create some html documents with the necessary content, upload them to the Azure blob storage and simply access the url from anywhere in the world.

• Showcase about the products, events and promotions.

  • Sales and marketing teams require nice and colorful web pages to walk through the concepts, so build a website using CSS & HTML, publish it on to Azure blob storage and share the link with the intended audience.

• Technical Documents & Manuals

  • Host some technical documentation and manuals relating to your project, and share it with the team across the globe for their perusal.

How it works?

When the static website service is enabled on a Azure storage account you need to enter the default document name; and error document name as optional and when the feature is enabled a container named $web will be created if it doesn’t already exist to upload your website files. Files in the $web container are read only, case sensitive and available to access anonymously…

How to access?

Available to the public web following this pattern:

Available through a Blob storage endpoint following this pattern:

It can also available with CDN and SSL support  and custom domain name  as well.

What is the pricing?

Azure Static website feature is free; the pricing is only for storage. But in addition to the storage costs, data egress will apply and in case Azure CDN is enabled to use a custom domain with an SSL certificate, that will also be applicable.

How to enable the Static Website feature and host a website using Azure PowerShell?

All you need is a valid Azure subscription and follow the steps (in PowerShell)…

• Login into Azure account.
• Select the required subscription.
• Select/Create a Resource Group.
• Select /Create a Storage Account (StorageV2).
• Set the current storage account to enable the Static Website feature.
• Enable the Static Website feature on the current storage account.
• Upload the website files to the blob storage container ($web).
• Verify the files uploaded successfully.
• Retrieve the URL to access the static website.

#requires -Module Az

## Ensure logged into your Azure account
if([string]::IsNullOrEmpty($(Get-AzContext)))
{ Add-AzAccount }

## Define the required variables 
$SubscriptionId     = '<SubscriptionId>'    # This is your subscription id (ex: 'f34d6539-c45b-4a93-91d9-0b4e6ffb6030')
$ResourceGroupName  = 'static-websites-rg'  # Resource Group
$Location           = 'southindia'          # Location
$StorageAccountName = 'staticwebsitesa999'  # Storage Account
$WebpagePath        = "C:\wwwroot\"         # Static website files

## Select the required subscription, in case there multiple subscriptions
Select-AzSubscription -Subscription $SubscriptionId

## Select/Create Azure resource group
# Parameters
$ParamList = @{
    Name    = $ResourceGroupName
    Location= $Location
}
# Create the resource group if it doesn't exist
$ResourceGroup = Get-AzResourceGroup @ParamList -ErrorAction SilentlyContinue
if ($null -eq $ResourceGroup) { New-AzResourceGroup @ParamList }

## Select/Create storage account
# Parameters
$ParamTable = @{
    Name              = $StorageAccountName
    ResourceGroupName = $ResourceGroupName
}
# Create the storage account if it doesn't exist
$StorageAccount = Get-AzStorageAccount @ParamTable -ErrorAction SilentlyContinue
if ($null -eq $StorageAccount)
{
    $ParamTable.Location    = $Location
    $ParamTable.SkuName     = 'Standard_LRS'
    $ParamTable.Kind        = 'StorageV2'
    $ParamTable.AccessTier  = 'Hot' 
    New-AzStorageAccount @ParamTable
}

## Parameters required to use with storage Cmdlets
$ParamTable = @{
    Name              = $StorageAccountName
    ResourceGroupName = $ResourceGroupName
}

## Set the storage account to enable the static website feature
Set-AzCurrentStorageAccount @ParamTable

## Enable the static website feature for the selected storage account
# Ensure the documents are created with the names mentioned 
Enable-AzStorageStaticWebsite -IndexDocument "index.html" -ErrorDocument404Path "error.html"

## Upload the website pages to the azure blob container
Get-ChildItem -Path $WebpagePath -Recurse | Set-AzStorageBlobContent -Container '$web'

## Verify the files uploaded to the azure blob container
Get-AzStorageContainer -Name '$web' | Get-AzStorageBlob

## Retrieve the public URL to access the static website
(Get-AzStorageAccount @ParamTable).PrimaryEndpoints.Web

## Add custom domain to your static website, but need to add CNAME record in your domain dns server
Set-AzStorageAccount @ParamTable -CustomDomainName "www.yourdomain.com" -UseSubDomain $True

With the glory of GitHub public repositories, I have cloned a simple website and created my profile page just like that and hosted it on my Azure Storage.