Hugo est un générateur de sites statiques (Static Site Generator ou SSG) open source populaire, conçu pour aider les développeurs à créer et à gérer des sites web rapidement et efficacement. Il peut être utilisé pour créer des blogs, des portfolios et toutes les formes de sites web personnels qui ne nécessitent pas de données dynamiques.

Lorsque vous créez des sites avec Hugo, vous souhaitez certainement les héberger en ligne afin de pouvoir les partager avec tous ceux qui ont besoin d’y accéder. C’est là que l’hébergement de sites statiques de Kinsta entre en jeu !

Comprendre l’hébergement de sites statiques de Kinsta

L’hébergement de sites statiques de Kinsta est un service gratuit dédié à l’hébergement de sites statiques. Il sert des fichiers HTML, CSS et JavaScript pré-construits qui ne changent pas dynamiquement. Il fonctionne en connectant un dépôt hébergé sur un fournisseur Git (BitBucket, GitHub ou GitLab) à votre compte Kinsta et en déployant les fichiers de votre site statique sur Internet.

Le service d’hébergement de sites statiques de Kinsta peut construire automatiquement des sites à partir de SSG construits sur Node.js, tandis que pour d’autres, comme Hugo, écrits en langage de programmation Go (Golang), vous devrez concevoir une autre approche.

Cet article explique comment héberger votre site Hugo sur Kinsta gratuitement avec l’hébergement de site statique de Kinsta !

Déployer votre site Hugo sur l’hébergement de site statique de Kinsta

Il y a trois façons de déployer votre site Hugo sur l’hébergement de site statique Kinsta :

  1. Construisez votre site web en utilisant l’intégration continue et le déploiement continu (CI/CD) et déployez-le ensuite.
  2. Utilisez la dépendance du développeur hugo-bin.
  3. Servez des fichiers statiques construits localement.

Dans cet article, nous passons en revue tous ces aspects.

Pré-requis

Pour suivre ce tutoriel, nous supposons que vous avez :

  • Une expérience avec Hugo et Git.
  • Un site Hugo fonctionnant localement.

Construire votre site avec CircleCI et le déployer sur Kinsta

Pour la première méthode, utilisons CircleCI comme outil CI/CD. Cette méthode implique la création d’un flux de travail CircleCI qui construit votre site Hugo dans une nouvelle branche nommée deploy et configure ensuite Kinsta pour déployer les fichiers statiques à partir de cette branche.

Avantages de l’utilisation de CI/CD

Avec cette méthode, vous pouvez éviter d’avoir à construire localement votre site avant de le pousser vers votre dépôt Git. Normalement, Kinsta gère le processus de construction de site pour les SSG qui sont basés sur Node.js, mais pour d’autres SSG comme Hugo, l’utilisation d’un flux de travail peut aider à gérer le processus de construction de site automatiquement.

En outre, vous pouvez ajouter d’autres tâches à votre fichier de configuration CI/CD, par exemple pour lester et tester votre code. Vous garantissez également que votre déploiement n’est mis à jour que si le pipeline CI/CD est bien achevé.

Étape 1 : Créer le fichier de configuration

Commencez par créer un dossier .circleci dans le répertoire racine de votre projet Hugo. Dans ce dossier, créez un fichier config.yml pour définir la configuration de votre flux de travail.

Étape 2 : Pousser votre code dans un dépôt Git

Créez un dépôt Git en utilisant votre fournisseur Git préféré et poussez votre code dans le dépôt.

Étape 3 : Créer une branche orpheline

Ensuite, créez une branche orpheline vide appelée deploy, où les fichiers statiques pour le déploiement seront poussés. Exécutez les commandes suivantes dans le terminal de votre projet :

git switch --orphan deploy
git commit --allow-empty -m "Initial commit on deploy branch"
git push -u origin deploy

N’ajoutez aucun fichier à cette branche ; elle sera automatiquement remplie par le flux de travail CircleCI avec le contenu du dossier public généré par Hugo.

Étape 4 : Créer un compte CircleCI

Visitez le site web de CircleCI et créez un compte si vous n’en avez pas déjà un. Vous pouvez vous inscrire en utilisant votre fournisseur Git préféré, ce qui facilite l’accès à vos dépôts sans configuration supplémentaire.

Étape 5 : Configurer votre dépôt

Après vous être connecté, allez dans votre tableau de bord CircleCI, cliquez sur Projets dans la colonne latérale de gauche, et sélectionnez le dépôt que vous souhaitez configurer. CircleCI détectera automatiquement votre fichier de configuration.

Configurez votre dépôt avec CircleCI.
Configurez votre dépôt avec CircleCI.

Cliquez sur le bouton Configurer le projet pour permettre à CircleCI d’accéder à votre base de code et d’exécuter des flux de travail sur les changements de code.

Étape 6 : Définir la configuration CircleCI

Vous avez maintenant créé un fichier de configuration CircleCI. Construisons son contenu. Assurez-vous d’être dans votre branche par défaut (pas dans la branche deploy ) et commencez par définir la version de CircleCI, qui est actuellement 2.1 :

version: 2.1

Étape 7 : Définir les exécuteurs

Puisqu’il s’agit d’un projet Hugo, vous devez définir un exécuteur pour exécuter les tâches. Définissez l’adresse hugo-executor ici afin de ne pas avoir à la définir pour chaque tâche. Cet exécuteur utilise une image Docker (cibuilds/hugo:latest) pour créer un environnement cohérent pour la construction du site Hugo :

executors:
  hugo-executor:
    docker:
      - image: cibuilds/hugo:latest

Étape 8 : Définir les tâches

Ensuite, définissez deux tâches : build et push build. Ces jobs spécifient les étapes à exécuter dans chaque job :

jobs:
  build:
    executor: hugo-executor

  push build:
    executor: hugo-executor

Tâche build :

Cette tâche est responsable de la construction de votre site Hugo et du stockage temporaire des fichiers statiques générés dans l’espace de travail afin qu’ils puissent être accessibles pour une utilisation ultérieure dans la tâche push build.

build:
  executor: hugo-executor
  steps:
    - checkout

    - run:
        name: Update theme
        command: git submodule update --init --recursive

    - run:
        name: Build Hugo site
        command: hugo --destination=workspace/public

    # Persist the 'build' directory to the workspace
    - persist_to_workspace:
        root: workspace
        paths:
          - public

La tâche ci-dessus spécifie qu’elle utilise l’exécuteur hugo-executor défini plus tôt. Elle exécute ensuite quatre étapes principales :

  • checkout: Cette étape extrait le code source de votre projet du dépôt GitHub.
  • Update theme: Cette étape initialise et met à jour les sous-modules Git (s’il y en a) pour s’assurer que votre thème Hugo est à jour. Ceci est utile si votre site Hugo utilise les modules Git pour référencer le thème utilisé au lieu de pousser de gros fichiers de thèmes déjà disponibles sur GitHub.
  • Build Hugo site: Cette étape construit le site Hugo et spécifie le dossier de destination comme workspace/public.
  • persist_to_workspace: Cette étape persiste le répertoire public (sortie de la construction de Hugo) à l’espace de travail pour une utilisation ultérieure dans la tâche push build.

Pousser la tâche build :

La tâche push build est responsable de pousser le site construit vers une branche orpheline (deploy) dans votre dépôt GitHub. De cette façon, votre code reste sur la branche par défaut, et la branche deploy n’héberge que les fichiers statiques de votre site.

push build:
  executor: hugo-executor
  steps:
    - attach_workspace:
        at: workspace

    - run:
        name: Push build folder to GitHub
        command: |
          # Configure Git identity (replace <GitHubUsername> with your actual username)
          git config --global user.name "<GitHubUsername>"
          git config --global user.email "<GitHubUsername>@users.noreply.github.com"

          # Clone the repository (replace <your-repo-name> with your actual repository URL)
          git clone --branch deploy --depth 1 https://<GitHubUsername>:${GITHUB_TOKEN}@github.com/<GitHubUsername>/<your-repo-name>.git deployment

          # Copy the 'public' directory to the deployment folder
          cp -R workspace/public deployment

          # Navigate to the deployment folder
          cd deployment

          # Commit and push changes
          git add .
          git commit -m "Auto generated from ${CIRCLE_SHA1}"
          git push

La tâche ci-dessus effectue les opérations suivantes :

  • attach_workspace: Cette étape attache l’espace de travail où la tâche build a persisté le répertoire public.
  • Push build folder to GitHub: Cette étape effectue plusieurs opérations Git :
    • Configure l’identité Git avec votre nom d’utilisateur GitHub et votre e-mail.
    • Clone votre dépôt GitHub dans un dossier nommé deployment sur la machine CircleCI runner.
    • Copie le contenu du répertoire workspace/public (le site Hugo construit) dans le répertoire deployment.
    • Change le répertoire de travail en deployment.
    • Commite les changements avec un message indiquant qu’il s’agit d’un commit généré automatiquement par CircleCI.
    • Pousse les changements vers une nouvelle branche sur votre dépôt GitHub.

Veillez à remplacer <GitHubUsername> et <your-repo-name> par votre nom d’utilisateur GitHub et votre nom de dépôt. Assurez-vous également de créer un jeton d’accès GitHub afin que CircleCI puisse accéder à votre compte GitHub.

Définissez les champs d'application pour le jeton d'accès GitHub.
Définissez les champs d’application pour le jeton d’accès GitHub.

Ensuite, ajoutez le jeton comme une variable d’environnement nommée GITHUB_TOKEN dans les paramètres de votre projet CircleCI.

Étape 9 : Définir le flux de travail

Une fois vos tâches configurées, la phase suivante consiste à configurer votre flux de travail. En continuant votre configuration CircleCI, créez un workflow qui déclenche la tâche build lorsqu’il y a des changements de code sur la branche main et qui exige que la tâche build se termine avec succès avant d’exécuter la tâche push build:

workflows:
  version: 2
  build-and-deploy:
    jobs:
      - build:
          filters:
            branches:
              only:
                - main
      - push build:
          requires:
            - build

Étape 10 : Livrer et pousser

Une fois que votre flux de travail est configuré avec succès, validez et poussez vos changements dans votre dépôt Git. CircleCI détecte automatiquement la présence du fichier de configuration et déclenche les flux de travail que vous avez définis lors des changements de code.

Détails du pipeline CircleCI.
Détails du pipeline CircleCI.

Lorsque vous consultez votre dépôt GitHub, la branche deploy contient déjà le dossier public, qui contient les fichiers statiques.

Vous pouvez vérifier la configuration complète de CircleCI dans ce dépôt d’exemple.

Étape 11 : Déployer les fichiers statiques sur Kinsta

Le déploiement sur Kinsta se fait en quelques secondes, d’autant plus que les fichiers statiques sont déjà construits. Suivez ces étapes pour déployer votre site Hugo gratuitement avec l’hébergement de site statique :

  1. Connectez-vous ou créez un compte pour voir votre tableau de bord MyKinsta.
  2. Autorisez Kinsta avec votre fournisseur Git.
  3. Cliquez sur Sites statiques sur la colonne latérale gauche, puis cliquez sur Ajouter un site.
  4. Sélectionnez le dépôt et la branche à partir de laquelle vous souhaitez déployer (la branche deploy ).
  5. Attribuez un nom unique à votre site et cliquez sur Continuer.
  6. Laissez les champs Commande build et Version Node vides et indiquez le Répertoire de publication comme public.
  7. Enfin, cliquez sur Créer un site.

Et c’est tout ! Vous disposez maintenant d’un site déployé en quelques secondes. Un lien est fourni pour accéder à la version déployée de votre site. Vous pouvez ultérieurement ajouter votre domaine personnalisé et votre certificat SSL si vous le souhaitez.

Utiliser Hugo-Bin pour construire et déployer votre site Hugo sur Kinsta

Le paquet Hugo-bin est une enveloppe binaire pour Hugo. Il vous permet de construire et de servir votre projet Hugo avec des commandes Node.js. Cette méthode ne nécessite pas d’outil CI/CD pour construire votre site avant de le déployer sur Kinsta Static Site Hosting.

Pour utiliser le paquet Hugo-bin dans votre projet Hugo :

  1. Initialisez Node.js à la racine de votre projet en exécutant la commande npm init -y.
  2. Ensuite, installez Hugo-bin en tant que dépendance de développeur dans votre projet en exécutant cette commande :
npm i -D hugo-bin
  1. Ajoutez les commandes de script suivantes à votre fichier package.json:
"scripts": {
    "build": "hugo",
    "create": "hugo new",
    "serve": "hugo server"
  }

Grâce à cela, Kinsta pourra construire et servir votre site Hugo sans que vous ayez besoin de construire vos fichiers avant de les déployer.

Une fois que tout est fait, poussez votre code dans votre dépôt Git. Suivez ces étapes pour déployer votre site statique sur Kinsta :

  1. Connectez-vous ou créez un compte pour afficher votre tableau de bord MyKinsta.
  2. Autorisez Kinsta avec votre fournisseur Git.
  3. Cliquez sur Sites statiques dans la colonne latérale gauche, puis sur Ajouter un site.
  4. Sélectionnez le dépôt et la branche à partir desquels vous souhaitez déployer.
  5. Attribuez un nom unique à votre site.
  6. Ajoutez les réglages de construction dans le format suivant :
    • Commande de construction : npm run build
    • Version de Node : 18.16.0
    • Répertoire de publication : public
  1. Enfin, cliquez sur Créer un site.

Et le tour est joué ! Vous disposez maintenant d’un site déployé en quelques secondes.

Servir vos fichiers statiques uniquement pour Kinsta

Enfin, une autre méthode pour déployer votre site Hugo sur Kinsta consiste à construire votre site localement puis à le déployer sur Kinsta. Ce processus génère un dossier public à la racine de votre projet. Cependant, le principal inconvénient de cette méthode est que vous devez construire votre site localement avant chaque déploiement, ce qui peut prendre du temps et être moins pratique que d’autres méthodes qui automatisent le processus de construction du site.

Par défaut, le dossier public est exclu de votre dépôt Git en raison de son inclusion dans votre fichier .gitignore. Pour l’inclure dans votre dépôt et déployer votre site sur Kinsta :

  1. Supprimez le dossier public de votre fichier .gitignore.
  2. Suivez les étapes de déploiement expliquées ci-dessus.
  3. Déployez le dépôt vers Kinsta, en vous assurant que les champs Commande build et Version Node restent vides, car votre site est déjà construit.
  4. Spécifiez le répertoire de publication comme public.

Vous pouvez également choisir de ne pousser que les fichiers statiques vers votre dépôt GitHub. Pour cette approche, il n’est pas nécessaire d’initialiser un dépôt Git dans le dossier racine de votre projet. Il vous suffit d’exécuter git init dans le dossier public. Cela vous permet de garder le contrôle de version de vos fichiers statiques séparé du reste de votre projet.

Dans ce scénario, lorsque vous poussez les fichiers séparément sans les placer dans un dossier public, indiquez le répertoire de publication comme . lors du déploiement vers Kinsta. Cette notation représente le dossier racine, et Kinsta servira les fichiers en conséquence.

Résumé

Cet article a expliqué trois méthodes efficaces pour déployer votre site Hugo gratuitement sur la plateforme d’hébergement de sites statiques de Kinsta. Vous avez la possibilité de choisir la méthode qui correspond le mieux à vos besoins spécifiques. De plus, pour des informations approfondies sur la création d’un site statique rapide comme l’éclair en utilisant Hugo, lisez notre guide complet.

Joel Olawanle Kinsta

Joel est un développeur d'interfaces publiques qui travaille chez Kinsta en tant que rédacteur technique. Il est un enseignant passionné par l'open source et a écrit plus de 200 articles techniques, principalement autour de JavaScript et de ses frameworks.