Host A Static Website On Microsoft Azure Blob Storage

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

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

__On the Basics tab, enter the storage account name and other details.



__Click Review + Create Create.

click on GO To resources



_Locate your storage account and display the account overview.

__On the left pain, select Container to create a container for the website.



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

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

_Launch Visual Studio Code, and open the folder that you contain your website files, from the Explorer panel. _

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

Visual Studio Code prompt you to select your project folder.

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

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

Launch the website in a browser.

to view it in Azure.

You've successfully deployed a static website to Azure.