DEV Community

Cover image for How to set up a static website on Azure Blob Storage
Adeola Adebari
Adeola Adebari

Posted on

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.

Image description

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

Image description

3 - Click on the "Create" button.

Image description

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

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

Image description

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

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

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

Image description

4 - Select your resource group and storage name.

Image description

5 - Select "Blob Container" from the option.

Image description

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

Image description

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

Image description

8 - Your website files are successfully uploaded.

Image description

Access Your Static Website:

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

Image description

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

Image description

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)