Compartir a través de


Implementació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 web estática de Azure con acciones de GitHub asociadas que proporcionan control sobre cómo se compila y publica la aplicación.

En este tutorial, aprenderá a:

  • Creación de una aplicación de Hugo
  • Configuración de una instancia de Azure Static Web Apps
  • Implementación de la aplicación Hugo en Azure

Si no tiene una cuenta de Azure, cree una cuenta gratuita antes de comenzar.

Prerrequisitos

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:

  1. Siga la guía de instalación de Hugo en el sistema operativo.

  2. Abra un terminal.

  3. Ejecute la CLI de Hugo para crear una aplicación.

    hugo new site static-app
    
  4. Vaya a la aplicación recién creada.

    cd static-app
    
  5. Inicialice un repositorio de Git.

    git init
    
  6. Asegúrese de que la rama se denomina main.

    git branch -M main
    
  7. A continuación, agregue un tema al sitio instalando un tema como submódulo git y, a continuación, especificándolo 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.toml
    
  8. Confirme 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.

  1. Cree un repositorio de GitHub en blanco (no cree un README) llamado https://github.com/new desde .

  2. 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-app
    
  3. Inserte 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

  1. Vaya a Azure Portal.

  2. Seleccione Crear un recurso

  3. Busque Static Web Apps.

  4. Seleccione Static Web Apps.

  5. Seleccione Crear

  6. En la pestaña Datos básicos, especifique los valores siguientes.

    Propiedad Importancia
    Suscripción Nombre de tu suscripción de Azure.
    Grupo 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.
    Fuente GitHub (en inglés)
  7. Seleccione Iniciar sesión con GitHub y autentíquese con GitHub.

  8. Escriba los siguientes valores de GitHub.

    Propiedad Importancia
    Organización Seleccione la organización de GitHub que quiera.
    Repositorio Seleccione hugo-static-app.
    Rama Seleccione main (principal).

    Nota:

    Si no ve ningún repositorio, es posible que deba autorizar Azure Static Web Apps en GitHub. Vaya al repositorio de GitHub y, a continuación, a Configuración > Aplicaciones > Aplicaciones de OAuth autorizadas, seleccione Azure Static Web Apps y, después, Conceder. En el caso de los repositorios de la organización, debe ser propietario de la organización para conceder los permisos.

  9. En la sección Detalles de compilación, seleccione Hugo en la lista desplegable Valores preestablecidos de compilación y mantenga los valores predeterminados.

Revisar y crear

  1. Seleccione el botón Revisar y crear para comprobar que todos los detalles sean correctos.

  2. 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.

  3. Una vez completada la implementación, seleccione Ir al recurso.

  4. 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.

    Aplicación implementada

Versión personalizada de Hugo

Al generar 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. Puede designar una versión específica de Hugo en el archivo de flujo de trabajo proporcionando un valor para HUGO_VERSION en la env sección . En la siguiente configuración de ejemplo 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

Utiliza la función Git Info en tu 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, Hugo ve todos los archivos de contenido como procedentes de una sola confirmación, por lo que tienen el mismo autor, marca de tiempo de última modificación y otras .GitInfo variables.

Actualice el archivo de proceso de trabajo para capturar el historial completo de Git agregando un nuevo parámetro bajo el actions/checkout paso para establecer el fetch-depth en 0 (sin límite):

      - uses: actions/checkout@v3
        with:
          submodules: true
          fetch-depth: 0

La captura del historial completo aumenta el tiempo de compilación del flujo de trabajo de Acciones de GitHub, pero las .Lastmod variables y .GitInfo son precisas y está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:

  1. Abra Azure Portal.
  2. En la barra de búsqueda superior, busque la aplicación por el nombre que indicó anteriormente.
  3. Haga clic en la aplicación.
  4. Haga clic en el botón Eliminar.
  5. Haga clic en para confirmar la acción de eliminación.

Pasos siguientes