How To Host a Website On Azure

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.

• How to create an Azure web app using PowerShell

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.

Deploy website to Azure app service

14. On the Pick a publish target window, select the App Service option and then the Create New option. Finally, click the Create Profile button.

15. Provide the name for the App Service, Choose the Subscription, Choose the Resource group, and choose the Hosting plan. I just kept the default values, But it’s better to provide a meaningful full name. Finally, click on the Create button to create the App service.

16. Now you can see it generated the Site URL. Click the Publish button to publish it.

17. Now you can see below that the site was successful. Check out the URL for the confirmation.

Follow the above steps to deploy the website to the Azure app service.

6 Reasons You Should Host Your Website in Microsoft Azure

Microsoft Azure is an excellent platform and one of the fastest-growing Cloud infrastructures for hosting your website. There are many reasons to host your website in Azure, but there are 6 key reasons you should do so.

1- Auto Scale Capability

Sometimes, when your business grows, you will get high traffic that, in turn, requires more extra resources. Since the demand is for more applications run with a high load, this is one of the biggest challenges, as you can’t predict when the business will grow.

So, to handle this type of situation, Microsoft provides an excellent feature to scale alongside your business. What exactly Azure does here is load your applications as a cluster that allocates a web application to a specific set of processes so that your applications are not forced to run on a single server. Thus, you will never run out of server capacity.

Azure provides the auto-scale capability based on your server load to handle all traffic effectively. This is an excellent advantage with Microsoft Azure.

2- Staging deployment support

Azure Provides you with the functionality that supports the staging deployment. If you add any new functionality or design to your website, you can make the changes on the staging server. Once you are happy with the changes, then you can push those changes to live in the production environment.

3- Backup Support

As we all know, you must have a proper website backup in case of any failure or accident. Azure does that for you. Azure takes backups for your websites properly so that it helps you to restore them in case of any failure.

Azure uses lots of modern technology to support all these activities.

4- High Performance

Azure uses all the latest modern technology and has the resources to reduce load time, maintain the proper bandwidth, and provide the proper CDN facilities that ensure high website performance with minimal delay time.

5- Data Security

As Security is an important feature, Azure ensures that your site and data are safe with Microsoft by providing lots of advanced security mechanisms like Azure Information Protection, Advanced Threat Analytics, and, Finally, a great feature, Multi-Factor Authorization that helps to protect from hackers or suspicious users accessing your data completely.

6- Multiple deployment options

Azure provides multiple deployment options like FTP / FTPS, Web Deployment, Deployment from the Github repository, etc.

FAQs

Can I host My Website on Azure

The answer is Yes, you can host your website on Azure. If you are using the App service F1 Free tier plan, you can host your website free of cost. The free tier only provides you a maximum of 1 GB of storage space for free.

With this 1 GB free space, you can also get support for Remote debugging with Visual Studio debugger, Multi-platform support like Java, Python, .Net, PHP, etc., and Performance monitoring support.

You can also use the paid tier of the Azure App service, which provides many features that can help you host your website.

How much does it cost to host a static site on Azure?

You can host a static website at a very minimum or cost-free. You need to pay for the storage and the operational costs. You can refer to the Microsoft official site for more Pricing details.

Conclusion

In this article, we discussed How To Host A Website On Azure. I hope, you have enjoyed this article !!!

Bijay Kumar

I am Bijay, a Microsoft MVP (10 times) having more than 17 years of experience in the software industry. During my IT career, I got a chance to share my expertise in SharePoint and Microsoft Azure, like Azure VM, Azure Active Directory, Azure PowerShell, etc. I hope you will learn from these Azure tutorials. Read more