Tutoriel : Publier un site Jekyll dans Azure Static Web Apps

Cet article montre comment créer et déployer une application web Jekyll dans Azure Static Web Apps.

Dans ce tutoriel, vous allez apprendre à :

  • Créer un site web Jekyll
  • Configurer une ressource Azure Static Web Apps
  • Déployer l’application Jekyll sur Azure

Si vous n’avez pas d’abonnement Azure, créez un compte gratuit avant de commencer.

Prérequis

  • Installer Jekyll
    • Vous pouvez utiliser le sous-système Windows pour Linux et suivre les instructions Ubuntu, si nécessaire.
  • Compte Azure avec un abonnement actif. Si vous n’en avez pas, vous pouvez créer un compte gratuitement.
  • Un compte GitHub. Si vous n’en avez pas, vous pouvez créer un compte gratuitement.

Créer une application Jekyll

Créez une application Jekyll en utilisant l’interface de ligne de commande (CLI) Jekyll :

  1. À partir du terminal, exécutez l’interface CLI Jekyll pour créer une application.

    jekyll new static-app
    
  2. Accédez à l’application nouvellement créée.

    cd static-app
    
  3. Initialisez un nouveau dépôt Git.

     git init
    
  4. Validez les modifications :

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

Transmettre votre application à GitHub

Azure Static Web Apps utilise GitHub pour publier votre site web. Les étapes suivantes vous montrent comment créer un dépôt GitHub.

  1. Créez un dépôt GitHub vide (ne créez pas de fichier README) sur https://github.com/new appelé Jekyll-static-app.

  2. Ajoutez le référentiel GitHub en tant que référentiel distant pour votre référentiel local. Veillez à remplacer l’espace réservé <YOUR_USER_NAME> par votre nom d’utilisateur GitHub dans la commande suivante.

    git remote add origin https://github.com/<YOUR_USER_NAME>/jekyll-azure-static
    
  3. Transmettez votre référentiel local à GitHub.

    git push --set-upstream origin main
    

    Notes

    Votre branche git peut avoir un nom autre que main. Remplacez main dans cette commande par la valeur correcte.

Déployez votre application web

Les étapes suivantes vous montrent comment créer une application Static Web Apps et la déployer dans un environnement de production.

Création de l'application

  1. Accéder au portail Azure

  2. Sélectionnez Créer une ressource

  3. Recherchez Applications web statiques

  4. Sélectionnez Static Web Apps

  5. Sélectionnez Créer

  6. Sous l’onglet Informations de base, entrez les valeurs suivantes.

    Propriété Valeur
    Abonnement Le nom de votre abonnement Azure.
    Groupe de ressources jekyll-static-app
    Nom jekyll-static-app
    Type de plan Gratuit
    Région de l’API Azure Functions et des environnements intermédiaires Sélectionnez la région la plus proche de vous.
    Source GitHub
  7. Sélectionnez Se connecter avec GitHub et authentifiez-vous auprès de GitHub.

  8. Entrez les valeurs GitHub suivantes.

    Propriété Valeur
    Organisation Sélectionnez l’organisation GitHub de votre choix.
    Dépôt Sélectionnez jekyll-static-app.
    Branche Sélectionnez principal.
  9. Dans la section Détails de build, sélectionnez Personnalisé dans la liste déroulante Présélections de build et conservez les valeurs par défaut.

  10. Dans la zone Emplacement de l’application, entrez ./ .

  11. Laissez la zone Emplacement de l’API vide.

  12. Dans la zone Emplacement de la sortie, entrez _site.

Examiner et créer

  1. Pour vérifier que les informations sont correctes, sélectionnez le bouton Vérifier + créer.

  2. Pour démarrer la création de l’application web statique App Service et le provisionnement d’une action GitHub pour le déploiement, sélectionnez Créer.

  3. Une fois le déploiement terminé, cliquez sur Accéder à la ressource.

  4. Sur l’écran de la ressource, cliquez sur le lien URL pour ouvrir l’application que vous avez déployée. Vous devrez peut-être patienter une ou deux minutes, le temps que l’action GitHub soit terminée.

    Application déployée

Paramètres Jekyll personnalisés

Quand vous générez une application web statique, un fichier de workflow est généré. Celui-ci contient les paramètres de configuration de la publication de l’application.

Pour configurer des variables d’environnement, comme JEKYLL_ENV, ajoutez une section env à l’action GitHub Azure Static Web Apps dans le workflow.

- 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

Nettoyer les ressources

Si vous n’envisagez pas de continuer à utiliser cette application, vous pouvez supprimer la ressource Azure Static Web App en procédant comme suit :

  1. Ouvrez le portail Azure
  2. Dans la barre de recherche supérieure, recherchez le nom que vous avez fourni précédemment pour votre application.
  3. Cliquez sur l’application.
  4. Cliquez sur le bouton Supprimer.
  5. Cliquez sur Yes (Oui) pour confirmer la suppression.

Étapes suivantes