Host A Static Website On Microsoft Azure Blob Storage
Published: 2024-07-16 22:37:06

Azure Static Web Apps is a service that automatically builds and deploys full stack web apps to Azure from a code repository.

In this quick start, you are to deploy an application to Azure Static Web apps using the Visual Studio Code extension.

The first step is to configure your storage account to host a static website in the Azure portal. 

__Under Azure Services, click Storage accounts

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

On the Storage accounts page, click Create to create a new storage account.

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

__On the Basics tab, enter the storage account name and other details.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwa3eenbrrrq4vubjb99.png)
__Click Review + Create Create.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9k4xxntyndty6ydcdsb.png) 
click on GO To resources
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0z6r7ybqx2smkvv98t8.png)
_Locate your storage account and display the account overview.

__On the left pain, select Container to create a container for the website.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpu5ymwculc78f909czh.png)
__Enter the details and click on create

__Select Static website On the left pain to display the configuration page for static websites.

_Select Enabled to enable static website hosting for the storage account._

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

_In the Index document name field, specify a default index page of index.html. The default index page is displayed when a user navigates to the root of your static website._

_In the Error document path field, specify a default error page of 404.html. The default error page is displayed when a user attempts to navigate to a page that does not exist in your static website.

Click Save. 

_The Azure portal now displays your static website endpoint.

_Azure Storage automatically creates a container named $web. The $web container will contain the files for your static website. _

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wj3fj7ev931cg8102pnu.png)
_Launch Visual Studio Code, and open the folder that you contain your website files, from the Explorer panel. _

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmlh9yok3qn5nx7ctc1a.png)
_Install the Azure Extension in the Visual Studio Code and connect to it. You will be prompted to log in to Azure to retrieve a list of your subscriptions. Select the subscription containing the storage account for which you enabled static website hosting. Next, select the storage account when prompted. _

_Right-click the Azure linked website folder in the Explorer panel and select Deploy to Static Website... to deploy your website._ 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8ut12ywti1klrkptk16.png)
Visual Studio Code prompt you to select your project folder.

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


__select the folder and upload your files to your web endpoint.

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

__Visual Studio Code show the success status bar.

_Click Launch the website when deployment is completed or go to Azure to get the primary endpoint._

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gwsu7mmfutspl57i2lmg.png)
_Launch the website in a browser._

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edjtrw674euz98xq6pxr.png)
 to view it in Azure.

You've successfully deployed a static website to Azure.