In this Azure tutorial, we will discuss how to host a website on Azure.
How To Host a Website On Azure
As part of this topic, we will discuss here, how to build a static website and deploy that static website to Azure Storage.
Azure Website Hosting for free
We can host your website free of cost with Azure. Let’s learn the complete steps of Azure web hosting. But, before that, we should know the prerequisites needed to start the functionality.
Prerequisites
- Before starting the actual process of hosting a website on Azure, as a prerequisite, what you need is, you need an Azure Account. If you don’t have an Azure account till now, create a free Azure Account now.
- The next thing that you need is an Azure Storage Account. If you don’t have a storage account created, create a storage account now using AzurePortal or PowerShell.
- If you don’t have Visual Studio Code, install it. We will use this to develop and deploy the static website.
- Now, we need to install the Azure Storage Extension. To install that, follow the below steps
Open the Visual Studio Code from your Computer
The next step is to click on the Extensions.
Now, search for Azure Storage and click on the Install button.
Now you can see it installed successfully.
Configure static website hosting using Azure Portal
1. log in to Azure Portal (https://portal.azure.com/)
2. Navigate to the storage account that you have created above.
3. Now click on the Static website link from the left navigation.
4. Click on the Enabled option for the Static website option. Provide the value for the option Index document name as index.html and Error document path as 404.html. Then click on the Save button to save the changes.
5. Once you click on the Save button, it will populate the value for the primary and secondary endpoints.
How to Deploy a static website in Azure
Now, what we will do is we will create a static website using the Visual Studio Code, and then after successful creation, we will deploy it to the storage account.
Deploy Website On Azure
1. Create an empty folder in your local system and then give a name to the folder of your choice
2. Open Visual Studio Code and click on the Explorer icon. Now click on the Open Folder button to open the folder you created above.