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.
3. After opening the folder, click the new file button to create a new file and name it index.html.
4. Open the index.html file and paste the below line of code
<h1>This is my static test website</h1>
5. Create another file, name it 404.html, and paste the below code into the 404.html file.
<h1>404 error</h1>
6. Right-click on the down to the folder you have created and then click on the Deploy to Static Website… option.
7. Now click the Sign in to Azure… button to sign in. Enter the Azure credential to log in.
8. Now, it will show you the message. You are signed in now and can close this page. Now close this page.
9. Now that you have successfully logged in to the Portal, it will prompt you to select the storage account. So click on the storage account in the Visual Studio code window.
10. In the same Visual Studio code screen, you can see the pop-up saying that the Deployment is complete. Click on the Browse to the website to browse the static site.
11. Now, after clicking on the Browse to Website button, It will browse the website from the storage account. Check out the URL for the confirmation.
Well, so here we discussed how to host a website on Azure.
How To Host A Website On Azure For Free
Azure provides an excellent service known as Azure App Service, allowing you to host your web application on Azure Portal. You can get it free of cost for some specific tiers. Choose the tier as F1 Free while creating the Azure Web app, and an important note is you can use the space as a maximum of 1 GB with that F1 Free tier plan.
Azure App Service
Azure app service is a fully managed Platform as a Service that provides all the services needed to create different web applications, mobile applications, API Apps, etc. You can create and host web applications and mobile applications in seconds.
For more information, you can see Azure App Service.
Steps For Creating Free Azure Service
You can follow the Steps For Creating Free Azure Service (Create an Azure web app from Azure Portal) section.
The final step in the above article successfully created the web app with the URL “https://mynewwebapp643.azurewebsites.net.” As highlighted below, you can browse the website by clicking on the Browse button from the top left pane.
Note: Remember to choose the pricing tier as F1 Free so that you can create a web app free of cost and One more thing is you can have a maximum 1 GB of space as part of this plan.
This is how to host a website on Azure For Free. As we discussed, you can do this using the Azure App Service.
Host dynamic website on Azure
Well, Here, let’s discuss the topic host dynamic website on Azure.
How to host a dynamic website on Azure
As a prerequisite for moving to development, we need to ensure Visual Studio is installed on your machine. Here, I will use Visual Studio 2019 for the demonstration purpose.
The next thing is you need the Azure Subscription. If you don’t have yet, then create an Azure free account now.
Now, Assuming you have Visual Studio and a valid Azure Subscription installed on your machine, let’s start the development activities and see How to Deploy a Website to Microsoft Azure.
Deploy Website to Azure
1. Launch the Visual Studio on your machine
2. Click on the File –> New –> Project, and then from the Create a new project window, select the ASP.NET Web Application(.NET Framework)
3. On the Configure your new project page, provide the Project name, location, and Solution name, and choose the framework( Choose the latest framework). Click on the Next button.
4. On the Create a new ASP.NET Web Application window, select the MVC option and click the Create button.
5. Wait for a few minutes. The project will be created in a few minutes. Below, you can see that it was created successfully with the name DemoAzureApp.
6. Now click on the Debug –> Start without Debugging.
7. Next, click the below popup to trust the IIS Express SSL Certificate. Then, on the next Popup, click the Yes button to install the certificate.
8. The default web application page has loaded successfully. You can navigate to the Home, About, and Contact pages.
9. Now, let’s change the default Header from ASP.NET to This Is My Azure Web App. To do this change, Expand Views –> Expand Home–> Index.cshtml.
10. Open the Index.cshtml, change the header tag value from ASP.NET to This Is My Azure Web App, and save it.
11. Now again, click on the Debug –> Start without Debugging.
12. You can see the updated output below.
Deploying Azure Website from Visual Studio
13. Now, to publish this web application to Azure, right-click on the project name and choose the Publish option.