Implementación de un sitio de Jekyll en Azure Static Web Apps

  • Artículo

En este artículo se muestra cómo crear e implementar una aplicación web de Jekyll en Azure Static Web Apps.

En este tutorial, aprenderá a:

  • Crear un sitio web de Jekyll.
  • Configurar un recurso de Azure Static Web Apps
  • Implementar la aplicación de Jekyll en Azure.

Si no tiene una suscripción a Azure, cree una cuenta gratuita de Azure antes de empezar.

Requisitos previos

  • Instalar Jekyll
    • Puede usar el subsistema de Windows para Linux y seguir las instrucciones de Ubuntu si fuera necesario.
  • 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.
  • Un programa de instalación de Git instalado. Si no lo tiene, puede instalar Git.

Creación de una aplicación de Jekyll

Cree una aplicación de Jekyll mediante la interfaz de la línea de comandos (CLI) de Jekyll:

  1. En el terminal, ejecute Jekyll CLI para crear una aplicación.

    jekyll new static-app

  2. Vaya a la aplicación recién creada.

    cd static-app

  3. Inicialice un nuevo repositorio de Git.

     git init

  4. Confirme los cambios.

    git add -A
git commit -m "initial commit"

Inserción de la aplicación en GitHub

Azure Static Web Apps usa GitHub para publicar su sitio web. En los pasos siguientes se muestra cómo crear un repositorio de GitHub.

  1. Cree un repositorio de GitHub en blanco (no cree un archivo Léame) desde https://github.com/new, denominado jekyll-azure-static.

  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>/jekyll-azure-static

  3. Inserte el repositorio local en GitHub.

    git push --set-upstream origin main

    Nota

    Es posible que su rama de git tenga un nombre distinto a main. Reemplace main en este comando por el valor correcto.

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 Valor
    Suscripción El nombre de la suscripción de Azure.
    Grupos de recursos jekyll-static-app
    Nombre jekyll-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

  7. Seleccione Iniciar sesión con GitHub y autentíquese con GitHub.

  8. Escriba los siguientes valores de GitHub.

    Propiedad Valor
    Organización Seleccione la organización de GitHub que quiera.
    Repositorio Seleccione jekyll-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 la compilación, seleccione Personalizado en la lista desplegable Valores preestablecidos de compilación y conserve los valores predeterminados.

  10. En el cuadro Ubicación de la aplicación, escriba ./ .

  11. Deje en blanco el cuadro Ubicación de la aplicación.

  12. En el cuadro Ubicación del resultado, escriba _site.

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. Cuando finalice 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.

    Deployed application

Configuración personalizada de Jekyll

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 configurar variables de entorno, como JEKYLL_ENV, agregue una sección env a las Acciones de GitHub de Azure Static Web Apps en el flujo de trabajo.

- 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 source code path - optional
      output_location: "_site" # Built app content directory - optional
      ###### End of Repository/Build Configurations ######
   env:
      JEKYLL_ENV: production

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 Sí para confirmar la acción de eliminación.

Pasos siguientes

Agregar un dominio personalizado