Partager via

Déployer un site Hugo sur Azure Static Web Apps

  • Article

Cet article montre comment créer et déployer une application web Hugo dans Azure Static Web Apps. Vous obtenez ainsi une nouvelle application Azure Static Web Apps avec la fonctionnalité GitHub Actions associée, qui vous permet de contrôler la manière dont l’application est générée et publiée.

Dans ce tutoriel, vous allez apprendre à :

  • Créer une application Hugo
  • Configurer une application Azure Static Web Apps
  • Déployer une application Hugo sur Azure

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

Prérequis

  • 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.
  • Une installation Git. Si vous n’en avez pas, vous pouvez Installer Git.

Créer une application Hugo

Créer une application Hugo à l’aide de l’interface de ligne de commande (CLI) Hugo :

  1. Suivez le Guide d’installation pour Hugo sur votre système d’exploitation.

  2. Ouvrez un terminal.

  3. Exécutez l’interface CLI Hugo pour créer une application.

    hugo new site static-app

  4. Accédez à la nouvelle application.

    cd static-app

  5. Initialisez un dépôt Git.

    git init

  6. Vérifiez que votre branche est nommée main.

    git branch -M main

  7. Ensuite, ajoutez un thème au site en installant un thème sous la forme d’un sous-module git, puis en le spécifiant dans le fichier de configuration Hugo.

    git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml

  8. Validez les modifications :

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

Transmettre votre application à GitHub

Vous devez avoir un référentiel sur GitHub pour vous connecter à Azure Static Web Apps. Les étapes suivantes vous montrent comment créer un référentiel pour votre site.

  1. Créez un référentiel GitHub vide (ne créez pas de fichier README) à partir du https://github.com/new nommé hugo-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>/hugo-static-app

  3. Transmettez votre référentiel local à GitHub.

    git push --set-upstream origin main

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édez 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 my-hugo-group
    Nom hugo-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 hugo-static-app.
    Branche Sélectionnez principal.

    Notes

    En l’absence de dépôt, il peut être nécessaire d’autoriser Azure Static Web Apps sur GitHub. Accédez à votre référentiel GitHub, puis à Paramètres > Applications > Applications OAuth autorisées , sélectionnez Azure Static Web Apps, puis sélectionnez Octroi. Pour les dépôts de l’organisation, vous devez être propriétaire de l’organisation pour accorder des autorisations.

  9. Dans la section Détails de build, sélectionnez Hugo dans la liste déroulante Présélections de build et conservez les valeurs par défaut.

Examiner et créer

  1. Sélectionnez Vérifier + créer pour vérifier que les informations sont correctes.

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

  3. Une fois le déploiement terminé, sélectionnez Accéder à la ressource.

  4. Dans l’écran de la ressource, sélectionnez 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 GitHub Actions soit terminé.

    Deployed application

Version de Hugo personnalisée

Lorsque 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. Vous pouvez désigner une version spécifique de Hugo dans le fichier de workflow, en fournissant une valeur pour HUGO_VERSION dans la section env. L’exemple de configuration suivant montre comment définir Hugo sur une version spécifique.

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

Utiliser la fonctionnalité Git Info dans votre application Hugo

Si votre application Hugo utilise la fonctionnalité Git Info, le fichier de workflow par défaut créé pour l’application web statique utilise l’Action GitHub d’extraction pour extraire une version superficielle de votre dépôt Git, avec une profondeur par défaut de 1. Dans ce scénario, Hugo voit tous vos fichiers de contenu comme provenant d’un même commit, de sorte qu’ils ont le même auteur, le même horodatage pour la dernière modification et d’autres variables .GitInfo identiques.

Mettez à jour votre fichier de workflow pour récupérer votre historique Git complet en ajoutant un nouveau paramètre sous l’étape actions/checkout pour définir fetch-depth sur 0 (pas de limite) :

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

La récupération de l’historique complet augmente la durée de build de votre workflow GitHub Actions, mais vos variables .Lastmod et .GitInfo seront exactes et disponibles pour chacun de vos fichiers de contenu.

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 Oui pour confirmer l’action de suppression.

Étapes suivantes

Ajouter un domaine personnalisé