Create an Azure Web App to host HTML

Sometimes, we need to quickly create an HTML page to share some content. In this case, it was a GIT presentation that was built and I had the idea to create an Azure web app to store this information since it’s an HTML page. This will help in the case we need to share this information with anyone. I’ll explain step-by-step the process that I’ve done. This could be one of the fastest ways to publish something with a public URL.

The first and probably the most important step is to create the content that you intend to publish on this public website. In my case, and thank you Paulo Cardoso for providing your presentation for this blog post. Note that you need to have the index.html page on your project to be used as the homepage. After this first step is completed, it is now time to go on Azure, login with the account that you intend to create this public website and make the job.

  1. Open the https://portal.azure.com
  2. On the Search Area of Azure or on the left Panel find App Services (1)
  3. Create to Add (2)
  4. Fill the basic form with the new resource information, you can follow the configuration below
  5. Click to Review and Create, it should take not more than 5 minutes to create your sample site.

Now the online site is created with a default page that we’ll replace with the presentation. Below an image of the site when it’s created.

We’ll now clone this git repository to be our online site, https://github.com/pcardosolei/github.

  1. Go the App Service created.
  2. At the left panel look for Development Tools and select the Advanced Tools on this click Go
  3. On the new tab click on Debug Console and then PowerShell
  4. On the new panel, click on site and then wwwroot or type on the console cd site\wwwroot.
  5. Remove all the files that you’ve on that folder
  6. The final step is to clone the git repository. Note that you need (.) at the end so it doesn’t create a folder to contain the project.
    • git clone https://github.com/pcardosolei/github.git .

Now accessing the URL, you will have the site converted to your page HMTL, in this sample https://htmlsampledavid.azurewebsites.net, you will see the site published. If you don’t have index.html on your project, you need to configure your homepage. Screenshot where you can configure this option.

References

2 Comments

  1. viglug.org said:

    Magnificent website. Plenty of useful info here. I’m sending it to some pals ans additionally sharing in delicious.
    And naturally, thanks in your effort!

    December 28, 2023
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *