I wanted to explore the Azure cloud service of Microsoft and deploy a static React website I completed, on Microsoft Azure. Below are the step that you can follow on the updated Azure admin console panel to deploy an Hello World Html Site which is hosted on Github.
Here is the Hello World Html Site for site hosted on Github. You can visit Microsoft Azure Website and sign up to use the Azure free products for web-mobile – App service to host the website. Once create the URL will look something like this https://azurehelloportal.azurewebsites.net/
Visit the portal to create a new website. You can use get started and select the Web App – Quick start tutorial or directly on Web + Mobile to create Web App.
Fill up the name for the App choose the subscription if you purchased or signed up using any free monthly Azure credit. Microsoft does drop an email sometimes to promote use Azure, keep and eye on your Office365 email address. Select the Resource group. In short a resource group is a container for your resources, You can read about it in more details here. You can use and already created resource group or create a new one.
Click on create. Your site will be created.
Visit the Resource Group tab in left menu to have a look at available resource groups.
IT’s time to visit our website where we will deploy our code which is hosted on Github using Git. The App Service section located on the left menu of the Dashboard screen.
Visit the Deployment Credentials section under the Deployment Menu to key in and set up the local git and FTP environment.
Next up Visit Deployment Option Menu to choose the deployment source to be git and select local git repository. Choose the performance test to test user load and duration.
Next visit the Properties Section below to copy the azure git url where we will be pushing out local git repository. We will need this later on. This will look something like this-
Note down the git URL.
Visit the overview section where you can see all the git and ftp details as well.
Back to the local machine. Open up your cmd prompt and run the following steps one after the another to deploy site to the azure. I consider you are not a newbie to git and have basic understanding of git commands.
git clone https://github.com/Azure-Samples/html-docs-hello-world.git
You can make any Changes as per your needs or else continue with fresh deployment.
git add –-all
git commit -m "added files"
You will need the git URL from the azure portal that we copied earlier.
git remote add azure https://firstname.lastname@example.org:443/example.git
git push azure master
Enter the credentials to complete the process.
Note:- Some time or another you are bound to run into the following error when everything goes well.
Error-You do not have permission to view this directory or page.
You have to set the starting Default document for your site. Visit Application Settings. Under Default Documents add the starting file name. E.G. start.html
Below are different starting default documents.
And we are good to go. Visit the deployed site. You can find the url in Overview section. It will be something like https://example.azurewebsites.net.