How to set up a static website on Azure Blob Storage

Hosting a static website on Azure Blob Storage is a cost-effective and scalable solution.

Here’s a step-by-step guide to help you set up a static website on Azure Blob Storage:

Step-by-Step Guide to Hosting a Static Website on Azure Blob Storage

Sign in to Azure Portal:

1 – Open a web browser and go to the Azure portal.
2 – Sign in with your Azure account credentials.

Create a Storage Account:

1 – In the Azure portal, click on “Create a resource” in the upper-left corner.

2 – In the “Search the Marketplace” box, type “Storage account” and select it from the list.

3 – Click on the “Create” button.

4 – Fill in the necessary details:

Subscription: Select your 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 the region closest to your users.
Performance: Choose Standard.
Replication: Choose your desired replication option (e.g., LRS, GRS).

5 – Click on the “Review + create” button, and then click “Create”.

Enable Static Website Hosting:

1 – Once the storage account is created, navigate to it.
2 – In the storage account menu, scroll down to the “Data management” section and click on “Static website”.
3 – Click on the “Enabled” button.
4 – Specify the default file name (e.g., index.html) and the error document path (e.g., 404.html).
5 – Click on the “Save” button. After saving, you will see a primary endpoint URL, which is the URL of your static website.

Upload Your Website Files:

1 – In the storage account menu, go to “Containers” under the “Data storage” section.
2 – A container named $web will be created automatically for static website hosting. Click on the $web container.

3 – Launch Visual Studio Code, highlight your website files (e.g., HTML, CSS, JavaScript, images) and click on ” upload to azure storage”.

4 – Select your resource group and storage name.

5 – Select “Blob Container” from the option.

6 – Select your container name in this case “$web”

7 – Click the enter key on your keyboard to initiate upload.

8 – Your website files are successfully uploaded.

Access Your Static Website:

1 – After uploading your files, navigate to the static website endpoint URL provided in the static website settings.

2 – Your static website should now be live and accessible via the URL.