{"id":73842,"date":"2023-11-13T08:31:32","date_gmt":"2023-11-13T07:31:32","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=73842&#038;preview=true&#038;preview_id=73842"},"modified":"2023-11-14T11:09:04","modified_gmt":"2023-11-14T10:09:04","slug":"deployer-hugo-kinsta-site-statique","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/","title":{"rendered":"Comment d\u00e9ployer un site Hugo sur Kinsta gratuitement avec l&rsquo;h\u00e9bergement de sites statiques"},"content":{"rendered":"<p>Hugo est un g\u00e9n\u00e9rateur de sites statiques (Static Site Generator ou SSG) open source populaire, con\u00e7u pour aider les d\u00e9veloppeurs \u00e0 cr\u00e9er et \u00e0 g\u00e9rer des sites web rapidement et efficacement. Il peut \u00eatre utilis\u00e9 pour cr\u00e9er des blogs, des portfolios et toutes les formes de sites web personnels qui ne n\u00e9cessitent pas de donn\u00e9es dynamiques.<\/p>\n<p>Lorsque vous cr\u00e9ez des sites avec Hugo, vous souhaitez certainement les h\u00e9berger en ligne afin de pouvoir les partager avec tous ceux qui ont besoin d&rsquo;y acc\u00e9der. C&rsquo;est l\u00e0 que l&rsquo;h\u00e9bergement de sites statiques de Kinsta entre en jeu !<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Comprendre l&rsquo;h\u00e9bergement de sites statiques de Kinsta<\/h2>\n<p>L&rsquo;h\u00e9bergement de sites statiques de Kinsta est un service gratuit d\u00e9di\u00e9 \u00e0 l&rsquo;h\u00e9bergement de <a href=\"https:\/\/kinsta.com\/fr\/blog\/site-statique\/\">sites statiques<\/a>. Il sert des fichiers <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-le-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-pratiques-css\/\">CSS<\/a> et <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> pr\u00e9-construits qui ne changent pas dynamiquement. Il fonctionne en connectant un d\u00e9p\u00f4t h\u00e9berg\u00e9 sur un fournisseur Git (<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\">BitBucket<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">GitHub<\/a> ou <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>) \u00e0 votre compte Kinsta et en d\u00e9ployant les fichiers de votre site statique sur Internet.<\/p>\n<p>Le service d&rsquo;h\u00e9bergement de sites statiques de Kinsta peut construire automatiquement des sites \u00e0 partir de SSG construits sur Node.js, tandis que pour d&rsquo;autres, comme Hugo, \u00e9crits en langage de programmation Go (Golang), vous devrez concevoir une autre approche.<\/p>\n<p>Cet article explique comment h\u00e9berger votre site Hugo sur Kinsta gratuitement avec l&rsquo;<a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">h\u00e9bergement de site statique<\/a> de Kinsta !<\/p>\n<h2>D\u00e9ployer votre site Hugo sur l&rsquo;h\u00e9bergement de site statique de Kinsta<\/h2>\n<p>Il y a trois fa\u00e7ons de d\u00e9ployer votre site Hugo sur l&rsquo;h\u00e9bergement de site statique Kinsta :<\/p>\n<ol start=\"1\">\n<li>Construisez votre site web en utilisant l&rsquo;int\u00e9gration continue et le d\u00e9ploiement continu (CI\/CD) et d\u00e9ployez-le ensuite.<\/li>\n<li>Utilisez la d\u00e9pendance du d\u00e9veloppeur <a href=\"https:\/\/www.npmjs.com\/package\/hugo-bin\" target=\"_blank\" rel=\"noopener noreferrer\">hugo-bin<\/a>.<\/li>\n<li>Servez des fichiers statiques construits localement.<\/li>\n<\/ol>\n<p>Dans cet article, nous passons en revue tous ces aspects.<\/p>\n<h3>Pr\u00e9-requis<\/h3>\n<p>Pour suivre ce tutoriel, nous supposons que vous avez :<\/p>\n<ul>\n<li>Une exp\u00e9rience avec Hugo et Git.<\/li>\n<li>Un site Hugo fonctionnant localement.<\/li>\n<\/ul>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Si vous souhaitez en savoir plus sur Hugo, nous vous recommandons de lire l&rsquo;article \u00ab <a href=\"https:\/\/kinsta.com\/fr\/blog\/hugo-site-statique\/\">Comment cr\u00e9er un site statique ultra-rapide avec Hugo<\/a> \u00bb.<\/p>\n<\/aside>\n\n<h2>Construire votre site avec CircleCI et le d\u00e9ployer sur Kinsta<\/h2>\n<p>Pour la premi\u00e8re m\u00e9thode, utilisons <a href=\"https:\/\/circleci.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">CircleCI<\/a> comme outil CI\/CD. Cette m\u00e9thode implique la cr\u00e9ation d&rsquo;un flux de travail CircleCI qui construit votre site Hugo dans une nouvelle branche nomm\u00e9e <code>deploy<\/code> et configure ensuite Kinsta pour d\u00e9ployer les fichiers statiques \u00e0 partir de cette branche.<\/p>\n<h3>Avantages de l&rsquo;utilisation de CI\/CD<\/h3>\n<p>Avec cette m\u00e9thode, vous pouvez \u00e9viter d&rsquo;avoir \u00e0 construire localement votre site avant de le pousser vers votre d\u00e9p\u00f4t Git. Normalement, Kinsta g\u00e8re le processus de construction de site pour les SSG qui sont bas\u00e9s sur Node.js, mais pour d&rsquo;autres SSG comme Hugo, l&rsquo;utilisation d&rsquo;un flux de travail peut aider \u00e0 g\u00e9rer le processus de construction de site automatiquement.<\/p>\n<p>En outre, vous pouvez ajouter d&rsquo;autres t\u00e2ches \u00e0 votre fichier de configuration CI\/CD, par exemple pour lester et tester votre code. Vous garantissez \u00e9galement que votre d\u00e9ploiement n&rsquo;est mis \u00e0 jour que si le pipeline CI\/CD est bien achev\u00e9.<\/p>\n<h3>\u00c9tape 1 : Cr\u00e9er le fichier de configuration<\/h3>\n<p>Commencez par cr\u00e9er un dossier <strong>.circleci<\/strong> dans le r\u00e9pertoire racine de votre projet Hugo. Dans ce dossier, cr\u00e9ez un fichier <strong>config.yml<\/strong> pour d\u00e9finir la configuration de votre flux de travail.<\/p>\n<h3>\u00c9tape 2 : Pousser votre code dans un d\u00e9p\u00f4t Git<\/h3>\n<p>Cr\u00e9ez un d\u00e9p\u00f4t Git en utilisant votre fournisseur Git pr\u00e9f\u00e9r\u00e9 et poussez votre code dans le d\u00e9p\u00f4t.<\/p>\n<h3>\u00c9tape 3 : Cr\u00e9er une branche orpheline<\/h3>\n<p>Ensuite, cr\u00e9ez une <a href=\"https:\/\/git-scm.com\/docs\/git-checkout#Documentation\/git-checkout.txt---orphanltnew-branchgt\" target=\"_blank\" rel=\"noopener noreferrer\">branche orpheline<\/a> vide appel\u00e9e <code>deploy<\/code>, o\u00f9 les fichiers statiques pour le d\u00e9ploiement seront pouss\u00e9s. Ex\u00e9cutez les commandes suivantes dans le terminal de votre projet :<\/p>\n<pre><code class=\"language-bash\">git switch --orphan deploy\ngit commit --allow-empty -m \"Initial commit on deploy branch\"\ngit push -u origin deploy<\/code><\/pre>\n<p>N&rsquo;ajoutez aucun fichier \u00e0 cette branche ; elle sera automatiquement remplie par le flux de travail CircleCI avec le contenu du dossier <strong>public<\/strong> g\u00e9n\u00e9r\u00e9 par Hugo.<\/p>\n<h3>\u00c9tape 4 : Cr\u00e9er un compte CircleCI<\/h3>\n<p>Visitez le site web de CircleCI et cr\u00e9ez un compte si vous n&rsquo;en avez pas d\u00e9j\u00e0 un. Vous pouvez vous inscrire en utilisant votre fournisseur Git pr\u00e9f\u00e9r\u00e9, ce qui facilite l&rsquo;acc\u00e8s \u00e0 vos d\u00e9p\u00f4ts sans configuration suppl\u00e9mentaire.<br \/>\n<aside data-hFZm=\"YTZfWi5FQ09ZRGNqblFvYks=\" data-W=\"akwtNW9fQU83UTNuZERU\" id=\"NzM4NDI=\" data-.3Pk2nW=\"Ui01OUtGQ3U=\" data-Vmvl-G6=\"bHdjbzRPM0c2TGRGaFlzQw==\" data-ljRpC=\"RlpXVTZ4aE9ISVFnQ1JYdw==\" data-r3koi=\"Im1pZGRsZSI=|ImZyX0ZSIg==\" data-_=\"b3ZSYVp0UHBrNlFiMGRLVDdHbg==\" class=\"Wzk3MywxMDExXQ==\" data-D1WbfO9=\"Y1dERUs1QUdQcUJWTEpuZV9s\" data-Vf=\"TkdMcTN4QlViZFA5VFNl\" data-PRy2Y=\"eERtQXJ3NnVPcWViVWR6azF2MldF\" data-Bu=\"T2UuU3RwNEt5WF81MndVQlBjMWo=\" data-H8=\"UVo0OW1MbkQ2XzV3Y2czN3hT\"><\/aside><\/p>\n<h3>\u00c9tape 5 : Configurer votre d\u00e9p\u00f4t<\/h3>\n<p>Apr\u00e8s vous \u00eatre connect\u00e9, allez dans votre <a href=\"https:\/\/app.circleci.com\/dashboard\" target=\"_blank\" rel=\"noopener noreferrer\">tableau de bord CircleCI<\/a>, cliquez sur <strong>Projets<\/strong> dans la colonne lat\u00e9rale de gauche, et s\u00e9lectionnez le d\u00e9p\u00f4t que vous souhaitez configurer. CircleCI d\u00e9tectera automatiquement votre fichier de configuration.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/configure-repo-circleci.jpg\" alt=\"Configurez votre d\u00e9p\u00f4t avec CircleCI.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Configurez votre d\u00e9p\u00f4t avec CircleCI.<\/figcaption><\/figure>\n<p>Cliquez sur le bouton <strong>Configurer le projet<\/strong> pour permettre \u00e0 CircleCI d&rsquo;acc\u00e9der \u00e0 votre base de code et d&rsquo;ex\u00e9cuter des flux de travail sur les changements de code.<\/p>\n<h3>\u00c9tape 6 : D\u00e9finir la configuration CircleCI<\/h3>\n<p>Vous avez maintenant cr\u00e9\u00e9 un fichier de configuration CircleCI. Construisons son contenu. Assurez-vous d&rsquo;\u00eatre dans votre branche par d\u00e9faut (pas dans la branche <code>deploy<\/code> ) et commencez par d\u00e9finir la version de CircleCI, qui est actuellement 2.1 :<\/p>\n<pre><code class=\"language-yaml\">version: 2.1<\/code><\/pre>\n<h3>\u00c9tape 7 : D\u00e9finir les ex\u00e9cuteurs<\/h3>\n<p>Puisqu&rsquo;il s&rsquo;agit d&rsquo;un projet Hugo, vous devez d\u00e9finir un ex\u00e9cuteur pour ex\u00e9cuter les t\u00e2ches. D\u00e9finissez l&rsquo;adresse <code>hugo-executor<\/code> ici afin de ne pas avoir \u00e0 la d\u00e9finir pour chaque t\u00e2che. Cet ex\u00e9cuteur utilise une image Docker (<code>cibuilds\/hugo:latest<\/code>) pour cr\u00e9er un environnement coh\u00e9rent pour la construction du site Hugo :<\/p>\n<pre><code class=\"language-yaml\">executors:\n  hugo-executor:\n    docker:\n      - image: cibuilds\/hugo:latest<\/code><\/pre>\n<h3>\u00c9tape 8 : D\u00e9finir les t\u00e2ches<\/h3>\n<p>Ensuite, d\u00e9finissez deux t\u00e2ches : <code>build<\/code> et <code>push build<\/code>. Ces jobs sp\u00e9cifient les \u00e9tapes \u00e0 ex\u00e9cuter dans chaque job :<\/p>\n<pre><code class=\"language-yaml\">jobs:\n  build:\n    executor: hugo-executor\n\n  push build:\n    executor: hugo-executor<\/code><\/pre>\n<h4>T\u00e2che build :<\/h4>\n<p>Cette t\u00e2che est responsable de la construction de votre site Hugo et du stockage temporaire des fichiers statiques g\u00e9n\u00e9r\u00e9s dans l&rsquo;espace de travail afin qu&rsquo;ils puissent \u00eatre accessibles pour une utilisation ult\u00e9rieure dans la t\u00e2che <code>push build<\/code>.<\/p>\n<pre><code class=\"language-yaml\">build:\n  executor: hugo-executor\n  steps:\n    - checkout\n\n    - run:\n        name: Update theme\n        command: git submodule update --init --recursive\n\n    - run:\n        name: Build Hugo site\n        command: hugo --destination=workspace\/public\n\n    # Persist the 'build' directory to the workspace\n    - persist_to_workspace:\n        root: workspace\n        paths:\n          - public<\/code><\/pre>\n<p>La t\u00e2che ci-dessus sp\u00e9cifie qu&rsquo;elle utilise l&rsquo;ex\u00e9cuteur <code>hugo-executor<\/code> d\u00e9fini plus t\u00f4t. Elle ex\u00e9cute ensuite quatre \u00e9tapes principales :<\/p>\n<ul>\n<li><code>checkout<\/code>: Cette \u00e9tape extrait le code source de votre projet du d\u00e9p\u00f4t GitHub.<\/li>\n<li><code>Update theme<\/code>: Cette \u00e9tape initialise et met \u00e0 jour les sous-modules Git (s&rsquo;il y en a) pour s&rsquo;assurer que votre th\u00e8me Hugo est \u00e0 jour. Ceci est utile si votre site Hugo utilise les modules Git pour r\u00e9f\u00e9rencer le th\u00e8me utilis\u00e9 au lieu de pousser de gros fichiers de th\u00e8mes d\u00e9j\u00e0 disponibles sur GitHub.<\/li>\n<li><code>Build Hugo site<\/code>: Cette \u00e9tape construit le site Hugo et sp\u00e9cifie le dossier de destination comme <strong>workspace\/public<\/strong>.<\/li>\n<li><code>persist_to_workspace<\/code>: Cette \u00e9tape persiste le r\u00e9pertoire <strong>public<\/strong> (sortie de la construction de Hugo) \u00e0 l&rsquo;espace de travail pour une utilisation ult\u00e9rieure dans la t\u00e2che <code>push build<\/code>.<\/li>\n<\/ul>\n<h4>Pousser la t\u00e2che build :<\/h4>\n<p>La t\u00e2che <code>push build<\/code> est responsable de pousser le site construit vers une branche orpheline (<code>deploy<\/code>) dans votre d\u00e9p\u00f4t GitHub. De cette fa\u00e7on, votre code reste sur la branche par d\u00e9faut, et la branche <code>deploy<\/code> n&rsquo;h\u00e9berge que les fichiers statiques de votre site.<\/p>\n<pre><code class=\"language-yaml\">push build:\n  executor: hugo-executor\n  steps:\n    - attach_workspace:\n        at: workspace\n\n    - run:\n        name: Push build folder to GitHub\n        command: |\n          # Configure Git identity (replace &lt;GitHubUsername&gt; with your actual username)\n          git config --global user.name \"&lt;GitHubUsername&gt;\"\n          git config --global user.email \"&lt;GitHubUsername&gt;@users.noreply.github.com\"\n\n          # Clone the repository (replace &lt;your-repo-name&gt; with your actual repository URL)\n          git clone --branch deploy --depth 1 https:\/\/&lt;GitHubUsername&gt;:${GITHUB_TOKEN}@github.com\/&lt;GitHubUsername&gt;\/&lt;your-repo-name&gt;.git deployment\n\n          # Copy the 'public' directory to the deployment folder\n          cp -R workspace\/public deployment\n\n          # Navigate to the deployment folder\n          cd deployment\n\n          # Commit and push changes\n          git add .\n          git commit -m \"Auto generated from ${CIRCLE_SHA1}\"\n          git push<\/code><\/pre>\n<p>La t\u00e2che ci-dessus effectue les op\u00e9rations suivantes :<\/p>\n<ul>\n<li><code>attach_workspace<\/code>: Cette \u00e9tape attache l&rsquo;espace de travail o\u00f9 la t\u00e2che <code>build<\/code> a persist\u00e9 le r\u00e9pertoire <strong>public<\/strong>.<\/li>\n<li><code>Push build folder to GitHub<\/code>: Cette \u00e9tape effectue plusieurs op\u00e9rations Git :\n<ul>\n<li>Configure l&rsquo;identit\u00e9 Git avec votre nom d&rsquo;utilisateur GitHub et votre e-mail.<\/li>\n<li>Clone votre d\u00e9p\u00f4t GitHub dans un dossier nomm\u00e9 <strong>deployment<\/strong> sur la machine CircleCI runner.<\/li>\n<li>Copie le contenu du r\u00e9pertoire <strong>workspace\/public<\/strong> (le site Hugo construit) dans le r\u00e9pertoire <strong>deployment<\/strong>.<\/li>\n<li>Change le r\u00e9pertoire de travail en <strong>deployment<\/strong>.<\/li>\n<li>Commite les changements avec un message indiquant qu&rsquo;il s&rsquo;agit d&rsquo;un commit g\u00e9n\u00e9r\u00e9 automatiquement par CircleCI.<\/li>\n<li>Pousse les changements vers une nouvelle branche sur votre d\u00e9p\u00f4t GitHub.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Veillez \u00e0 remplacer <code>&lt;GitHubUsername&gt;<\/code> et <code>&lt;your-repo-name&gt;<\/code> par votre nom d&rsquo;utilisateur GitHub et votre nom de d\u00e9p\u00f4t. Assurez-vous \u00e9galement de cr\u00e9er un <a href=\"https:\/\/github.com\/settings\/tokens\" target=\"_blank\" rel=\"noopener noreferrer\">jeton d&rsquo;acc\u00e8s GitHub<\/a> afin que CircleCI puisse acc\u00e9der \u00e0 votre compte GitHub.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/scopes-github-access-token.png\" alt=\"D\u00e9finissez les champs d'application pour le jeton d'acc\u00e8s GitHub.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">D\u00e9finissez les champs d&rsquo;application pour le jeton d&rsquo;acc\u00e8s GitHub.<\/figcaption><\/figure>\n<p>Ensuite, ajoutez le jeton <a href=\"https:\/\/kinsta.com\/fr\/blog\/deploiement-continu-react\/#storing-environment-variables-with-circleci\">comme une variable d&rsquo;environnement<\/a> nomm\u00e9e <code>GITHUB_TOKEN<\/code> dans les <strong>param\u00e8tres de<\/strong> votre <strong>projet<\/strong> CircleCI.<\/p>\n<h3>\u00c9tape 9 : D\u00e9finir le flux de travail<\/h3>\n<p>Une fois vos t\u00e2ches configur\u00e9es, la phase suivante consiste \u00e0 <a href=\"https:\/\/kinsta.com\/fr\/blog\/deploiement-continu-react\/#step-5-workflow-configuration\">configurer votre flux de travail<\/a>. En continuant votre configuration CircleCI, cr\u00e9ez un workflow qui d\u00e9clenche la t\u00e2che <code>build<\/code> lorsqu&rsquo;il y a des changements de code sur la branche <code>main<\/code> et qui exige que la t\u00e2che <code>build<\/code> se termine avec succ\u00e8s avant d&rsquo;ex\u00e9cuter la t\u00e2che <code>push build<\/code>:<\/p>\n<pre><code class=\"language-yaml\">workflows:\n  version: 2\n  build-and-deploy:\n    jobs:\n      - build:\n          filters:\n            branches:\n              only:\n                - main\n      - push build:\n          requires:\n            - build<\/code><\/pre>\n<h3>\u00c9tape 10 : Livrer et pousser<\/h3>\n<p>Une fois que votre flux de travail est configur\u00e9 avec succ\u00e8s, validez et poussez vos changements dans votre d\u00e9p\u00f4t Git. CircleCI d\u00e9tecte automatiquement la pr\u00e9sence du fichier de configuration et d\u00e9clenche les flux de travail que vous avez d\u00e9finis lors des changements de code.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/circleci-pipeline.jpg\" alt=\"D\u00e9tails du pipeline CircleCI.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">D\u00e9tails du pipeline CircleCI.<\/figcaption><\/figure>\n<p>Lorsque vous consultez votre d\u00e9p\u00f4t GitHub, la branche <code>deploy<\/code> contient d\u00e9j\u00e0 le dossier <strong>public<\/strong>, qui contient les fichiers statiques.<\/p>\n<p>Vous pouvez v\u00e9rifier la <a href=\"https:\/\/github.com\/olawanlejoel\/hugo-try-circleci\/blob\/main\/.circleci\/config.yml\" target=\"_blank\" rel=\"noopener noreferrer\">configuration compl\u00e8te de CircleCI dans ce d\u00e9p\u00f4t d&rsquo;exemple<\/a>.<\/p>\n<h3>\u00c9tape 11 : D\u00e9ployer les fichiers statiques sur Kinsta<\/h3>\n<p>Le d\u00e9ploiement sur Kinsta se fait en quelques secondes, d&rsquo;autant plus que les fichiers statiques sont d\u00e9j\u00e0 construits. Suivez ces \u00e9tapes pour d\u00e9ployer votre site Hugo gratuitement avec l&rsquo;<a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">h\u00e9bergement de site statique<\/a> :<\/p>\n<ol start=\"1\">\n<li>Connectez-vous ou cr\u00e9ez un compte pour voir votre tableau de bord <a href=\"https:\/\/my.kinsta.com\/?lang=fr\">MyKinsta<\/a>.<\/li>\n<li>Autorisez Kinsta avec votre fournisseur Git.<\/li>\n<li>Cliquez sur <strong>Sites statiques<\/strong> sur la colonne lat\u00e9rale gauche, puis cliquez sur <strong>Ajouter un site<\/strong>.<\/li>\n<li>S\u00e9lectionnez le d\u00e9p\u00f4t et la branche \u00e0 partir de laquelle vous souhaitez d\u00e9ployer (la branche <code>deploy<\/code> ).<\/li>\n<li>Attribuez un nom unique \u00e0 votre site et cliquez sur <strong>Continuer<\/strong>.<\/li>\n<li>Laissez les champs <strong>Commande build<\/strong> et <strong>Version Node<\/strong> vides et indiquez le <strong>R\u00e9pertoire de publication<\/strong> comme <code>public<\/code>.<\/li>\n<li>Enfin, cliquez sur <strong>Cr\u00e9er un site<\/strong>.<\/li>\n<\/ol>\n<p>Et c&rsquo;est tout ! Vous disposez maintenant d&rsquo;un site d\u00e9ploy\u00e9 en quelques secondes. Un lien est fourni pour acc\u00e9der \u00e0 la version d\u00e9ploy\u00e9e de votre site. Vous pouvez ult\u00e9rieurement ajouter votre <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\">domaine personnalis\u00e9<\/a> et votre <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\">certificat SSL<\/a> si vous le souhaitez.<\/p>\n<h2>Utiliser Hugo-Bin pour construire et d\u00e9ployer votre site Hugo sur Kinsta<\/h2>\n<p>Le paquet <a href=\"https:\/\/www.npmjs.com\/package\/hugo-bin\" target=\"_blank\" rel=\"noopener noreferrer\">Hugo-bin<\/a> est une enveloppe binaire pour Hugo. Il vous permet de construire et de servir votre projet Hugo avec des commandes Node.js. Cette m\u00e9thode ne n\u00e9cessite pas d&rsquo;outil CI\/CD pour construire votre site avant de le d\u00e9ployer sur Kinsta Static Site Hosting.<\/p>\n<p>Pour utiliser le paquet Hugo-bin dans votre projet Hugo :<\/p>\n<ol start=\"1\">\n<li>Initialisez Node.js \u00e0 la racine de votre projet en ex\u00e9cutant la commande <code>npm init -y<\/code>.<\/li>\n<li>Ensuite, installez Hugo-bin en tant que d\u00e9pendance de d\u00e9veloppeur dans votre projet en ex\u00e9cutant cette commande :<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm i -D hugo-bin<\/code><\/pre>\n<ol start=\"3\">\n<li>Ajoutez les commandes de script suivantes \u00e0 votre fichier <strong>package.json<\/strong>:<\/li>\n<\/ol>\n<pre><code class=\"language-json\">\"scripts\": {\n    \"build\": \"hugo\",\n    \"create\": \"hugo new\",\n    \"serve\": \"hugo server\"\n  }<\/code><\/pre>\n<p>Gr\u00e2ce \u00e0 cela, Kinsta pourra construire et servir votre site Hugo sans que vous ayez besoin de construire vos fichiers avant de les d\u00e9ployer.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>L&rsquo;utilisation de sous-modules Git avec notre h\u00e9bergement de sites statiques et d&rsquo;applications n&rsquo;est pas possible actuellement. Assurez-vous d&rsquo;ajouter les fichiers de votre th\u00e8me localement dans votre d\u00e9p\u00f4t Git pour qu&rsquo;il fonctionne avec Kinsta.<\/p>\n<\/aside>\n\n<p>Une fois que tout est fait, poussez votre code dans votre d\u00e9p\u00f4t Git. Suivez ces \u00e9tapes pour d\u00e9ployer votre site statique sur Kinsta :<\/p>\n<ol start=\"1\">\n<li>Connectez-vous ou cr\u00e9ez un compte pour afficher votre tableau de bord <a href=\"https:\/\/my.kinsta.com\/?lang=fr\">MyKinsta<\/a>.<\/li>\n<li>Autorisez Kinsta avec votre fournisseur Git.<\/li>\n<li>Cliquez sur <strong>Sites statiques<\/strong> dans la colonne lat\u00e9rale gauche, puis sur <strong>Ajouter un site<\/strong>.<\/li>\n<li>S\u00e9lectionnez le d\u00e9p\u00f4t et la branche \u00e0 partir desquels vous souhaitez d\u00e9ployer.<\/li>\n<li>Attribuez un nom unique \u00e0 votre site.<\/li>\n<li>Ajoutez les r\u00e9glages de construction dans le format suivant :\n<ul>\n<li><strong>Commande de construction <\/strong>: npm run build<\/li>\n<li><strong>Version de Node <\/strong>: 18.16.0<\/li>\n<li><strong>R\u00e9pertoire de publication <\/strong>: public<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<ol start=\"7\">\n<li>Enfin, cliquez sur <strong>Cr\u00e9er un site<\/strong>.<\/li>\n<\/ol>\n<p>Et le tour est jou\u00e9 ! Vous disposez maintenant d&rsquo;un site d\u00e9ploy\u00e9 en quelques secondes.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Lorsque vous utilisez le paquet Hugo-bin, vous pouvez \u00e9galement d\u00e9ployer votre site en utilisant notre service d&rsquo;<a href=\"https:\/\/sevalla.com\/application-hosting\/\">h\u00e9bergement d&rsquo;applications<\/a>. Cela peut s&rsquo;av\u00e9rer tr\u00e8s avantageux, car vous b\u00e9n\u00e9ficiez des fonctionnalit\u00e9s avanc\u00e9es disponibles pour notre h\u00e9bergement d&rsquo;applications. Par exemple, l&rsquo;\u00e9volutivit\u00e9, le d\u00e9ploiement personnalis\u00e9 \u00e0 l&rsquo;aide d&rsquo;un fichier Docker et des <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">analyses compl\u00e8tes<\/a> englobant des donn\u00e9es historiques et en temps r\u00e9el.<\/p>\n<\/aside>\n\n<h2>Servir vos fichiers statiques uniquement pour Kinsta<\/h2>\n<p>Enfin, une autre m\u00e9thode pour d\u00e9ployer votre site Hugo sur Kinsta consiste \u00e0 construire votre site localement puis \u00e0 le d\u00e9ployer sur Kinsta. Ce processus g\u00e9n\u00e8re un dossier <strong>public<\/strong> \u00e0 la racine de votre projet. Cependant, le principal inconv\u00e9nient de cette m\u00e9thode est que vous devez construire votre site localement avant chaque d\u00e9ploiement, ce qui peut prendre du temps et \u00eatre moins pratique que d&rsquo;autres m\u00e9thodes qui automatisent le processus de construction du site.<\/p>\n<p>Par d\u00e9faut, le dossier <strong>public<\/strong> est exclu de votre d\u00e9p\u00f4t Git en raison de son inclusion dans votre fichier <strong>.gitignore<\/strong>. Pour l&rsquo;inclure dans votre d\u00e9p\u00f4t et d\u00e9ployer votre site sur Kinsta :<\/p>\n<ol start=\"1\">\n<li>Supprimez le dossier <strong>public<\/strong> de votre fichier <strong>.gitignore<\/strong>.<\/li>\n<li>Suivez les \u00e9tapes de d\u00e9ploiement expliqu\u00e9es ci-dessus.<\/li>\n<li>D\u00e9ployez le d\u00e9p\u00f4t vers Kinsta, en vous assurant que les champs <strong>Commande build<\/strong> et <strong>Version Node<\/strong> restent vides, car votre site est d\u00e9j\u00e0 construit.<\/li>\n<li>Sp\u00e9cifiez le <strong>r\u00e9pertoire de publication<\/strong> comme <code>public<\/code>.<\/li>\n<\/ol>\n<p>Vous pouvez \u00e9galement choisir de ne pousser que les fichiers statiques vers votre d\u00e9p\u00f4t GitHub. Pour cette approche, il n&rsquo;est pas n\u00e9cessaire d&rsquo;initialiser un d\u00e9p\u00f4t Git dans le dossier racine de votre projet. Il vous suffit d&rsquo;ex\u00e9cuter <code>git init<\/code> dans le dossier <strong>public<\/strong>. Cela vous permet de garder le contr\u00f4le de version de vos fichiers statiques s\u00e9par\u00e9 du reste de votre projet.<\/p>\n<p>Dans ce sc\u00e9nario, lorsque vous poussez les fichiers s\u00e9par\u00e9ment sans les placer dans un dossier <strong>public<\/strong>, indiquez le <strong>r\u00e9pertoire de publication<\/strong> comme <code>.<\/code> lors du d\u00e9ploiement vers Kinsta. Cette notation repr\u00e9sente le dossier racine, et Kinsta servira les fichiers en cons\u00e9quence.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Cet article a expliqu\u00e9 trois m\u00e9thodes efficaces pour d\u00e9ployer votre site Hugo gratuitement sur la plateforme d&rsquo;h\u00e9bergement de sites statiques de Kinsta. Vous avez la possibilit\u00e9 de choisir la m\u00e9thode qui correspond le mieux \u00e0 vos besoins sp\u00e9cifiques. De plus, pour des informations approfondies sur la cr\u00e9ation d&rsquo;un site statique rapide comme l&rsquo;\u00e9clair en utilisant Hugo, <a href=\"https:\/\/kinsta.com\/fr\/blog\/hugo-site-statique\/\">lisez notre guide complet<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hugo est un g\u00e9n\u00e9rateur de sites statiques (Static Site Generator ou SSG) open source populaire, con\u00e7u pour aider les d\u00e9veloppeurs \u00e0 cr\u00e9er et \u00e0 g\u00e9rer des &#8230;<\/p>\n","protected":false},"author":287,"featured_media":73843,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[973,1011],"class_list":["post-73842","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-headless-cms","topic-generateurs-sites-statiques"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment d\u00e9ployer gratuitement votre site Hugo sur Kinsta - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Apprenez \u00e0 d\u00e9ployer sans effort votre site Hugo sur l&#039;h\u00e9bergement de site statique de Kinsta gratuitement avec ce guide. R\u00e9duisez vos co\u00fbts d&#039;h\u00e9bergement d\u00e8s aujourd&#039;hui !\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment d\u00e9ployer un site Hugo sur Kinsta gratuitement avec l&#039;h\u00e9bergement de sites statiques\" \/>\n<meta property=\"og:description\" content=\"Apprenez \u00e0 d\u00e9ployer sans effort votre site Hugo sur l&#039;h\u00e9bergement de site statique de Kinsta gratuitement avec ce guide. R\u00e9duisez vos co\u00fbts d&#039;h\u00e9bergement d\u00e8s aujourd&#039;hui !\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-13T07:31:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-14T10:09:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Apprenez \u00e0 d\u00e9ployer sans effort votre site Hugo sur l&#039;h\u00e9bergement de site statique de Kinsta gratuitement avec ce guide. R\u00e9duisez vos co\u00fbts d&#039;h\u00e9bergement d\u00e8s aujourd&#039;hui !\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Comment d\u00e9ployer un site Hugo sur Kinsta gratuitement avec l&rsquo;h\u00e9bergement de sites statiques\",\"datePublished\":\"2023-11-13T07:31:32+00:00\",\"dateModified\":\"2023-11-14T10:09:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/\"},\"wordCount\":2532,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/\",\"name\":\"Comment d\u00e9ployer gratuitement votre site Hugo sur Kinsta - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg\",\"datePublished\":\"2023-11-13T07:31:32+00:00\",\"dateModified\":\"2023-11-14T10:09:04+00:00\",\"description\":\"Apprenez \u00e0 d\u00e9ployer sans effort votre site Hugo sur l'h\u00e9bergement de site statique de Kinsta gratuitement avec ce guide. R\u00e9duisez vos co\u00fbts d'h\u00e9bergement d\u00e8s aujourd'hui !\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"G\u00e9n\u00e9rateurs de sites statiques\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/generateurs-sites-statiques\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment d\u00e9ployer un site Hugo sur Kinsta gratuitement avec l&rsquo;h\u00e9bergement de sites statiques\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment d\u00e9ployer gratuitement votre site Hugo sur Kinsta - Kinsta\u00ae","description":"Apprenez \u00e0 d\u00e9ployer sans effort votre site Hugo sur l'h\u00e9bergement de site statique de Kinsta gratuitement avec ce guide. R\u00e9duisez vos co\u00fbts d'h\u00e9bergement d\u00e8s aujourd'hui !","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment d\u00e9ployer un site Hugo sur Kinsta gratuitement avec l'h\u00e9bergement de sites statiques","og_description":"Apprenez \u00e0 d\u00e9ployer sans effort votre site Hugo sur l'h\u00e9bergement de site statique de Kinsta gratuitement avec ce guide. R\u00e9duisez vos co\u00fbts d'h\u00e9bergement d\u00e8s aujourd'hui !","og_url":"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-11-13T07:31:32+00:00","article_modified_time":"2023-11-14T10:09:04+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Apprenez \u00e0 d\u00e9ployer sans effort votre site Hugo sur l'h\u00e9bergement de site statique de Kinsta gratuitement avec ce guide. R\u00e9duisez vos co\u00fbts d'h\u00e9bergement d\u00e8s aujourd'hui !","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Joel Olawanle","Dur\u00e9e de lecture estim\u00e9e":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Comment d\u00e9ployer un site Hugo sur Kinsta gratuitement avec l&rsquo;h\u00e9bergement de sites statiques","datePublished":"2023-11-13T07:31:32+00:00","dateModified":"2023-11-14T10:09:04+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/"},"wordCount":2532,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/","url":"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/","name":"Comment d\u00e9ployer gratuitement votre site Hugo sur Kinsta - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg","datePublished":"2023-11-13T07:31:32+00:00","dateModified":"2023-11-14T10:09:04+00:00","description":"Apprenez \u00e0 d\u00e9ployer sans effort votre site Hugo sur l'h\u00e9bergement de site statique de Kinsta gratuitement avec ce guide. R\u00e9duisez vos co\u00fbts d'h\u00e9bergement d\u00e8s aujourd'hui !","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/10\/deploy-hugo-site-with-circle-ci-and-kinsta-static-site-hosting.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/deployer-hugo-kinsta-site-statique\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"G\u00e9n\u00e9rateurs de sites statiques","item":"https:\/\/kinsta.com\/fr\/sujets\/generateurs-sites-statiques\/"},{"@type":"ListItem","position":3,"name":"Comment d\u00e9ployer un site Hugo sur Kinsta gratuitement avec l&rsquo;h\u00e9bergement de sites statiques"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/73842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=73842"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/73842\/revisions"}],"predecessor-version":[{"id":73856,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/73842\/revisions\/73856"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/73842\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/73842\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/73842\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/73842\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/73842\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/73842\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/73842\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/73842\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/73843"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=73842"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=73842"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=73842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}