Microsoft Azure

Cómo alojar un sitio web en un Azure Storage Account

Hola, en este tutorial veremos cómo crear un sitio web estático con Visual Studio Code y vamos a alojar el sitio web en una cuenta de Azure Storage v2 que es una opción muy económica para alojar nuestro sitio web.

Prerrequisitos:

Crear un sitio web estático

  1. Ir a Visual Studio Code y dar click en File> New File
  2. Guardar el archivo como index.html
  3. Usando la sintaxis de emmet, escribiremos html:5 y Enter
  4. Cambie alguna información en el título, agregue un código en el cuerpo y guárdelo (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>

Hospedar el sitio web en un Azure Storage Account

  1. Ir a https://portal.azure.com y en todos los servicios digitaremos storage account.
  2. Haga clic en add y complete la información solicitada:
    • Subscription: <El nombre de su suscripción>
    • 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. Haga clic en Review + create y luego en create
  4. En unos minutos se creará el Storage Account y luego haga click en el botón Go to resource
  5. En la sección de opciones, busque Static Website, haga click en Enabled, en index document name digite index.html y luego dar click en Save
  6. Ir a Containers, habrá un contenedor llamado $web, dar click en $web
  7. Haga click en Upload y luego haga click en el icono del archivo en el panel derecho
  8. Haga doble click en el archivo index.html y luego click en el botón Upload
  9. Vuelva a Static website, copie la url dentro del cuadro de texto de Primary endpoint y péguelo en una pestaña nueva. Se mostrará el sitio web.

Leave a Reply

avatar
  Subscribe  
Notify of