Notes
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
Cet article explique comment créer et déployer une application web Hugo sur Azure Static Web Apps. Le résultat final est une nouvelle application web statique Azure avec les actions GitHub associées qui vous permettent de contrôler la façon 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 web statique Azure
- Déployer l’application Hugo sur Azure
Si vous ne disposez pas d’un compte Azure, créez-en un gratuitement avant de commencer.
Conditions préalables
- Un 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éez une application Hugo à l’aide de l’interface de ligne de commande Hugo (CLI) :
Suivez le guide d’installation de Hugo sur votre système d’exploitation.
Ouvrez un terminal.
Exécutez l’interface CLI Hugo pour créer une application.
hugo new site static-app
Accédez à l’application nouvellement créée.
cd static-app
Initialisez un dépôt Git.
git init
Vérifiez que votre branche est nommée
main
.git branch -M main
Ensuite, ajoutez un thème au site en installant un thème en tant que 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
Validez les modifications :
git add -A git commit -m "initial commit"
Transmettre votre application à GitHub
Vous avez besoin d’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.
Créez un dépôt GitHub vide (ne créez pas de fichier README) à partir https://github.com/new.
Ajoutez le dépôt GitHub en tant que référentiel distant à votre dépôt 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
Envoyez votre dépôt local vers 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éer l’application
Accédez au Portail Azure.
Sélectionnez Créer une ressource
Recherchez Applications web statiques
Sélectionnez Static Web Apps
Sélectionnez Créer
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 Lien avec GitHub Sélectionnez Se connecter avec GitHub et authentifiez-vous auprès de GitHub.
Entrez les valeurs GitHub suivantes.
Propriété Valeur Organisation Sélectionnez l’organisation GitHub de votre choix. Référentiel Sélectionnez hugo-static-app. Branche Sélectionnez principal. Remarque
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.
Dans la section Détails de la build , sélectionnez Hugo dans la liste déroulante Présélections de build et conservez les valeurs par défaut.
Vérifier et créer
Sélectionnez Vérifier + créer pour vérifier que les informations sont correctes.
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.
Une fois le déploiement terminé, sélectionnez Accéder à la ressource.
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é.
Version personnalisée de Hugo
Lorsque vous générez une application web statique, un fichier de flux de travail est généré qui contient les paramètres de configuration de 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 flux de travail par défaut créé pour l’application web statique utilise l’action GitHub d’extraction pour extraire une version superficielle de votre référentiel Git, avec une profondeur par défaut de 1. Dans ce scénario, Hugo voit tous vos fichiers de contenu provenant d’une validation unique, de sorte qu’ils ont le même auteur, le dernier horodatage de modification et d’autres .GitInfo
variables.
Mettez à jour votre fichier de flux de travail pour récupérer votre historique Git complet en ajoutant un nouveau paramètre sous l’étape actions/checkout
pour définir la fetch-depth
0
valeur (sans limite) :
- uses: actions/checkout@v3
with:
submodules: true
fetch-depth: 0
L’extraction de l’historique complet augmente le temps de génération de votre workflow GitHub Actions, mais vos .Lastmod
et .GitInfo
variables sont 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 :
- Ouvrez le portail Azure
- Dans la barre de recherche supérieure, recherchez le nom que vous avez fourni précédemment pour votre application.
- Cliquez sur l’application.
- Cliquez sur le bouton Supprimer.
- Cliquez sur Oui pour confirmer l’action de suppression.