El pasado día 19, mientras estaba mirando la presentación de las Static Web App en el Microsoft Build, se me ocurrió hacer una prueba con HUGO para ver si soy capaz de retomar mi blog tras 5 años de inactividad.

TL;DR: Static Web Apps te permite desplegar contenido estático y asignarle un dominio, Azure Web Apps se encarga del resto: creación de una GitHub Action para despliegue continuo, SSL para nuestro dominio personalizado, distribución global y llamar a alguna Azure Function si hace falta alguna pequeña parte dinámica vía API. Y lo mejor de todo es que es GRATIS, incluso el certificado SSL para tu sitio que se renovará automáticamente.

Aviso: todo esto que cuento aquí lo hice sin mirar antes la explicación oficial, donde podréis encontrar una guía avanzada con un despliegue personalizado de HUGO.

Creación del blog

Debo confesar que soy un completo novato en esto de los blogs estáticos. Usé WordPress durante muchos años, pero es verdad que 5 años más tarde todo ha cambiado y utilizo Markdown hasta para mis recetas de cocina, así que esto no puede ser tan difícil. Como este artículo no va de cómo crear un blog tenéis una guía fantástica en la web de HUGO.

Resumo los pasos básicos:

1. Para poder integrar nuestro sitio estático con la generación del blog, necesitamos que nuestro código esté en GitHub, así que creamos un repositorio para nuestro blog:

   

2. Luego creamos un blog con el CLI de HUGO. En la imagen veis los pasos básicos que he realizado:

   

   Podéis ver que he hecho lo siguiente:

   1. He clonado el repositorio

   2. He creado un nuevo sitio con HUGO:

      hugo new site blog_es
      

   3. He añadido el tema bootstrap-4 usando:

      git submodule add https://github.com/alanorth/hugo-theme-bootstrap4-blog themes/bootsrap4-blog
      

   4. He aplicado el tema y he creado este post con:

      hugo new posts/desplegar-un-blog-hugo-en-azure-static-web-app
      

Despliegue de nuestro blog en Azure Static Web App

Una vez que ya hemos subido nuestro blog a GitHub, podemos crear en Azure una nueva Web App Estática.

Tendremos que configurar nuestras credenciales de GitHub:

Y también hay que cambiar la entrada App artifact location al valor public porque es la carpeta de salida por defecto de Hugo:

Esto nos creará una GitHub Action que ejecutará automáticamente HUGO para generar nuestro blog y desplegarlo en nuestra nueva web app, pero el primer despliegue no funcionará. Si recordáis, para añadir un tema en HUGO hemos utilizado un submódulo, así que tendremos que modificar el paso de checkout en la acción para que se descargue también los submódulos que contienen nuestro tema. En la carpeta .github/workflows encontraremos un archivo yml, ahí modificaremos el primer paso así:

- uses: actions/checkout@v2
  with:
    submodules: true

Y al hacer un push a nuestro repositorio se desplegará nuestro blog automáticamente.

Cómo funciona todo esto

La magia se realiza desde dos elementos completamente diferenciados:

• Desde Azure se proporciona toda la infraestructura. Tal como @CJ_Aliaga me explicó, todo esto ya existía en Azure para App Services: la integración de dominios personalizados, SSL, Slots de despliegue (aquí se llaman Environments), autenticación y acceso por roles, control de rutas y, para poder tener una API stateless que sirva contenido dinámico, se integra con Azure Functions.
• En GitHub tenemos las GitHub Actions que realizan la tarea de generar la web estática en base al repositorio que hayamos proporcionado y desplegarla automáticamente a nuestro sitio estático. Para esta tarea en concreto podemos encontrar la acción Azure/static-web-apps-deploy que utiliza una utilidad llamada Oryx que permite detectar automáticamente el lenguaje y compilar un repositorio. Si os fijáis en las plataformas que soporta son: .NET, Nodejs, PHP y Python. Pero también es capaz de generar sitios estáticos a partir de HUGO (usando 0.59) e incluso sitios creados en múltiples lenguajes como Django+React.

El script de la acción de compilación y despliegue, en el caso de que no encuentre código a compilar simplemente desplegará lo que encuentre en la carpeta que le hayamos indicado, por eso en el ejemplo oficial modifican los pasos de la acción para generar el sitio y así poder utilizar la última versión en lugar de la que tiene Oryx internamente:

- name: Setup Hugo
  uses: peaceiris/actions-hugo@v2.4.8
  with:
    hugo-version: "latest"
- name: Build
  run: hugo

Esto significa que podemos utilizar cualquier generador de sitios estáticos mientras este se pueda ejecutar por línea de comando.

Y aquí acabamos por hoy, ahora me queda encontrar una buena plantilla para el blog. ¡Saludos confinados!

• Azure