Azure Storage Account Static Website

Have a requirement for a static website in either HTML, CSS, JavaScript?

Have a look at creating a static Website using an Azure Storage Account, simple to create and very cost effective! In this blog, I will show to do this via both Portal and PowerShell

A v2 Storage Account is required. During initial setup of the website it will create a folder called $web as a blob within the Storage Account

Note:- Contents of $web are case sensitive

Contents hide

1 Using Azure Portal

2 Using Azure PowerShell

Using Azure Portal

Storage Account v2 created: tamopswebsiteportal

Open Storage Account: tamopswebsiteportal and select Static Website

Static website: Enabled
Index document name: Landing page of your website, in my example it is home.html
Error document path: Error page that will be used when an error happens on your website

Clicking save, the website will be ready in seconds.. URL will be displayed and as mentioned, $web folder will be created. Time to upload the website to this folder.

In my example of accessing blob storage, I will be using Storage Explorer (preview) accessed within the Storage Account

Navigate as below

Upload your content, in my example it is a basic .html entry and image

<h1> Thor the French Bulldog! </h1>
<img src="thor.JPG">

Now access the website endpoint provided above, your site will be accessible and ready to view

Pretty cool, quick and easy to deploy. Lets look at doing this via PowerShell!

Using Azure PowerShell

Parameters as below to be entered for this script to work:
$StorageAccountResourceGroup: Resource Group of where Storage Account will be created to host the static website
$StorageAccountName: Name of Storage Account
$IndexDocument: Landing page of your website
$WebsiteLocalLocation: Error page that will be used when an error happens on your website

$StorageAccountResourceGroup = "tamops-staticsite"
$StorageAccountName = "tamopswebsitepowershell"
$IndexDocument = "home.html"
$ErrorDocument404Path = "error.html"
$WebsiteLocalLocation = "C:UsersThomasDesktopwebsite"

Create Storage Account

#Storage Account Creation
$StorageAccountCreation = New-AzStorageAccount -Name $StorageAccountName -ResourceGroupName $StorageAccountResourceGroup -SkuName Standard_LRS -Location eastus2

Enable the Storage Account Endpoint

#Enable Azure StorageAccount Static Site
$StorageAccount = Get-AzStorageAccount -Name $StorageAccountName -ResourceGroupName $StorageAccountResourceGroup 
Enable-AzStorageStaticWebsite -Context $StorageAccount.Context -IndexDocument $IndexDocument -ErrorDocument404Path $ErrorDocument404Path

Upload the webcontents, note in this, $contentType if this isn’t included the contents upload with a contentType of: application/octet-stream, ammend this foreach with appropriate various contentTypes if required.

#Upload WebContents
$WebsiteContents = Get-ChildItem -path $WebsiteLocalLocation -file -Recurse

foreach ($contents in $WebsiteContents) {

    if ($contents.extension -eq ".html") {
        $contentType = @{"ContentType"="text/html"}
    }

    if ($contents.extension -eq ".jpg") {
        $contentType = @{"ContentType"="image/jpeg"}
    }
 
        Set-AzStorageBlobContent -File "$WebsiteLocalLocation$contents" -Container `$web -Blob $contents -Context $StorageAccount.Context -Force -Properties $contentType

}

Output from file upload

  Container Uri: https://tamopswebsitepowershell.blob.core.windows.net/$web

Name                 BlobType  Length          ContentType                    LastModified         AccessTier SnapshotTime         IsDeleted
----                 --------  ------          -----------                    ------------         ---------- ------------         ---------
error.html           BlockBlob 17              text/html                      2019-09-13 10:54:02Z Hot                             False
home.html            BlockBlob 61              text/html                      2019-09-13 10:54:02Z Hot                             False
thor.JPG             BlockBlob 33460           image/jpeg                     2019-09-13 10:54:03Z Hot                             False

URL of Static Website

#Website URL
$StorageAccount.PrimaryEndpoints.Web

Full PowerShell Script:

$StorageAccountResourceGroup = "tamops-staticsite"
$StorageAccountName = "tamopswebsitepowershell"
$IndexDocument = "home.html"
$ErrorDocument404Path = "error.html"
$WebsiteLocalLocation = "C:UsersThomasDesktopwebsite"

#Storage Account Creation
$StorageAccountCreation = New-AzStorageAccount -Name $StorageAccountName -ResourceGroupName $StorageAccountResourceGroup -SkuName Standard_LRS -Location eastus2

#Enable Azure StorageAccount Static Site
$StorageAccount = Get-AzStorageAccount -Name $StorageAccountName -ResourceGroupName $StorageAccountResourceGroup 
Enable-AzStorageStaticWebsite -Context $StorageAccount.Context -IndexDocument $IndexDocument -ErrorDocument404Path $ErrorDocument404Path

#Upload WebContents
$WebsiteContents = Get-ChildItem -path $WebsiteLocalLocation -file -Recurse

foreach ($contents in $WebsiteContents) {

    if ($contents.extension -eq ".html") {
        $contentType = @{"ContentType"="text/html"}
    }

    if ($contents.extension -eq ".jpg") {
        $contentType = @{"ContentType"="image/jpeg"}
    }
 
        Set-AzStorageBlobContent -File "$WebsiteLocalLocation$contents" -Container `$web -Blob $contents -Context $StorageAccount.Context -Force -Properties $contentType

}

#Website URL
$StorageAccount.PrimaryEndpoints.Web

Costing is minimal, see further:-

You can enable static website hosting free of charge. You’re billed only for the blob storage that your site utilizes and operations costs. For more details on prices for Azure Blob Storage, check out the Azure Blob Storage Pricing Page.

Thanks for reading, have fun hosting your own static sites!