DEV Community

Cover image for Host A Static Website On Microsoft Azure Blob Storage

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

Image description

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

Image description

__On the Basics tab, enter the storage account name and other details.
Image description
__Click Review + Create Create.

Image description
click on GO To resources
Image description
_Locate your storage account and display the account overview.

__On the left pain, select Container to create a container for the website.
Image description
__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

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
_Launch Visual Studio Code, and open the folder that you contain your website files, from the Explorer panel. _

Image description
_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
Visual Studio Code prompt you to select your project folder.

Image description

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

Image description

__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
Launch the website in a browser.

Image description
to view it in Azure.

You've successfully deployed a static website to Azure.

Top comments (0)