Microsoft Azure

How to host a website into an Azure Storage Account

Hello, in this tutorial we will see how to create a static website using Visual Studio Code and we are going to host the website in an Azure Storage Account v2 that is a very cheap option for hosting our website.

Prerequisites:

Creating a static website

  1. Go to Visual Studio Code and click on File> New File
  2. Save the file as index.html
  3. Using the emmet syntaxis type html:5 and press Enter
  4. Change some information in the title, add some code in the body and save it (ctrl + s).
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo vvillar</title>
</head>
<body>
   <h1>Hello world from Azure Storage Acccount.</h1> 
</body>
</html>

Hosting the website into an Azure Storage Account

  1. Go to https://portal.azure.com and in all services type storage account.
  2. Click on add and fill the requested information:
    • Subscription: <Your subscription name>
    • Resource group: Create new>rg-vvillardemo
    • Storage account name: savvillarweb
    • Location: (US) East US
    • Performance: Standard
    • Account kind: StorageV2 (general purpose v2)
    • Replication: Locally-redundant storage (LRS)
    • Access tier (default): Hot
  3. Click on Review + create and then on create
  4. In some minutes the storage account will be created and then click on Go to resource button
  5. In the options blade search Static Website, click on Enabled, in index document name type index.html and then click on Save
  6. Go to Containers, there will be a container named $web, click on $web
  7. Click on Upload and then click on the file icon on the right pane
  8. Double click on the index.html file and then click on the Upload button
  9. Go back to Static website, copy the url inside the Primary endpoint textbox and paste it in a new tab. The website will be displayed.

Leave a Reply

avatar
  Subscribe  
Notify of