24
votes

I plan to move all my websites from my own baremetal server to Microsoft Azure. To get things started I want to do a POC and deploy a very simple static microsite - a single html page with some css/img/js resources.

How does one go deploy a simple static website? I can see options for simple CMS type sites, but nothing for the most basic of sites.

6

6 Answers

39
votes

While there are several options as mentioned Brents answer (and comments), I find one simple option as easiest.

  1. Create a website from the Azure portal.
  2. Go to: https://{sitename}.scm.azurewebsites.net/DebugConsole
  3. Navigate to: site/wwwroot
  4. Drag drop your files (html/js/css/...).

Done

(browse to http://{sitename}.azurewebsites.net/ to see your site).

Note: You can also edit your files from this view.

8
votes

If you start with a simple Web App (the best option IMHO for a static website), you can opt to create the site without deploying one of the pre-defined web app templates. This will allow you to publish your own content files via either FTP or Git.

A basic walk through of this is available online here. There's also multiple additional links off of that one that can provide additional information about running web apps in Azure.

If you use the "free" (F1) service plan, you'll be able to host up to 10 web sites per region at that level. Just keep in mind the resource/usage limits associated with each service plan.

5
votes

https://tryappservice.azure.com/

Is a great place you can try creating a Azure Website in seconds and try out all the combinations of settings you can make with Azure Website and App Service platform.

You can do create a website on Azure in 3 simple steps. Step 1 : Select app type (Select Web App) Step 2 : Select template (Select which ever you are comfortable with) Step 3 : Work with your app

After you have created the Web apps there are multiple ways to work with the site you have created,

Edit with Visual Studio Online "Monaco" - Directly play with the site you have created with an online version of the Visual Studio Dev Environment.

Download Web App content - Download the content and change the content

Download publishing profile - Publish you content that you have for your site directly to the test site and see how it works.

Clone or push with git - Get a git URL to push your code to Site Location.

Let us know if this is helpful for you to try out Azure Website.

1
votes

I realize my answer comes late but wanted to highlight the Azure - Dropbox connection which works wonders for static micro sites. You can easily sync the website with dropbox each time you performs changes to your site.

1
votes

In MS Build 2020 Microsoft announced the support for hosting Static Web Apps which allows you to build JavaScript web applications that automatically publish from changes made in GitHub.

This new option is ideal for static site generators such as Hugo, Jekyll and Hexo or for developers who use frameworks like Angular, Vue and React and seek a simple interface to deploy the cloud resources needed for a single-page application.

Here is an example to get started.

0
votes

Try steps told in this tutorial:

https://www.microsoft.com/middleeast/azureboxes/cloud-hosting-for-a-static-website.aspx

This is not like a traditional documentation. It's more of a blog post. I find it very useful.

Basically, it contains:

  1. Go to https://portal.azure.com/ and create a new web app
  2. Deploy site using FTP. (There are other ways too)
  3. Map the Web app to a CDN for improved performance and efficiency.
  4. And how to add a custom domain.