How To Host A Website On Azure

How To Host A Website On Azure

In this Azure tutorial, we will discuss How To Host A Website On Azure. Along with this, we will also discuss the below topics.

  • Configure static website hosting using Azure Portal
  • How to Deploy a static website in Azure
  • How To Host A Website On Azure For Free
  • Azure App Service
  • Steps For Creating Free Azure Service
  • Host dynamic website on azure
  • How to Deploy a Website to Microsoft Azure
  • Deploy Website to Azure
  • 6 Reasons You Should Host Your Website in Microsoft Azure
  • Can I host My Website on Azure

How To Host A Website On Azure

Well, let’s see here, 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.

Before starting the actual process for How To Host 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 what 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.

Then install the Visual Studio Code, if you don’t have that. We are going to 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

Next step is, click on the Extensions.

How to host a static website on Blob Storage

Now search for the Azure Storage click on the Install button.

How To Host A Website On Azure

Now you can see it installed successfully.

How To Host A static Website On Azure

Configure static website hosting using Azure Portal

Step-1: Login to Azure Portal (https://portal.azure.com/)

Step-2: Navigate to the storage account that you have created above.

Step-3: Now click on the Static website link from the left navigation.

Configure static website hosting using Azure Portal

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

How to configure static website hosting using Azure Portal

Step-5: Once you clicked on the Save button, it will populate the value for the primary and secondary end points.

How to configure static website hosting

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.

Step-1: Create an empty folder in your local system and then give a name to the folder on your choice

Step-2: Open the Visual Studio Code and click on the Explorer icon. Now click on the Open Folder button to open the folder that you have created above.

How to Deploy a static website in Azure

Step-3: After opening the folder, click on the new file button to create a new file and name it as index.html.

How to Deploy a static website in Azure Portal

Step-4: Open the index.html file and paste the below line of code

<h1>This is my static test website</h1>
static website azure

Step-5: Create another file and name it as 404.html and paste the below code in the 404.html file.

<h1>404 error</h1>
static site hosting azure

Step-6: Right-click on the down to the folder you have created and then click on the Deploy to Static Website… option.

host website on azure

Step-7: Now click on the Sign in to Azure… button to sign in. Enter the Azure credential to login.

how to deploy static website in azure

Step-8: Now it will show you the message, you are signed in now and can close this page. Now simply close this page.

deploy static website in azure

Step-9: Now since you have logged in to the Portal successfully. It will prompt you to select the storage account. So click on the storage account in the Visual Studio code window.

how to deploy static website in azure storage

Step-10: Now in the same Visual studio code screen, you can see down the pop up saying that Deployment complete. Click on the Browse to website to browse the static site.

static website hosting for azure storage

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

static website hosting free

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 which allows 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 Webapp 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 helps to provide 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 a span of 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.

If you can see the final step in the above article, It created the web app successfully with the URL “https://mynewwebapp643.azurewebsites.net”. You can click on the Browse button from the top left pane as highlighted below to browse the website.

How to Create Free Azure Service

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 on the topic host dynamic website on Azure.

Before we are moving to the development, as a prerequisite what we need is, make sure Visual Studio is installed in your machine. Here I will use the 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 a Visual Studio installed in your machine and you have a valid Azure Subscription, let’s start the development activities and see How to Deploy a Website to Microsoft Azure.

Deploy Website to Azure

Step-1: Launch the Visual studio in your machine

How to Deploy a Website to Microsoft Azure

Step-2: Click on the File –> New –> Project and then from the Create a new project window, select the ASP.NET Web Application(.NET Framework)

Deploy a Website to Microsoft Azure

Step-3: On the Configure your new project page, provide the Project name, location, Solution name, and choose the framework( Choose the latest framework).Click on the Next button.

Deploy a Website to Microsoft Azure Portal

Step-4: On the Create a new ASP.NET Web Application window, select the MVC option, and then click on the Create button.

Host dynamic website on azure

Step-5: Wait for a few minutes, it will take a few minutes to create the project, Now you can see below it created the Project successfully with the name DemoAzureApp.

How to Deploy a Website to Azure

Step-6: Now click on the Debug –> Start without Debugging.

how to deploy website on microsoft azure

Step-7: Next is to click on the below popup to trust the IIS Express SSL Certificate. Then on the next Popup also click on the Yes button to install the certificate.

host website on azure free

Step-8: Now you can see the default web application page loaded successfully. You can navigate to the Home, About, and Contact page.

host website on Microsoft azure free

Step-9: Now let’s change the default Header from the ASP.NET to This Is My Azure Web App. To do this change, Expand Views –> Expand Home–> Index.cshtml.

deploy website to azure

Step-10: Open the Index.cshtml and change the header tag value from ASP.NET to This Is My Azure Web App and then save it.

azure website hosting

Step-11: Now again click on the Debug –> Start without Debugging.

azure website hosting free

Step-12: You can see the updated output below.

microsoft azure free website hosting

Step-13: Now to publish this web application to Azure, right click on the project name and choose Publish option.

microsoft azure free web hosting

Step-14: Select App Service option on the Pick a publish target window and then select the Create New option. Finally click on the Create Profile button.

azure website hosting free

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

deploy website to azure app service

Step-16: Now you can see it generated the Site URL and Now click on the Publish button to publish it.

azure web app deployment

Step-17: Now you can see below, it published the site successfully. Check out the URL for the confirmation.

how to deploy website to azure

This is how you can deploy website to azure app service or Deploy Website to Azure by following the above steps.

6 Reasons You Should Host Your Website in Microsoft Azure

Microsoft Azure is an excellent platform and one of the fastest-growing Cloud Infrastructure to host your website. There are many reasons to host your website in Azure. Out of all the reasons, there are 6 key reasons you should host your website in Microsoft Azure.

1- Auto Scale Capability

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

So, in order to handle this type of situation, Microsoft provides an excellent feature to scale alongside your business. What exactly Azure does here is, it loads 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 get the situation of running out of server capacity.

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

2- Staging deployment support

Azure Provides you the functionality that supports the staging deployment. Meaning, if you are adding any new functionality or design to your website, you can do the changes on the staging server then once you are happy with the changes then you can push that changes to live in the production environment.

3- Backup Support

As we all know it is very important that you should have a proper backup for your websites to support in case of any failure or accidents. Azure does that for you. Azure takes backup for your websites properly so that it helps you to restore it in case of any failure.

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

4- High Performance

Since Azure uses all the latest modern technology and has the resources to reduce the load time, to maintain the proper bandwidth and the proper CDN facilities that ensure high performance of your websites 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 mechanism like Azure Information ProtectionAdvanced Threat Analytics and Finally with a great feature Multi-Factor Authorization that really helps to completely protect from hackers or suspicious users accessing your data.

6- Multiple deployment options

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

Can I host My Website on Azure

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

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

You can also use the paid tier of the Azure App service that provides a ton of features that can help you to host your website.

You may also like the below tutorials

Conclusion

Well, here in this article we discussed How To Host A Website On Azure, Configure static website hosting using Azure Portal, How to Deploy a static website in Azure, How To Host A Website On Azure For Free. Apart from this we also discussed Azure App Service, Steps For Creating Free Azure Service, Host dynamic website on azure, and How to Deploy a Website to Microsoft Azure, Deploy Website to Azure. Finally, we discussed 6 Reasons You Should Host Your Website in Microsoft Azure, and Can I host My Website on Azure.

Leave a Comment