Tutorial: Publicación de un sitio de Hugo en Azure Static Web Apps
En este artículo se muestra cómo crear e implementar una aplicación web de Hugo en Azure Static Web Apps. El resultado final es una nueva aplicación de Azure Static Web Apps, con las Acciones de GitHub asociadas, que le da control sobre cómo se compila y publica la aplicación.
En este tutorial, aprenderá a:
- Crear una aplicación de Hugo
- Configurar Azure Static Web Apps
- Implementar la aplicación de Hugo en Azure
Si no tiene una suscripción a Azure, cree una cuenta gratuita de Azure antes de empezar.
Requisitos previos
- Una cuenta de Azure con una suscripción activa. En caso de no tener una, puede crear una cuenta gratuita.
- Una cuenta de GitHub. En caso de no tener una, puede crear una cuenta gratuita.
Creación de una aplicación de Hugo
Cree una aplicación de Hugo mediante la interfaz de la línea de comandos (CLI) de Hugo:
Siga la guía de instalación de Hugo en su sistema operativo.
Abra un terminal.
Ejecute la CLI de Hugo para crear una aplicación.
hugo new site static-appVaya a la aplicación recién creada.
cd static-appInicialice un repositorio de Git.
git initAsegúrese de que la rama se denomina
main.git branch -M mainA continuación, agregue un tema al sitio; para ello, instale un tema como submódulo de Git y, luego, especifíquelo en el archivo de configuración de Hugo.
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke echo 'theme = "ananke"' >> config.tomlConfirme los cambios.
git add -A git commit -m "initial commit"
Inserción de la aplicación en GitHub
Necesita un repositorio en GitHub para conectarse a Azure Static Web Apps. En los pasos siguientes se muestra cómo crear un repositorio para el sitio.
Cree un repositorio de GitHub en blanco (no cree un archivo Léame) desde https://github.com/new, denominado hugo-static-app.
Agregue el repositorio de GitHub como remoto al repositorio local. Asegúrese de agregar el nombre de usuario de GitHub en lugar del marcador de posición
<YOUR_USER_NAME>en el comando siguiente.git remote add origin https://github.com/<YOUR_USER_NAME>/hugo-static-appInserte el repositorio local en GitHub.
git push --set-upstream origin main
Implementación de la aplicación web
En los pasos siguientes se muestra cómo crear una aplicación de sitio estática e implementarla en un entorno de producción.
Creación de la aplicación
Vaya a Azure Portal.
Seleccione Crear un recurso
Busque Static Web Apps.
Seleccione Static Web Apps.
Seleccione Crear
En la pestaña Datos básicos, especifique los valores siguientes.
Propiedad Value Suscripción El nombre de la suscripción de Azure. Grupos de recursos my-hugo-group Nombre hugo-static-app Tipo de plan Gratis Región para la API y los entornos de ensayo de Azure Functions Seleccione la región más cercana a la suya. Origen GitHub Seleccione Iniciar sesión con GitHub y autentíquese con GitHub.
Escriba los siguientes valores de GitHub.
Propiedad Value Organización Seleccione la organización de GitHub que quiera. Repositorio Seleccione hugo-static-app. Rama Seleccione main (principal). En la sección Detalles de la compilación, seleccione Hugo en la lista desplegable Valores preestablecidos de compilación y conserve los valores predeterminados.
Revisar y crear
Seleccione el botón Revisar y crear para comprobar que todos los detalles sean correctos.
Seleccione Crear para comenzar la creación de la aplicación web estática de App Service y aprovisionar una instancia de Acciones de GitHub para la implementación.
Cuando finalice la implementación, seleccione Ir al recurso.
En la pantalla del recurso, seleccione el vínculo Dirección URL para abrir la aplicación implementada. Es posible que tenga que esperar un par de minutos para que se complete la instancia de Acciones de GitHub.
Versión de Hugo personalizada
Cuando se genera una aplicación web estática, se genera un archivo de flujo de trabajo que contiene los valores de configuración de publicación de la aplicación. Para designar una versión específica de Hugo en el archivo de flujo de trabajo, proporcione un valor para HUGO_VERSION en la sección env. En la configuración de ejemplo siguiente se muestra cómo establecer Hugo en una versión específica.
jobs:
build_and_deploy_job:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v3
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/" # App source code path
api_location: "api" # Api source code path - optional
output_location: "public" # Built app content directory - optional
###### End of Repository/Build Configurations ######
env:
HUGO_VERSION: 0.58.0
Uso de la característica de información de Git en la aplicación Hugo
Si la aplicación Hugo usa la característica de información de Git, el archivo de flujo de trabajo predeterminado creado para la aplicación web estática usará la acción de GitHub de restauración para capturar una versión superficial del repositorio de Git, con una profundidad predeterminada igual a 1. En este escenario, la aplicación Hugo interpreta que todos los archivos de contenido proceden de una sola confirmación, por lo que comparten el mismo autor, la marca de tiempo de última modificación y otras variables .GitInfo.
Actualice el archivo de flujo de trabajo para capturar el historial completo de Git. Para ello, agregue un parámetro en el paso actions/checkout para establecer fetch-depth en 0 (sin límite):
- uses: actions/checkout@v3
with:
submodules: true
fetch-depth: 0
Capturar el historial completo aumenta el tiempo de compilación del flujo de trabajo de Acciones de GitHub, pero las variables .Lastmod y .GitInfo serán precisas y estarán disponibles para cada uno de los archivos de contenido.
Limpieza de recursos
Si no va a seguir usando esta aplicación, puede eliminar el recurso de Azure Static Web Apps mediante los siguientes pasos:
- Abra Azure Portal.
- En la barra de búsqueda superior, busque la aplicación por el nombre que indicó anteriormente.
- Haga clic en la aplicación.
- Haga clic en el botón Eliminar.
- Haga clic en Sí para confirmar la acción de eliminación.