GSP747

Présentation

Dans cet atelier, vous allez créer un pipeline pour le déploiement de sites Web basés sur Hugo, un outil de création de sites Web statiques. Vous allez stocker le contenu d'un site Web dans un dépôt Git, déployer le site Web avec Firebase, puis utiliser Cloud Build pour créer un pipeline afin de déployer automatiquement le nouveau contenu validé dans le dépôt.

Objectifs

Dans cet atelier, vous allez effectuer les tâches suivantes :

• Lire la présentation d'un site Web statique
• Configurer un site Web avec Hugo
• Stocker le contenu de votre site Web dans un dépôt Git
• Déployer le site Web avec Firebase
• Créer un pipeline de compilation avec Cloud Build pour automatiser le déploiement

Prérequis

Nous vous conseillons de vous familiariser avec les services que vous allez utiliser. Voici d'autres ateliers qui pourraient vous être utiles :

• Créer une application sans serveur qui permet de produire des fichiers PDF à l'aide de Cloud Run
• Tutoriel Web consacré à Firebase

Avantages des sites Web statiques

Les compilateurs de sites statiques tels que Hugo sont devenus populaires en raison de leur capacité à produire des sites Web ne nécessitant pas de serveur Web. Avec les plates-formes Web statiques, il n'y a aucun système d'exploitation serveur ni logiciel à gérer. Il existe toutefois diverses considérations opérationnelles. Par exemple, vous voulez peut-être contrôler les versions de vos publications, héberger votre site Web sur un réseau de diffusion de contenu (CDN) et provisionner un certificat SSL.

Pour répondre à ces besoins, utilisez un pipeline d'intégration continue/de déploiement continu sur Google Cloud. Un pipeline de déploiement permet aux développeurs d'innover rapidement en automatisant l'ensemble du processus de déploiement. Dans cet atelier, vous allez apprendre à créer un pipeline qui illustre cette automatisation.

Préparation

Avant de cliquer sur le bouton "Démarrer l'atelier"

Lisez ces instructions. Les ateliers sont minutés, et vous ne pouvez pas les mettre en pause. Le minuteur, qui démarre lorsque vous cliquez sur Démarrer l'atelier, indique combien de temps les ressources Google Cloud resteront accessibles.

Cet atelier pratique vous permet de suivre les activités dans un véritable environnement cloud, et non dans un environnement de simulation ou de démonstration. Des identifiants temporaires vous sont fournis pour vous permettre de vous connecter à Google Cloud le temps de l'atelier.

Pour réaliser cet atelier :

• Vous devez avoir accès à un navigateur Internet standard (nous vous recommandons d'utiliser Chrome).

Remarque : Ouvrez une fenêtre de navigateur en mode incognito (recommandé) ou de navigation privée pour effectuer cet atelier. Vous éviterez ainsi les conflits entre votre compte personnel et le compte temporaire de participant, qui pourraient entraîner des frais supplémentaires facturés sur votre compte personnel.

• Vous disposez d'un temps limité. N'oubliez pas qu'une fois l'atelier commencé, vous ne pouvez pas le mettre en pause.

Remarque : Utilisez uniquement le compte de participant pour cet atelier. Si vous utilisez un autre compte Google Cloud, des frais peuvent être facturés à ce compte.

Démarrer l'atelier et se connecter à la console Google Cloud

1. Cliquez sur le bouton Démarrer l'atelier. Si l'atelier est payant, une boîte de dialogue s'affiche pour vous permettre de sélectionner un mode de paiement. Sur la droite, vous trouverez le panneau Préparation et accès à l'atelier, qui contient les éléments suivants :

   • Le bouton Ouvrir la console Google Cloud
   • Les identifiants temporaires (nom d'utilisateur et mot de passe) que vous devez utiliser pour cet atelier
   • Des informations complémentaires vous permettant d'effectuer l'atelier, si nécessaire

   Notez que le minuteur de l'atelier se trouve en haut de la page et indique le temps restant.

2. Cliquez sur Ouvrir la console Google Cloud (ou effectuez un clic droit et sélectionnez Ouvrir le lien dans une fenêtre en navigation privée si vous utilisez Chrome).

   L'atelier lance les ressources, puis ouvre la page "Se connecter" dans un nouvel onglet.

   Conseil : Réorganisez les onglets dans des fenêtres distinctes, placées côte à côte.

   Remarque : Si la boîte de dialogue Sélectionner un compte s'affiche, cliquez sur Utiliser un autre compte.

3. Si nécessaire, copiez le nom d'utilisateur ci-dessous et collez-le dans la boîte de dialogue Se connecter.

   {{{user_0.username | "Username"}}}

   Vous trouverez également le nom d'utilisateur dans le panneau Préparation et accès à l'atelier.

4. Cliquez sur Suivant.

5. Copiez le mot de passe ci-dessous et collez-le dans la boîte de dialogue Bienvenue.

   {{{user_0.password | "Password"}}}

   Vous trouverez également le mot de passe dans le panneau Préparation et accès à l'atelier.

6. Cliquez sur Suivant.

   Important : Vous devez utiliser les identifiants fournis pour l'atelier. N'utilisez pas les identifiants de votre compte Google Cloud. Remarque : Si vous utilisez votre propre compte Google Cloud pour cet atelier, des frais supplémentaires pourront vous être facturés.

7. Accédez aux pages suivantes :

   • Acceptez les conditions d'utilisation.
   • N'ajoutez pas d'options de récupération ni d'authentification à deux facteurs (ce compte est temporaire).
   • Ne vous inscrivez pas à des essais sans frais.

Après quelques instants, la console Cloud s'ouvre dans cet onglet.

Remarque : Pour accéder aux produits et services Google Cloud, cliquez sur le menu de navigation ou saisissez le nom du service ou du produit dans le champ Recherche.

Présentation du processus

Voici un diagramme de ce que vous allez créer :

L'objectif est de pouvoir valider le code afin que celui-ci déclenche le pipeline, lequel aura pour rôle de déployer le site Web. Votre parcours se divise en deux parties. Tout d'abord, vous allez créer le site Web localement et le déployer manuellement dans Firebase. Ensuite, vous allez automatiser le processus en créant un pipeline à l'aide de Cloud Build.

Tâche 1 : Déploiement manuel

Commencez par créer le site Web manuellement sur une instance Linux pour apprendre le processus de bout en bout. Vous utiliserez également l'instance Linux pour effectuer certaines des tâches ponctuelles nécessaires à l'exécution de Firebase.

Se connecter à l'instance Linux

1. Dans le menu de navigation (), sélectionnez Compute Engine > Instances de VM. Examinez l'instance qui a été créée pour vous.

Au bout de la ligne, vous pouvez voir une adresse IP externe et un bouton SSH, comme illustré dans la figure ci-dessous. Si ces éléments sont masqués par un panneau d'informations, fermez-le pour voir toute la ligne.

2. Notez l'adresse IP externe, car vous en aurez besoin plus tard.
3. Cliquez sur SSH. Une fenêtre contenant une invite shell s'affiche.

Installer Hugo

Installez à présent Hugo dans l'instance Linux pour tester le site Web localement avant de le déployer avec Firebase. Pour vous faciliter la tâche, un script shell est fourni dans cet atelier.

1. Dans le shell de l'instance Linux, examinez le fichier installhugo.sh :

cat /tmp/installhugo.sh

Vous devriez obtenir un résultat semblable à celui-ci :

Résultat :

_HUGO_VERSION=0.96.0 curl -L https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz | tar -xz -C /tmp/ # echo The Hugo binary is now at /tmp/hugo.

Notez l'utilisation de la commande curl pour télécharger Hugo et de la commande tar pour décompresser l'archive Hugo. Dans la suite de cet atelier, vous verrez des commandes similaires au cours de la création du pipeline.

2. Saisissez les commandes ci-dessous pour exécuter le script et installer Hugo :

cd ~ /tmp/installhugo.sh

Une fois l'installation terminée, vous recevez un message indiquant que Hugo a été installé dans le répertoire /tmp, comme illustré ci-dessous.

Vous êtes désormais prêt à créer l'infrastructure du site Web.

Créer un dépôt et le site Web initial

Clonez le dépôt Git précréé sur l'instance Linux.

Le clonage d'un dépôt crée un miroir de celui-ci dans le shell. Cela vous permet d'implémenter le site Web dans le shell et de valider vos modifications plus tard dans le système de fichiers. Dans la suite de cet atelier, vous allez configurer un pipeline qui répond à ces commits effectués dans le dépôt.

1. Installez git sur la VM Linux, puis définissez l'ID et le numéro de votre projet ainsi que la région. Enregistrez-les en tant que variables PROJECT_ID, PROJECT_NUMBER et REGION.

Saisissez les commandes suivantes dans le shell de l'instance Linux :

export PROJECT_ID=$(gcloud config get-value project) export PROJECT_NUMBER=$(gcloud projects describe $PROJECT_ID --format="value(projectNumber)") export REGION=$(gcloud compute project-info describe \ --format="value(commonInstanceMetadata.items[google-compute-default-region])") sudo apt-get update sudo apt-get install -y git

2. Exécutez les commandes suivantes pour configurer Git :

git config --global init.defaultBranch main git config --global user.name "student" git config --global user.email "{{{user_0.username | "filled in at lab start"}}}"

3. Saisissez les commandes suivantes pour cloner le dépôt précréé depuis le serveur Gitea local :

cd ~ git clone http://giteaadmin:GiteaPassword123@localhost:3000/giteaadmin/my_hugo_site.git Remarque : Le message d'avertissement warning: You appear to have cloned an empty repository. (Avertissement : Il semble que vous ayez cloné un dépôt vide) est normal, car le dépôt vient d'être initialisé et ne contient encore aucun commit.

Cliquez sur Vérifier ma progression pour valider l'objectif. Créer un dépôt Git

Vous êtes maintenant prêt à créer la structure du site.

6. Saisissez les commandes suivantes dans le shell Linux :

cd ~ /tmp/hugo new site my_hugo_site --force

Normalement, la commande hugo crée le répertoire. L'option --force crée le site dans le répertoire du dépôt, qui existe déjà. Vous pouvez ainsi conserver les informations relatives à Git dans le répertoire que vous venez de cloner.

Une fois l'opération terminée, des messages indiquant que le site a été créé s'affichent.

7. Installez maintenant le thème hello-friend-ng pour mettre en page votre site. Saisissez les commandes suivantes dans le shell de l'instance Linux :

cd ~/my_hugo_site git clone \ https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng echo 'theme = "hello-friend-ng"' >> config.toml

Une fois l'opération terminée, des messages indiquant que le thème a été cloné s'affichent.

8. Supprimez les fichiers Git du répertoire de thèmes :

sudo rm -r themes/hello-friend-ng/.git sudo rm themes/hello-friend-ng/.gitignore Remarque : Les fichiers Git doivent être supprimés pour que le dépôt Git puisse ajouter les fichiers de thèmes au contrôle des versions.

9. La structure du site Web étant maintenant configurée, vous pouvez prévisualiser celui-ci. Saisissez la commande ci-dessous pour lancer le site sur le port TCP 8080 :

cd ~/my_hugo_site /tmp/hugo server -D --bind 0.0.0.0 --port 8080

Hugo crée le site et le rend accessible sur le port TCP 8080. Le serveur s'exécute jusqu'à ce que vous l'arrêtiez en appuyant sur Ctrl+C.

10. Ouvrez un onglet de navigateur et accédez à l'adresse IP externe sur le port 8080. Utilisez l'URL suivante, en remplaçant [EXTERNAL IP] par l'adresse IP externe de votre instance hugo-dev-vm.

Vous trouverez l'adresse IP externe dans la console Google Cloud, sous Compute Engine > Instances de VM, dans la colonne Adresse IP externe. Vous pouvez également exécuter la commande suivante dans votre terminal pour la récupérer :

curl -s -H "Metadata-Flavor: Google" http://metadata.google.internal/computeMetadata/v1/instance/network-interfaces/0/access-configs/0/external-ip

Accédez à l'adresse suivante :

http://[EXTERNAL IP]:8080

Le site Web doit ressembler à ceci :

Cliquez sur Vérifier ma progression pour valider l'objectif. Lancer le site sur le port TCP 8080

11. Revenez au shell Linux et appuyez sur Ctrl+C pour arrêter le serveur Hugo.

Déployer le site sur Firebase

1. Installez la CLI Firebase dans le shell de l'instance Linux :

curl -sL https://firebase.tools | bash

2. Vous devez maintenant initialiser Firebase. Saisissez la commande ci-dessous dans le shell :

cd ~/my_hugo_site firebase init

3. À l'aide des touches fléchées et de la barre d'espace, sélectionnez Hosting: Set up deployments for static web apps (Hosting : configurer des déploiements pour des applications Web statiques), puis appuyez sur Entrée.

• Lorsque vous êtes invité à indiquer une option de projet, sélectionnez Use an existing project (Utiliser un projet existant), puis utilisez les touches fléchées, la barre d'espace et la touche Entrée pour sélectionner l'ID de projet .

• Pour le répertoire public, sélectionnez la valeur par défaut public.

• Pour la configuration en tant qu'application monopage, saisissez N et appuyez sur Entrée.

• Pour la configuration des déploiements et compilations automatiques avec GitHub/un dépôt Git externe, saisissez N, puis appuyez sur ENTRÉE.

• Pour installer les compétences agentiques pour Firebase, sélectionnez N.

Si vous êtes invité à remplacer des fichiers existants, sélectionnez Y.

4. Vous êtes prêt à déployer l'application. Saisissez les commandes ci-dessous dans le shell de l'instance Linux pour recréer le site avec Hugo et le déployer avec Firebase :

/tmp/hugo && firebase deploy

5. Une fois l'application déployée, vous recevez une URL d'hébergement. Cliquez dessus pour afficher le même site Web diffusé à partir du CDN (réseau de diffusion de contenu) de Firebase.

Si vous recevez un message générique de bienvenue, attendez quelques minutes que le CDN soit initialisé, puis actualisez la fenêtre du navigateur. Enregistrez cette URL d'hébergement pour une utilisation ultérieure.

Vous avez maintenant exécuté l'intégralité du déploiement en local. L'étape suivante consiste à automatiser le processus de bout en bout à l'aide de Cloud Build.

Tâche 2 : Automatiser le déploiement

Vérifier les variables d'environnement

Avant de continuer, vérifiez que les variables d'environnement de votre session sont toujours définies. Si vous avez redémarré votre session de terminal ou si vous avez été déconnecté, exécutez les commandes suivantes dans le shell de l'instance Linux pour les redéfinir :

export PROJECT_ID=$(gcloud config get-value project) export PROJECT_NUMBER=$(gcloud projects describe $PROJECT_ID --format="value(projectNumber)") export REGION=$(gcloud compute project-info describe \ --format="value(commonInstanceMetadata.items[google-compute-default-region])")

Configurer la compilation

Cloud Build utilise un fichier nommé cloudbuild.yaml dans le répertoire racine du dépôt pour effectuer la compilation. Le fichier est au format YAML. Comme les espaces et les retraits sont importants, ils ont déjà été placés dans l'instance Linux pour vous.

1. Dans le shell Linux, saisissez la commande suivante. Notez le point final (".") à la fin de la commande cp :

cd ~/my_hugo_site cp /tmp/cloudbuild.yaml .

2. Exécutez la commande suivante pour voir à quoi ressemble le fichier cloudbuild.yaml.

cat cloudbuild.yaml

Notez qu'un retour à la ligne est effectué sur certaines lignes en raison de leur longueur.

Résultat :

# Copyright 2020 Google Inc. All rights reserved. # # Licensed under the Apache License, Version 2.0 (the "License"); # you may not use this file except in compliance with the License. # You may obtain a copy of the License at # # http://www.apache.org/licenses/LICENSE-2.0 # # Unless required by applicable law or agreed to in writing, software # distributed under the License is distributed on an "AS IS" BASIS, # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. # See the License for the specific language governing permissions and # limitations under the License. steps: - name: 'gcr.io/cloud-builders/git' args: ['clone', 'http://giteaadmin:GiteaPassword123@${_GIT_SERVER_IP}:3000/giteaadmin/my_hugo_site.git', '.'] - name: 'gcr.io/cloud-builders/curl' args: - '-L' - 'https://firebase.tools/bin/linux/latest' - '-o' - '/workspace/firebase' - name: 'gcr.io/cloud-builders/curl' args: - '-L' - 'https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz' - '-o' - '/workspace/hugo.tar.gz' waitFor: ['-'] - name: 'ubuntu:20.04' args: - 'bash' - '-c' - | tar -xvf /workspace/hugo.tar.gz chmod 755 /workspace/firebase /workspace/hugo /workspace/firebase deploy --project ${PROJECT_ID} --non-interactive --only hosting -m "Build ${BUILD_ID}" substitutions: _HUGO_VERSION: 0.96.0 _GIT_SERVER_IP: '' options: defaultLogsBucketBehavior: REGIONAL_USER_OWNED_BUCKET

3. Voici quelques observations sur le fichier cloudbuild.yaml :

• Ce fichier comporte quatre étapes nommées, chacune d'entre elles étant exécutée par une image de conteneur. La première étape utilise git pour cloner le code source du site à partir du dépôt Gitea. Les deux étapes suivantes utilisent un compilateur compatible avec Google pour utiliser curl afin de télécharger les outils Hugo et Firebase.
• La quatrième étape utilise un conteneur Ubuntu standard pour installer Hugo et Firebase, après quoi le site est créé et déployé. L'installation de Hugo et de Firebase pour chaque déploiement vous permet de modifier la version de Hugo à tout moment, tout en utilisant la dernière version de Firebase.
• Les commandes tar et wget sont presque identiques à celles utilisées précédemment dans le script installhugo.sh.
• Le fichier utilise également des variables de substitution personnalisées (_HUGO_VERSION et _GIT_SERVER_IP) et une variable de substitution fournie par Google (PROJECT_ID) pour permettre l'utilisation de ce modèle dans différents environnements.
• Les binaires Hugo et Firebase sont créés et installés dans un répertoire temporaire pour que l'on ne risque pas de les déployer accidentellement sur le site Web.

Exécuter le premier commit

L'objectif de la création du pipeline est de pouvoir déclencher des compilations lorsque des modifications sont apportées au dépôt. Pour commencer, vous allez exécuter un premier commit dans le dépôt, afin de valider votre capacité à effectuer d'autres modifications.

1. Dans le shell Linux, saisissez les commandes ci-dessous pour créer un fichier .gitignore afin d'exclure certains répertoires du dépôt :

cd ~/my_hugo_site echo "resources" >> .gitignore

2. Effectuez le premier commit dans le dépôt :

git add . git commit -m "Add app to Git Repository" git push -u origin main

Vous venez de valider (importer) la version initiale du site Web dans Google Cloud.

Remarque : Assurez-vous que votre branche est correcte en exécutant la commande git branch. Si le nom de la branche est master, renommez-la en main à l'aide de la commande suivante : git branch -m master main.

Créer le déclencheur de webhook Cloud Build

Vous allez maintenant créer un déclencheur de webhook Cloud Build qui répond aux transferts de code depuis le dépôt Git Gitea.

1. Créez un déclencheur de webhook Cloud Build à l'aide du secret Secret Manager préprovisionné :

gcloud builds triggers create webhook --name="commit-to-main-branch1" \ --inline-config="cloudbuild.yaml" \ --secret="projects/$PROJECT_ID/secrets/webhook-secret/versions/1" \ --service-account="projects/$PROJECT_ID/serviceAccounts/$(gcloud projects describe $PROJECT_ID --format='value(projectNumber)')-compute@developer.gserviceaccount.com" \ --substitutions=_GIT_SERVER_IP=$(curl -s -H "Metadata-Flavor: Google" http://metadata.google.internal/computeMetadata/v1/instance/network-interfaces/0/access-configs/0/external-ip) \ --region=$REGION

Cliquez sur Vérifier ma progression pour valider l'objectif. Créer le déclencheur Cloud Build

Compte de service Cloud Build

Le compte de service Cloud Build doit être autorisé à utiliser Firebase pour déployer le site Web.

Cloud Build	Rôle	Description
[PROJECT_NUMBER]@cloudbuild.gserviceaccount.com	roles/firebasehosting.admin	Accès complet en lecture/écriture aux ressources Hosting

Tester le pipeline

Maintenant que vous avez créé le pipeline, vous allez apporter une modification au site et la valider pour vérifier sa propagation.

1. Dans le shell Linux, saisissez la commande ci-dessous pour accéder au répertoire du dépôt :

cd ~/my_hugo_site

2. Modifiez le fichier config.toml et remplacez le titre.

Vous pouvez utiliser l'éditeur de texte nano pour ouvrir et modifier le fichier :

nano config.toml

Recherchez la ligne contenant title et remplacez-la par :

title = "Blogging with Hugo and Cloud Build"

Appuyez sur CTRL+O, puis sur ENTRÉE pour enregistrer, et sur CTRL+X pour quitter l'éditeur nano.

Vous pouvez également exécuter la commande sed suivante dans le shell pour mettre à jour automatiquement le titre :

sed -i 's/title =.*/title = "Blogging with Hugo and Cloud Build"/g' config.toml

3. Saisissez les commandes ci-dessous pour valider les modifications dans le dépôt et déclencher le pipeline Cloud Build :

git add . git commit -m "I updated the site title" git push -u origin main

4. Consultez l'historique de compilation pour connaître l'état de la compilation :

gcloud builds list --region=$REGION

5. Cherchez la compilation en cours dans les journaux de compilation :

gcloud builds log --region=$REGION $(gcloud builds list --region=$REGION --limit=1 --format='value(id)')

6. Récupérez l'URL de la compilation effectuée :

gcloud builds log --region=$REGION $(gcloud builds list --region=$REGION --limit=1 --format='value(id)') | grep "Hosting URL"

7. Accédez à l'URL d'hébergement pour voir les résultats.

Vous pouvez également accéder à la console Firebase et examiner le projet pour trouver le nom de domaine.

Remarque : Il peut s'écouler quelques minutes avant que le CDN se mette à jour et que les informations du site soient modifiées. Remarque : Le site dispose d'un certificat SSL et est accessible à l'aide du protocole HTTPS (Hypertext Transfer Protocol Secure).

Cliquez sur Vérifier ma progression pour valider l'objectif. Tester le pipeline

Félicitations !

Vous avez découvert la façon dont Cloud Build peut orchestrer un pipeline pour déployer rapidement des sites Web Hugo sur Firebase, qui fournit un CDN et un certificat SSL. Cloud Build vous permet d'adapter le processus à vos besoins. Les délais de déploiement courts vous permettent d'innover rapidement et de tester facilement les révisions de votre site Web. Pour en savoir plus, consultez la documentation de Cloud Build et Firebase.

Formations et certifications Google Cloud

Les formations et certifications Google Cloud vous aident à tirer pleinement parti des technologies Google Cloud. Nos cours portent sur les compétences techniques et les bonnes pratiques à suivre pour être rapidement opérationnel et poursuivre votre apprentissage. Nous proposons des formations pour tous les niveaux, à la demande, en salle et à distance, pour nous adapter aux emplois du temps de chacun. Les certifications vous permettent de valider et de démontrer vos compétences et votre expérience en matière de technologies Google Cloud.

Dernière mise à jour du manuel : 18 juin 2026

Dernier test de l'atelier : 18 juin 2026

Copyright 2026 Google LLC. Tous droits réservés. Google et le logo Google sont des marques de Google LLC. Tous les autres noms d'entreprises et de produits peuvent être des marques des entreprises auxquelles ils sont associés.