Cheap Static Websites Hosting

Recently, I decided to research how to host a website even cheaper than the structure I’m running this blog at the moment of this writing, you can find details how I’m hosting my blog on this post. I realized one component that makes website hosting expensive is the complexity of the website. Sites that have asynchronous calls to background processing, scalable data storage, load balancing, high availability, just to name a few complex technical features, will be more expensive to run than sites that don’t require all this stuff.

On the other side of the spectrum I mentioned above, the simplest type of website to develop and host is the good old static site, using just HTML, JavaScript and CSS. Every type of site has their purpose and static sites can be great! They are super useful for a company site that doesn’t require content management capabilities, a portfolio, marketing campaigns, single page apps, or even complex sites with serverless background processing, like Azure Functions or AWS Lambdas).

Azure Storage offers an easy and cheap way of hosting static sites. Assuming you already have the static website files, you need to:

Create a resource group
Create a storage account
Enable static website hosting
Upload your files
Capture the web endpoint
Enable custom domain

Although it’s possible to use the Azure Portal to enable static website hosting, I think it’s easier to execute those steps using automation. Below, you can find examples using Azure CLI. You can find a complete example on my GitHub.

All examples below assume you already have an Azure CLI environment authenticated and configured to access your Azure subscription. If you don’t have, execute:

az login
az account set --subscription <subscription id>

Create a Resource Group

A resource group is a logical container of resources that have the same lifecycle. All Azure resources must be created inside a resource group. To create one using Azure CLI, execute:

RESOURCE_GROUP="<Add your resource group name>"
LOCATION="<Add your location>"

az group create \
    --name $RESOURCE_GROUP \
    --location $LOCATION

Create a Storage Account

This is the main component we are going to use to host our static site. To create a storage account, execute:

STORAGE_ACCOUNT_NAME="rglandstatic"

az storage account create \
    --resource-group $RESOURCE_GROUP \
    --name $STORAGE_ACCOUNT_NAME \
    --location $LOCATION \
    --https-only false \
    --sku Standard_LRS \
    --kind StorageV2 \

Enable static website hosting

Now, we need to tell Azure storage we want to use it to host a static site. We need to enable this feature and provide special files to be the default page and 404 error page.

az storage blob service-properties update \
    --account-name $STORAGE_ACCOUNT_NAME \
    --static-website \
    --404-document 404.html \
    --index-document index.html

Upload your files

This is the step to actually upload your static site files to Azure Storage. The special requirement here is to upload the files to a container called $web.

az storage blob upload-batch \
    --source <Folder Name or Path> \
    --destination '$web' \
    --account-name $STORAGE_ACCOUNT_NAME

Capture the web endpoint

Once everything is in place, we need to discover the endpoint Azure is hosting the site, run the following command to read it.

az storage account show \
    --name $STORAGE_ACCOUNT_NAME \
    --resource-group $RESOURCE_GROUP \
    --query "primaryEndpoints.web" \
    --output tsv

The endpoint should be something similar to https://<Storage Account Name>.z<Number>.web.core.windows.net/.

You can access the site using HTTP or HTTPS. However, if you plan to use a custom domain name (next step), you need to use HTTP. Azure Storage doesn’t support custom SSL certificates.

Below, you can see a screenshot of the website running.

And the 404 custom error page

Enable custom domain

If you are planning to let people access your static website through a custom domain, you need first create a CNAME entry pointing to the web endpoint (previous step) on your DNS provider. After DNS information was replicated, you can update Azure Storage configuration with this information. If you try to update Azure Storage configuration before the new CNAME entry is created and replicated, it will fail.

DOMAIN="<Your custom domain>"

az storage account update \
   --resource-group $RESOURCE_GROUP \
   --name $STORAGE_ACCOUNT_NAME \
   --custom-domain $DOMAIN \
   --use-subdomain false

Below an example of a custom domain working.

Conclusion

I expect you were able to see how easy it is to setup a static website hosting, including with custom domain, with Azure Storage. If you have questions or any feedback, leave your comment below and I’ll do my best to answer them.

You can find a complete example with all scripts above and a simple static website on my GitHub.