Share the love

You can create an extremely cheap static website in Azure using Azure Storage and Azure CDN. Here are the steps:

  1. Create an Azure Storage account and enable static website hosting. This will give you a primary endpoint for your static website, such as “https://cloudiseasy.z6.web.core.windows.net”.
  2. Create a container called “$web” within the storage account. This is where you will upload your static website files.
  3. Use Azure Blob storage to upload your static website files (HTML, CSS, JavaScript, images, etc.) to the “$web” container.
  4. Create an Azure CDN profile and endpoint. This will give you a custom domain name for your static website, such as “https://www.mywebsite.com“.
  5. In the Azure CDN endpoint, configure the origin to be the primary endpoint of your Azure Storage account’s static website.
  6. Create a CNAME record with your DNS provider to point your custom domain name (e.g. “www.mywebsite.com“) to the Azure CDN endpoint hostname (e.g. “myendpoint.azureedge.net”).
  7. Wait for the DNS changes to propagate. Once complete, visiting your custom domain name should serve the static website hosted in your Azure Storage account.

Sample code to test

To test a static website in Azure, you can create a simple HTML file and a CSS file. You can also include any image files or other media that you want to include on your website.

Here’s an example of a basic HTML file that you can use to test your website:

<!DOCTYPE html>
<html>
<head>
    <title>My Static Website</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Welcome to my static website!</h1>
    <p>This is a simple website that I am hosting on Azure.</p>
    <img src="image.jpg" alt="Sample Image">
</body>
</html>

And here’s an example of a basic CSS file that you can use to style your HTML file:

body {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
    text-align: center;
    margin-top: 50px;
}

You can upload these files to the $web container in Azure Blob Storage. You can use Azure portal or Azure Storage Explorer or Azure CLI or Azure PowerShell to upload the files.

Here’s an example of how you can upload files to Azure Blob Storage using Azure CLI:

az storage blob upload-batch -s <local folder> -d '$web' --account-name <storage_account_name>

You should replace the placeholders <local folder>, <storage_account_name> with actual values for your environment.

Once the files are uploaded, you can access your website using the URL provided by Azure Blob Storage.

You can also configure custom DNS for your website by using Azure DNS and mapping it to the URL provided by Azure Blob Storage.