Hi there

In this post I’m going over on how to create a static HTML web app in Azure

You’ll need:

  • Free azure subscription
  • An Azure Resource (I’m using “MyBlog“)
  • Filezila ftp client (to download default html file from the new azure web app and to modify it, upload it back and see the result)
  • basic knowledge of HTML language

Steps to follow

    1. go to your azure subscription
    2. on home screen find the azure resource groups and select you resource group (i.e.: MyBlog)

    1. select the Azure Resource and click on “+” add (to add the web app resource)

    1. create the new web app

    1. select the new web app (under Overview)
    2. copy the URL link https://htmlapp001.azurewebsites.net
    3. test the new web app main url https://htmlapp001.azurewebsites.net/(click on it , open new tab on the browser)

  1. accessing the web app ftp
    1. go to the Deployment Center blade and select FTP (scroll down and click on it then click on Dashboard)
      1. FTPS Endpoint:
      2. Username:
      3. Password:

  2. FTP access and html file changes
    1. configure the filezila ftp client accordingly
        1. go on file \ site manager \ select the FTP site you’ve configured
        2. click connect

        1. you should see the hostingstart.html file in there
        2. download the file
        3. rename it to newhostingstart.html

      1. edit it and change the following
        1. locate “Microsoft Azure App Service – Welcome” change to “Microsoft Azure App Service – Welcome by Thiago Beier”
        2. locate Hey, App Service Developers!” change to “Hey, App Service by Thiago Beier!
        3. save it
      2. upload the file back to the web app root path
      3. go back to the site url https://htmlapp001.azurewebsites.net/
      4. add the new html file name at the end of the complete url https://htmlapp001.azurewebsites.net/newhostingstart.html and see the changes you’ve made

Fell free to explore the other blades such as:

Quick view on the Development tools \ Console

thanks,

Thiago Beier
TwitterLinkedInFacebookRSS