How to host a static website on Azure blob storage

Hosting a static website using Azure Blob Storage is a cost-effective and scalable solution that leverages Azure’s global infrastructure. Here’s a detailed step-by-step guide to hosting a static website on Azure Blob Storage:

Step 1: Create an Azure Storage Account

1. Sign in to Azure Portal: Go to the Azure Portal and sign in with your Azure account.
2. Create a New Storage Account:

• In the Azure portal, click on “Create a resource”.
• Select “Storage” > “Storage account”.
• Fill in the necessary details:
  • Subscription: Choose your Azure subscription.
  • Resource Group: Select an existing resource group or create a new one.
  • Storage Account Name: Provide a unique name for your storage account.
  • Region: Choose a region close to your target audience.
  • Performance: Select “Standard”.
  • Replication: Choose a replication strategy (e.g., LRS, GRS).

1. Review and Create:

• Click “Review + create” and then “Create” after validation passes.

Step 2: Configure Static Website Hosting

1. Navigate to Your Storage Account:

• In the Azure portal, go to “All resources” and select your newly created storage account.

1. Enable Static Website:

• In the storage account’s left-hand menu, under the “Data management” section, click on “Static website”.
• Click the “Enabled” button to enable the static website hosting.
• Index document name: Enter the name of your index file (e.g., index.html).
• Error document path: Enter the name of your error page (e.g., 404.html).

1. Save the Configuration:

• Click “Save” to apply the settings.
• You will see a primary endpoint URL; this is the URL where your static website will be hosted.

Step 3: Upload Your Website Files

1. Navigate to the Blob Service:

• In the storage account menu, under “Blob service”, click on “Containers”.

1. Create a New Container:

• Click the “+ Container” button.
• Provide a name for your container (e.g., web) and set the public access level to “Container (anonymous read access for containers and blobs)”.
• Click “Create”.

1. Upload Files:

• Click on the container name to open it.
• Click the “Upload” button.
• Select the files for your static website (HTML, CSS, JavaScript, images, etc.) from your local machine.
• Click “Upload” to start the upload process.

Step 4: Access Your Static Website

1. Get the URL:

• Go back to the “Static website” section under “Data management” in your storage account.
• Copy the “Primary endpoint” URL.

1. Visit Your Website:

• Open a web browser and paste the URL to see your static website live.

Step 5: (Optional) Configure a Custom Domain

1. Set Up a Custom Domain:

• If you want to use a custom domain, you’ll need to configure your domain registrar to point to your static website.

1. Add a Custom Domain:

• In the Azure portal, navigate to your storage account.
• Under the “Settings” section, click on “Custom domain”.
• Follow the instructions to add and verify your custom domain.

Additional Tips:

• Security: Ensure that you configure proper security settings to protect your website’s data. You can use Azure CDN for better performance and security features.
• Continuous Deployment: Consider using Azure DevOps or GitHub Actions to set up continuous deployment for your static website, allowing automated updates whenever you push changes to your repository.

By following these steps, you can successfully host and manage a static website using Azure Blob Storage, leveraging Azure’s global infrastructure for reliable and scalable web hosting.