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:
- A Microsoft Azure subscription.
- Visual Studio Code (https://code.visualstudio.com/download)
Creating a static website
- Go to Visual Studio Code and click on File> New File
- Save the file as index.html
- Using the emmet syntaxis type html:5 and press Enter
- 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
- Go to https://portal.azure.com and in all services type storage account.
- 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
- Click on Review + create and then on create
- In some minutes the storage account will be created and then click on Go to resource button
- In the options blade search Static Website, click on Enabled, in index document name type index.html and then click on Save
- Go to Containers, there will be a container named $web, click on $web
- Click on Upload and then click on the file icon on the right pane
- Double click on the index.html file and then click on the Upload button
- 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.
