How to set up a static website on Azure Blob Storage
Published: 2024-07-03 18:47:33

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5dng8yib9ymdxrbyc0l5.png)

2 - In the "Search the Marketplace" box, type "Storage account" and select it from the list.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3sywu4t7pgezfcfpm5k.png)


3 - Click on the "Create" button.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d93m3hfl4xr37zqpeirt.png)

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).


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjuzmgky1g14ldye25ip.png)

5 - Click on the "Review + create" button, and then click "Create".



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8io9vq44e8drm3oo19a.png)


## 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9f9fi9tfnqkgf1md3qhy.png)



## 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxbwgfbfkmipm3ebalaz.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13b73ykgc0jyswfblrri.png)

4 - Select your resource group and storage name.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/snwffqdn5uct1mgyadz0.png)


5 - Select "Blob Container" from the option.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msw4gwxfu8368arnwc2m.png)


6 - Select your container name in this case "$web"


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfxuxbzrrpx5iu34hf3q.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/go62r361loklf6sbla76.png)

8 - Your website files are  successfully uploaded.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcrymempx46xkvoeq415.png)




## Access Your Static Website:


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66nik9fr70a133s7rdbd.png)


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xum69qxdstkjbta8wgrb.png)