• Para iniciar este recorrido, primeramente, debe ingresar al portal de Azure. Una vez en la página principal, debe seleccionar la opción de “Create a resource” y digite para realizar la búsqueda el texto las palabras “blog storage”. Entre las opciones disponibles, seleccione “Storage account – blob, file, table, queue” y presione el botón de “Create”. 

• Para la creación del recurso en Azure, seleccione la subscripción en la cual planea crear la aplicación, así como el contenedor del grupo de recursos, o puede crear uno nuevo si así lo prefiere. También debe ingresar el nombre de la cuenta de almacenamiento y la localización geográfica. De momento la opción de “Performance” puede quedar predeterminada en “Standard”, lo cual significa que el almacenamiento se dará en discos magnéticos, que implican un costo más bajo al Premium, que son discos en estado sólido. El “Account kind” con valor predeterminando de “Storage V2”, indica que el almacenamiento provee acceso a todos los servicios de Azure de blobs, archivos, tablas, colas y discos. En cuanto a replicación, para este demo vamos a utilizar un esquema local para ahorrar costos por lo que seleccionamos “LRS”. El campo “Access tier”, corresponde a la frecuencia de acceso a los datos, en este ejemplo lo vamos a dejar predeterminado en “Hot”, que son de mayor frecuencia que si se marca “Cool”. Presione el botón de “Review + Create”. 

• Se le desplegara la página de validación y si todo está correcto puede presionar el botón de “Create”. 

• Luego de crearlo, espere unos segundos para la finalización de la publicación del recurso. Una vez que aparezca la notificación, presione la opción de “Go to resource”. 

• La visualización del recurso de almacenamiento se verá de la siguiente manera. A este punto ya podría crear y almacenar datos en contenedores, tablas y colas, o creación de archivos compartidos.

• Sin embargo, a pesar de todas estas posibilidades, de momento nuestro objetivo se centra en el menú del lado izquierdo, debajo del submenú de “Settings”, en la opción que dice “Static website”. Debe navegar hasta esta opción tal y como se muestra en la imagen a continuación. Note que una vez adentro, existe un mecanismo para habilitar un sitio estático. Se dice estático en el sentido que permite contenidos estáticos y scripts del lado del cliente, no del lado del servidor. La selección de “Enable” le crea un contenedor predeterminado a la cuenta para permitir servir como punto de hospedaje en la web.

• Una vez habilitado, puede copiar la ruta expuesta en la etiqueta llamada “Primary endpoint” ya que la necesitará más adelante, esta se trata de la dirección por la cual se podrá acceder al sitio desde la web. También debe ingresar el nombre de la página de entrada al sitio, en este caso digite “index.html”. En la etiqueta de “Error document path” digite “404.html” para manejo de errores. Recuerde en la publicación “Visual Studio Code: diseñando páginas web“, se explica como crear un pequeño sitio web de ejemplo mediante Visual Studio Code. También los archivos están disponibles en la siguiente ruta de GitHub. Para fines prácticos y los puede descargar para seguir la demostración o subir sus propias páginas. Los puede copiar en un folder local para para luego subirlos a la cuenta de almacenamiento de Azure en el orden que posteriormente se irá indicando.

• En esa misma pantalla, navegue en el menú del lado izquierda debajo del submenú de “Blob service” y seleccione “Containers”. Note como en el panel se despliega el container llamado “$web”, el cual corresponde al contenedor para hospedar el sitio web que vamos a darle contenido en los siguientes pasos.

• Al navegar el contenedor “$web”, se tiene una configuración predeterminada, pero se requiere subir los archivos html para poder habilitar nuestro sitio web.

• En el paso correspondiente a la Figura No.7, indicamos la página de índice como “index.html” y el error como “404.html”, entonces se deben subir los archivos mediante la opción de “Upload”. Tome en cuenta que, para fines de analizar el comportamiento del sitio, debe ir subiendo los archivos conforme se va indicando, no subir todos los archivos al mismo tiempo, en cuyo caso, algunos pasos no darán el comportamiento esperado de los pasos descritos.

• Seleccione de la ruta donde tiene creados los archivos html el archivo “index.html” y la imagen para ser cargadas al repositorio que copio en el paso No.7.

• Ya podemos iniciar a navegar el sitio. Para esto, busque la dirección que copio previamente del punto de entrada primario “Primary endpoint” del paso que mostraba la Figura No.7, este también lo puede localizar nuevamente si así lo requiere, en la sección de la cuenta de almacenamiento llamada “Web Static”. Coloque la dirección en el navegador de su preferencia y debería verse similar a la siguiente figura:

• Si presiona la navegación a la opción “ACERCA DEL SITIO”, se le va a generar un error como el que muestra a continuación, esto porque no hemos aún subido al sitio la página para el manejo de errores:

• Regrese nuevamente a la pantalla del contenedor “$web” y proceda a subir el archivo provisto llamado “404.html”.

• Diríjase nuevamente al navegador web e intente de nuevo la misma acción, navegando al acerca de. Nótese como en esta ocasión se despliega una página personalizada.

• Regrese nuevamente a la pantalla del contenedor “$web” y proceda a subir el archivo provisto llamado “about.html”.

• Diríjase nuevamente al navegador web e intente de nuevo la misma acción, navegando al acerca de. Nótese como en esta ocasión se despliega la página que muestra información “Acerca de”.

• El contenido del contenedor “$web” quedaría con los archivos indicados a continuación:

• En cuanto al tema tan importante del costo, en la siguiente imagen se visualizan los gastos incurridos en el almacenamiento de los 4 recursos que componen nuestro sitio web de prueba, después de tres días de hecha la publicación de sitio web construido:

Considere limpiar de Azure los recursos que creo para esta demostración si lo considera necesario.

Espero este contenido le sea de utilidad.

Recursos útiles:

https://azure.microsoft.com/es-es/services/storage/blobs/#overview

https://www.tutorialspoint.com/How-to-create-tables-in-HTML