The post is not that long, its just that I've got a couple of high-resolution images on the page. The steps are quite simple. Below, I've listed a 10 step process to go from creating a site to deploying your current work. I'm assuming you already have an azure account. If so, let's begin by visiting portal.azure.com and logging in.

  1. Create a site
  2. Test out our site
  3. Add Visual Studio Online extension
  4. Add Visual Studio Online extension 2
  5. Use Visual Studio Online
  6. VSO - First Look
  7. Upload my Site
  8. View our site
  9. Fix my site
  10. Refresh the site

# Create a site

Image description

  1. Site URL
  2. The azure subscription to use
  3. The resource group to create the site in
  4. The app service plan/location.

# Test out our site

# Add Visual Studio Online extension Image description

  1. Click Tool
  2. Click extension

# Add Visual Studio Online extension 2 Image description

  1. Step 1
    • Click Choose Extension
    • Select Visual Studio Online (VSO)
  2. Step 2
    • Agree to Legal Terms.

# Use Visual Studio Online Image description

  1. Click Tool
  2. Click Extensions
  3. Click VSO
  4. Click Browse

# VSO - First Look Image description

  1. Under WWWROOT
    • Click hostingstart.html - This is the code for the page we saw earlier when we visited our new site.

# Upload my Site Image description

  1. Right click hostingstart.html, then click delete
  2. Right click WWWROOT, then click upload
  3. Select the files for your site

# View our site Image description

  1. Now go back to the site URL (in my case jtmfpw.azurewebsites.net)
    • Notice the error - This is because azure has no idea which page to use as the landing page.

# Fix my site Image description

  1. Go back to the Azure portal
  2. Click Settings
  3. Click Applications Settings
  4. Scroll to Default documents
  5. On the very bottom, add a new entry - home.html

# Refresh the site Image description

  1. Now go back to the site URL, you should see the new site up and running.

Azure web hosting plan in depth