{"id":66647,"date":"2023-02-23T12:16:32","date_gmt":"2023-02-23T11:16:32","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=66647&#038;preview=true&#038;preview_id=66647"},"modified":"2025-09-01T16:41:55","modified_gmt":"2025-09-01T15:41:55","slug":"docusaurus","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/","title":{"rendered":"Cr\u00e9er et personnaliser un site Docusaurus (avec fonction blog)"},"content":{"rendered":"<p>Pour les sites web l\u00e9gers, les applications et autres petits projets, de plus en plus de d\u00e9veloppeurs se tournent vers les <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-vs-html-statique\/\">g\u00e9n\u00e9rateurs de sites statiques plut\u00f4t que vers WordPress<\/a> ou d&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/logiciel-cms\/\">autres syst\u00e8mes de gestion de contenu (CMS)<\/a>. Les sites statiques offrent un moyen simple et efficace de cr\u00e9er des sites web et des applications qui sont rapides, s\u00e9curis\u00e9s et faciles \u00e0 maintenir.<\/p>\n<p>Docusaurus est l&rsquo;un de ces g\u00e9n\u00e9rateurs de sites statiques &#8211; et il gagne rapidement en popularit\u00e9 dans la communaut\u00e9 des d\u00e9veloppeurs.<\/p>\n\n<p>Dans ce billet, nous allons plonger dans les avantages de l&rsquo;utilisation de Docusaurs comme g\u00e9n\u00e9rateur de sites statiques et expliquer pourquoi il est de plus en plus appr\u00e9ci\u00e9 par les d\u00e9veloppeurs.<\/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>Qu&rsquo;est-ce que Docusaurus ?<\/h2>\n<p>Docusaurus est un <a href=\"https:\/\/kinsta.com\/fr\/blog\/generateurs-de-sites-statiques\/\">g\u00e9n\u00e9rateur de sites statiques<\/a> populaire qui utilise <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-react-js\/\">React<\/a>, l&rsquo;une des <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheques-javascript\/\">principales biblioth\u00e8ques JavaScript<\/a>, comme biblioth\u00e8que d&rsquo;interface utilisateur pour la cr\u00e9ation de pages. Comme d&rsquo;autres g\u00e9n\u00e9rateurs de ce type, il est facile \u00e0 configurer et \u00e0 modifier et, surtout, il vous fournit tout ce dont vous avez besoin pour lancer votre site web statique.<\/p>\n<p>Ce qui distingue Docusaurus, cependant, c&rsquo;est qu&rsquo;il vous aide \u00e0 cr\u00e9er et \u00e0 g\u00e9rer un site web o\u00f9 le <em><a href=\"https:\/\/kinsta.com\/fr\/sujets\/strategie-contenu\/\">le contenu joue un r\u00f4le cl\u00e9<\/a><\/em>. Il vous permet de construire rapidement et facilement un site web complet &#8211; avec une fonction de blog &#8211; qui met en valeur votre contenu d\u00e8s le d\u00e9part.<\/p>\n<p>Comme le contenu est au centre des pr\u00e9occupations avec Docusaurus, il est parfait pour cr\u00e9er des sites de documentation comme les <a href=\"https:\/\/kinsta.com\/fr\/blog\/wiki-wordpress\/\">wikis<\/a>. Il utilise \u00e9galement <a href=\"https:\/\/kinsta.com\/fr\/blog\/editeurs-markdown\/\">markdown<\/a>, qui est id\u00e9al \u00e0 la fois pour la collaboration et le stockage dans un d\u00e9p\u00f4t git. De plus, il dispose d&rsquo;une tonne de fonctionnalit\u00e9s \u00e9tonnantes comme l&rsquo;i18n, la recherche et les th\u00e8mes personnalis\u00e9s, dont nous parlerons plus en d\u00e9tail plus tard.<\/p>\n<p>Voici quelques-unes des caract\u00e9ristiques qui font de Docusaurus une option solide :<\/p>\n<ul>\n<li>Construit avec React<\/li>\n<li>Prise en charge de MDX v1<\/li>\n<li>Prise en charge de l&rsquo;int\u00e9gration de composants React via Markdown<\/li>\n<li>Versionnage des documents<\/li>\n<li>Compatibilit\u00e9 avec Git, Crowdin et d&rsquo;autres gestionnaires de traduction pour la traduction de documents et le d\u00e9ploiement en masse ou individuel<\/li>\n<\/ul>\n<h3>Qui utilise Docusaurus ?<\/h3>\n<p>Docusaurus a \u00e9t\u00e9 cr\u00e9\u00e9 par Facebook, il n&rsquo;est donc pas surprenant qu&rsquo;il soit actuellement utilis\u00e9 par de nombreuses grandes marques et entreprises sur le web.<\/p>\n<p>Voici quelques-unes des plus grandes marques qui utilisent Docusaurus aujourd&rsquo;hui (d&rsquo;autres suivront bient\u00f4t, car la popularit\u00e9 de Docusaurus ne cesse de croitre) :<\/p>\n<ul>\n<li><a href=\"https:\/\/docsearch.algolia.com\/\">Algolia DocSearch<\/a><\/li>\n<li><a href=\"https:\/\/jestjs.io\/\">Jest<\/a><\/li>\n<li><a href=\"https:\/\/reactnative.dev\/\">React Native<\/a><\/li>\n<li><a href=\"https:\/\/supabase.com\/docs\">Supabase<\/a><\/li>\n<\/ul>\n<p>Et d&rsquo;autres rejoignent leurs rangs chaque jour.<\/p>\n<h2>Comment installer Docusaurus<\/h2>\n<p>Docusaurus est tr\u00e8s simple \u00e0 installer et ne n\u00e9cessite que quelques minutes. Dans ce tutoriel, nous allons construire un site de documentation avec un blog, et nous allons personnaliser l&rsquo;apparence du site.<\/p>\n<p>Et voici la partie la plus cool : Il nous faudra moins d&rsquo;une heure pour tout mettre en route.<\/p>\n<p>Plongeons-y !<\/p>\n<h3>Exigences<\/h3>\n<p>Docusarus n\u00e9cessite <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-node-js\/\">Node.js<\/a> 16.14 ou plus r\u00e9cent. C&rsquo;est un SSG \u00e0 fichier plat, ce qui signifie que vous n&rsquo;aurez pas besoin d&rsquo;une <a href=\"https:\/\/sevalla.com\/database-hosting\/\">base de donn\u00e9es suppl\u00e9mentaire<\/a>.<\/p>\n<p>Si vous ne disposez pas d\u00e9j\u00e0 de Node.js 16.14+, vous devrez commencer par <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-installer-node-js\/\">installer Node.js<\/a> ou mettre \u00e0 jour votre version actuelle. Vous pourrez ensuite passer au processus d&rsquo;installation de Docusaurus ci-dessous.<\/p>\n<p>Nous allons \u00e9galement utiliser l&rsquo;exemple de site Docusaurus de <a href=\"https:\/\/github.com\/kinsta\/hello-world-docusaurus\">ce d\u00e9p\u00f4t GitHub<\/a>. Vous pouvez l&rsquo;utiliser ou utiliser une installation propre de Docusaurus pour ce tutoriel.<\/p>\n<h3>Processus d&rsquo;installation<\/h3>\n<p>Pour commencer le processus d&rsquo;installation de Docusaurus, vous devez d&rsquo;abord ex\u00e9cuter la commande suivante :<\/p>\n<pre><code class=\"bash\">npx create-docusaurus@latest  classic<\/code><\/pre>\n<p>Cela cr\u00e9era un dossier pour votre projet et \u00e9chafaudera le <a href=\"https:\/\/docusaurus.io\/docs\/api\/themes\/@docusaurus\/theme-classic\">th\u00e8me classique<\/a> \u00e0 l&rsquo;int\u00e9rieur de celui-ci. Le th\u00e8me classique contient d\u00e9j\u00e0 certaines fonctionnalit\u00e9s pr\u00e9-configur\u00e9es comme un blog, des pages personnalis\u00e9es et un framework CSS.<\/p>\n<p>Apr\u00e8s l&rsquo;installation, vous devez ensuite ex\u00e9cuter la commande suivante pour d\u00e9marrer le serveur local :<\/p>\n<pre><code class=\"bash\">npm start<\/code><\/pre>\n<p>Si vous souhaitez cr\u00e9er une version optimis\u00e9e pr\u00eate \u00e0 \u00eatre d\u00e9ploy\u00e9e, vous devez plut\u00f4t ex\u00e9cuter cette commande :<\/p>\n<pre><code class=\"bash\">npm run build<\/code><\/pre>\n<h3>Structure<\/h3>\n<p>Une fois que vous avez install\u00e9 votre instance de Docusaurus, vous pourrez ouvrir votre r\u00e9pertoire de projet et regarder de plus pr\u00e8s le \u00ab squelette \u00bb de votre nouveau site.<\/p>\n<p>Voici \u00e0 quoi ressemble la structure des fichiers :<\/p>\n<pre><code class=\"bash\">my-website\n\u251c\u2500\u2500 blog\n\u2502 \u251c\u2500\u2500 2019-05-28-hola.md\n\u2502 \u2514\u2500\u2500 2020-05-30-welcome.md\n\u251c\u2500\u2500 docs\n\u2502 \u251c\u2500\u2500 doc1.md\n\u2502 \u2514\u2500\u2500 mdx.md\n\u251c\u2500\u2500 src\n\u2502 \u251c\u2500\u2500 css\n\u2502 \u2502 \u2514\u2500\u2500 custom.css\n\u2502 \u2514\u2500\u2500 pages\n\u2502 \u251c\u2500\u2500 styles.module.css\n\u2502 \u2514\u2500\u2500 index.js\n\u251c\u2500\u2500 static\n\u2502 \u2514\u2500\u2500 img\n\u251c\u2500\u2500 docusaurus.config.js\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 README.md\n\u251c\u2500\u2500 sidebars.js\n\u2514\u2500\u2500 yarn.lock<\/code><\/pre>\n<p>Il y a quelques d\u00e9tails \u00e0 noter concernant quelques-uns de ces fichiers et dossiers :<\/p>\n<ul>\n<li><strong><code>\/blog<\/code>:<\/strong> Contient tous les fichiers li\u00e9s \u00e0 votre blog.<\/li>\n<li><strong><code>\/docs<\/code>:<\/strong> Contient tous les fichiers li\u00e9s \u00e0 vos docs. Vous pouvez personnaliser leur ordre dans le fichier <strong>sidebar.js<\/strong>.<\/li>\n<li><strong><code>\/src<\/code>:<\/strong> Contient tous les fichiers non-documentaires comme les pages ou les composants personnalis\u00e9s.<\/li>\n<li><strong><code>\/src\/pages<\/code>:<\/strong> Tous les fichiers JSX\/TSX\/MDX seront transform\u00e9s en pages.<\/li>\n<li><strong><code>\/static<\/code>:<\/strong> Les fichiers statiques qui seront copi\u00e9s dans le dossier de construction final.<\/li>\n<li><strong><code>docusaurus.config.js<\/code>:<\/strong> Le fichier de configuration de Docusaurus.<\/li>\n<li><strong><code>packaged.json<\/code>:<\/strong> Chaque site Docusaurus est une application React, donc vous trouverez ici toutes les d\u00e9pendances et les scripts qu&rsquo;il utilise pour React.<\/li>\n<li><strong><code>sidebar.js<\/code>:<\/strong> Ici, vous pouvez sp\u00e9cifier l&rsquo;ordre des documents dans la barre lat\u00e9rale.<\/li>\n<\/ul>\n<h2>Personnalisation de votre installation Docusaurus<\/h2>\n<p>Comme vous pouvez le constater par la simplicit\u00e9 de sa structure de fichiers, Docusaurus est facile \u00e0 utiliser et \u00e0 naviguer. De m\u00eame, la personnalisation de votre site Docusaurus est un jeu d&rsquo;enfant. Vous pouvez ouvrir et modifier ces fichiers \u00e0 l&rsquo;aide de votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-editeurs-de-texte\/\">\u00e9diteur de texte<\/a> ou IDE pr\u00e9f\u00e9r\u00e9.<\/p>\n<p>Passons en revue quelques-unes des options de personnalisation dont vous disposerez d\u00e8s la sortie de l&#8217;emballage.<\/p>\n<h3>Page d&rsquo;accueil<\/h3>\n<p>La premi\u00e8re chose qui vous d\u00e9mangera probablement sera de personnaliser la page d&rsquo;accueil par d\u00e9faut pour exposer votre propre projet. Heureusement, il n&rsquo;est pas compliqu\u00e9 d&rsquo;apporter les modifications que vous souhaitez \u00e0 la page d&rsquo;accueil de Docusaurus.<\/p>\n<p>Pour modifier la page d&rsquo;accueil, ouvrez le fichier <strong>src\/pages\/index.js<\/strong> et effectuez les ajustements directement \u00e0 l&rsquo;int\u00e9rieur. Il s&rsquo;agit d&rsquo;une page React typique, vous pouvez donc la modifier ou la reconstruire en changeant le contenu ou en cr\u00e9ant des <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheque-composants-react-ui\/\">composants React<\/a> personnalis\u00e9s.<\/p>\n<h3>Fichier de configuration<\/h3>\n<p>Ensuite, nous allons nous plonger dans le fichier crucial <strong>docusaurus.config.js<\/strong> et modifier certains d\u00e9tails importants pour notre instance.<\/p>\n<h4>Nom et description<\/h4>\n<p>Dans le fichier de configuration, vous trouverez :<\/p>\n<pre><code class=\"language-markdown\">const config = {\ntitle: 'My Site',\ntagline: 'Dinosaurs are cool',\nurl: 'https:\/\/your-docusaurus-site.com',\nbaseUrl: '\/',<\/code><\/pre>\n<p>Modifiez simplement ces d\u00e9tails pour les adapter aux besoins de votre site, puis enregistrez le fichier.<\/p>\n<h4>Barre de navigation<\/h4>\n<p>Pour modifier votre barre de navigation, localisez l&rsquo;\u00e9l\u00e9ment <code>navbar<\/code>.<\/p>\n<p>Pour notre exemple ici, nous voulons ajouter un lien vers Kinsta, renommer l&rsquo;\u00e9l\u00e9ment \u00ab Tutorial \u00bb en \u00ab Starter documentation \u00bb, et ajouter le logo Kinsta.<\/p>\n<p>Voici comment nous proc\u00e8derions :<\/p>\n<pre><code class=\"language-markdown\">navbar: {\n  title: 'Kinsta starters',\n  logo: {  \n    alt: 'Kinsta Logo',\n    src: 'img\/kinsta-logo-alpha-purple.png',\n  },\n  items: [\n    {\n      label: 'Kinsta starters',\n      to: '\/docs\/intro',\n    },\n    {to: '\/blog', label: 'Blog', position: 'left'},\n    {\n      href: 'https:\/\/github.com\/kinsta',\n      label: 'GitHub',\n      position: 'right',\n    },\n  ],\n},<\/code><\/pre>\n<h4>Pied de page<\/h4>\n<p>La personnalisation du pied de page dans Docusaurus se compose de deux sections : le contenu du pied de page lui-m\u00eame, et les liens du pied de page.<\/p>\n<h5>Contenu du pied de page<\/h5>\n<p>L&rsquo;essentiel du contenu de votre pied de page (hors liste de liens) peut \u00eatre plac\u00e9 dans votre fichier <strong>themeConfig.footer<\/strong>. C&rsquo;est l&rsquo;endroit id\u00e9al pour ajouter un logo et un avis de copyright.<\/p>\n<p>Voici comment nous avons modifi\u00e9 la configuration de notre pied de page :<\/p>\n<pre><code class=\"language-markdown\">module.exports = {\n  themeConfig: {\n    footer: {\n      logo: {\n        alt: 'Kinsta Logo',\n        src: 'img\/kinsta-logo.png',\n        href: 'https:\/\/kinsta.com',\n        width: 160,\n        height: 51,\n      },\n      copyright: `Copyright \u00a9 ${new Date().getFullYear()} Kinsta. Built with Docusaurus.`,\n    },\n  },\n};<\/code><\/pre>\n<h5>Liens de pied de page<\/h5>\n<p>La modification des liens du pied de page est similaire \u00e0 celle de la barre de navigation sup\u00e9rieure : Trouvez la section <code>footer<\/code> dans <strong>docusaurus.config.js<\/strong> et modifiez-la jusqu&rsquo;\u00e0 ce qu&rsquo;elle corresponde \u00e0 vos besoins.<\/p>\n<p>Voici \u00e0 quoi ressemble la section <code>footer<\/code> que nous avons modifi\u00e9e :<\/p>\n<pre><code class=\"language-markdown\">footer: {\n  style: 'dark',\n  links: [\n    {\n      title: 'Docs',\n      items: [\n        {\n          label: 'Kinsta starters',\n          to: '\/docs\/intro',\n        },\n      ],\n    },\n    {\n      title: 'Talk with us',\n      items: [\n        {\n          label: 'Discord',\n          href: 'https:\/\/discord.gg\/vjRPMhFaBA',\n        },\n        {\n          label: 'Support',\n          href: 'https:\/\/kinsta.com\/kinsta-support\/',\n        },\n        {\n          label: 'Twitter',\n          href: 'https:\/\/twitter.com\/kinsta',\n        },\n      ],\n    },\n    {\n      title: 'More',\n      items: [\n        {\n          label: 'Application Hosting',\n          href: 'https:\/\/sevalla.com\/application-hosting\/',\n        },\n        {\n          label: 'Database Hosting',\n          href: 'https:\/\/sevalla.com\/database-hosting\/',\n        },\n        {\n          label: 'WordPress Hosting',\n          href: 'https:\/\/kinsta.com\/wordpress-hosting\/',\n        },\n        {\n          label: 'DevKinsta',\n          href: 'https:\/\/kinsta.com\/devkinsta\/',\n        },\n      ],\n    },\n  ],\n};<\/code><\/pre>\n<h4>Couleurs et CSS<\/h4>\n<p>Le pr\u00e9r\u00e9glage classique de Docusaurus utilise le framework CSS Infima. Dans cette optique, les cr\u00e9ateurs de Docusaurus ont cr\u00e9\u00e9 un <a href=\"https:\/\/docusaurus.io\/docs\/styling-layout#styling-your-site-with-infima\">outil web tr\u00e8s utile<\/a> pour vous aider \u00e0 modifier les couleurs et autres \u00e9l\u00e9ments et d\u00e9clarations CSS.<\/p>\n<p>Une fois que vous aurez saisi vos pr\u00e9f\u00e9rences sur la page, l&rsquo;outil g\u00e9n\u00e8rera un fichier <strong>.css personnalis\u00e9<\/strong> &#8211; complet avec une belle suite de tons compl\u00e9mentaires &#8211; en quelques secondes. Vous pouvez ensuite copier ce nouveau fichier CSS dans le r\u00e9pertoire <strong>\/src\/css<\/strong> de votre projet \u00e0 titre de r\u00e9f\u00e9rence.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/docusaurus-css-tool.jpg\" alt=\"Une partie de la documentation officielle de Docusaurus, pr\u00e9sentant leur outil CSS personnalis\u00e9 avec des champs pour entrer des ajustements de code hexad\u00e9cimal pour chaque \u00e9l\u00e9ment individuel du design de Docusaurus.\" width=\"1600\" height=\"871\"><figcaption class=\"wp-caption-text\">Une partie de la documentation officielle de Docusaurus, pr\u00e9sentant leur outil CSS personnalis\u00e9 avec des champs pour entrer des ajustements de code hexad\u00e9cimal pour chaque \u00e9l\u00e9ment individuel du design de Docusaurus.<\/figcaption><\/figure>\n<h4>Documentation<\/h4>\n<p>Toute la documentation de votre nouveau site web est stock\u00e9e dans le dossier <strong>\/docs<\/strong>. Bien entendu, vous pouvez modifier le nom du dossier dans <strong>docusaurus.config.js<\/strong>.<\/p>\n<p>Cr\u00e9ez simplement les fichiers markdown dans votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/editeurs-html-gratuits\/\">\u00e9diteur de texte ou HTML<\/a> et d\u00e9posez-les dans ce dossier. Chaque fichier devrait ressembler \u00e0 ceci :<\/p>\n<pre><code class=\"language-markdown\">---\nid: the-id\ntitle: Title\n---\n# Rest of the document<\/code><\/pre>\n<p>Sur la base de l&rsquo;ID, Docusaurus construit les URL des articles de ce sous-dossier : <code>yourdomain.com\/docs\/{id}<\/code><\/p>\n<p>Nous pouvons \u00e9galement cr\u00e9er des sous-dossiers si nous voulons diviser notre documentation en diff\u00e9rentes sections logiques. Cependant, nous devrons effectuer un peu de travail suppl\u00e9mentaire pour que ces sous-r\u00e9pertoires fonctionnent comme nous l&rsquo;attendons.<\/p>\n<p>Supposons que nous cr\u00e9ions un nouveau dossier de documents appel\u00e9 \u00ab Starters \u00bb Si nous devions ensuite rafraichir la page d&rsquo;accueil et cliquer sur le nouveau lien <strong>Starters<\/strong>\u00a0automatiquement ajout\u00e9 \u00e0 notre colonne lat\u00e9rale, nous obtiendrions une erreur &#8211; car il n&rsquo;y a pas encore de page d&rsquo;index dans notre nouveau dossier.<\/p>\n<p>La fa\u00e7on la plus simple de r\u00e9soudre ce probl\u00e8me est de cr\u00e9er un fichier <strong>_category_.json<\/strong> qui g\u00e9n\u00e9rera l&rsquo;index de toutes les pages stock\u00e9es dans ce dossier. Il vous suffit d&rsquo;ajouter le code suivant :<\/p>\n<pre><code class=\"language-markdown\">{\n  \"label\": \"Starters\",\n  \"position\": 2,\n  \"link\": {\n    \"type\": \"generated-index\",\n    \"description\": \"All Kinsta Starters\"\n  },\n};<\/code><\/pre>\n<p>Comme vous pouvez le voir, la colonne lat\u00e9rale se r\u00e9g\u00e9n\u00e8re pour correspondre \u00e0 la structure de vos fichiers. C&rsquo;est parce que le fichier <strong>sidebar.js<\/strong> contient ce <code>tutorialSidebar<\/code>: <code>[{type: 'autogenerated', dirName: '.'}],<\/code><\/p>\n<p>Si vous pr\u00e9f\u00e9rez vous occuper de cela vous-m\u00eame, vous pouvez simplement changer ceci en quelque chose comme ceci :<\/p>\n<pre><code class=\"language-markdown\">tutorialSidebar: [\n  'intro',\n  'hello',\n  {\n    type: 'category',\n    label: 'Tutorial',\n    items: ['tutorial-basics\/create-a-document'],\n  },\n],<\/code><\/pre>\n<h4>Blog<\/h4>\n<p>Docusaurus comprend un module de blog tr\u00e8s pratique. Disposer d&rsquo;un blog \u00e0 c\u00f4t\u00e9 de votre site web principal peut s&rsquo;av\u00e9rer tr\u00e8s utile pour informer votre base d&rsquo;utilisateurs des changements survenus dans votre projet, ou pour conserver des notes sur le projet sous forme de journal des modifications.<\/p>\n<p>Chaque article se compose d&rsquo;une partie frontmatter, comme ceci :<\/p>\n<pre><code class=\"language-markdown\">---\nslug: docusaurus-starter\ntitle: Docusaurus Starter\nauthors: palmiak\ntags: [starters, docusaurus]\n---<\/code><\/pre>\n<p>&#8230;et, bien s\u00fbr, le contenu lui-m\u00eame. Il dispose \u00e9galement d&rsquo;une balise tr\u00e8s utile, qui permet de limiter le r\u00e9sum\u00e9 de l&rsquo;article affich\u00e9 sur toutes les listes d&rsquo;articles.<\/p>\n<p>C&rsquo;est aussi une bonne id\u00e9e de cr\u00e9er un fichier <strong>authors.yml<\/strong> pour les cr\u00e9dits. Ce fichier ressemble \u00e0 ceci :<\/p>\n<pre><code class=\"language-markdown\">palmiak:\nname: Maciek Palmowski\ntitle: DevRel\nurl: https:\/\/github.com\/palmiak\nimage_url: https:\/\/github.com\/palmiak.png<\/code><\/pre>\n<p>Gr\u00e2ce \u00e0 ce fichier, vous aurez toutes les donn\u00e9es de l&rsquo;auteur en un seul endroit pour une r\u00e9f\u00e9rence facile.<\/p>\n<h2>Comment d\u00e9ployer votre site Docusaurus sur Kinsta<\/h2>\n<p>En plus des <a href=\"https:\/\/kinsta.com\/fr\/hebergement-wordpress\/\">sites WordPress<\/a>, des <a href=\"https:\/\/sevalla.com\/application-hosting\/\">applications<\/a> autonomes et des <a href=\"https:\/\/sevalla.com\/database-hosting\/\">bases de donn\u00e9es<\/a>, <a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\">Kinsta peut h\u00e9berger des sites statiques<\/a>.<\/p>\n<p>Cela signifie qu&rsquo;il est parfait pour vos sites Docusaurs &#8211; et pour g\u00e9rer tous vos projets web &#8211; directement depuis votre tableau de bord MyKinsta.<\/p>\n<p>Assurez-vous d&rsquo;abord de pousser votre code vers un fournisseur Git pr\u00e9f\u00e9r\u00e9 (<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>), puis suivez les \u00e9tapes ci-dessous pour d\u00e9ployer votre site statique sur Kinsta :<\/p>\n<ol>\n<li style=\"list-style-type: none\">\n<ol>\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> dans la colonne lat\u00e9rale de 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 effectuer le d\u00e9ploiement.<\/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> <code>npm run build<\/code><\/li>\n<li><strong>Version de Node :<\/strong> <code>18.16.0<\/code><\/li>\n<li><strong>R\u00e9pertoire de publication :<\/strong> <code>build<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Enfin, cliquez sur <strong>Cr\u00e9er un site<\/strong>.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>Si vous \u00eates arriv\u00e9 jusqu&rsquo;ici sans erreur, alors f\u00e9licitations &#8211; vous venez de <a href=\"https:\/\/docs.sevalla.com\/templates\/overview\">d\u00e9ployer <\/a><a href=\"https:\/\/docs.sevalla.com\/templates\/overview\">votre site Docusaurus via Kinsta<\/a>!<\/p>\n<p>Voici un premier aper\u00e7u de notre site d&rsquo;exemple sur Kinsta :<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/deployed-docusaurus-site.png\" alt=\"La page d'accueil d\u00e9ploy\u00e9e de Docusaurus, en haut de laquelle se trouve une banni\u00e8re verte avec le titre \"Mon site\" et le slogan \"Les dinosaures sont cool\" en texte blanc.\" width=\"1600\" height=\"777\"><figcaption class=\"wp-caption-text\">La page d&rsquo;accueil d\u00e9ploy\u00e9e de Docusaurus, en haut de laquelle se trouve une banni\u00e8re verte avec le titre \u00ab\u00a0Mon site\u00a0\u00bb et le slogan \u00ab\u00a0Les dinosaures sont cool\u00a0\u00bb en texte blanc.<\/figcaption><\/figure>\n<p>Comme alternative \u00e0 l&rsquo;h\u00e9bergement de sites statiques, vous pouvez opter pour le d\u00e9ploiement de votre site statique avec l&rsquo;<a href=\"https:\/\/sevalla.com\/application-hosting\/\">h\u00e9bergement d&rsquo;applications<\/a> de Kinsta, qui fournit une plus grande flexibilit\u00e9 d&rsquo;h\u00e9bergement, un plus large \u00e9ventail d&rsquo;avantages et l&rsquo;acc\u00e8s \u00e0 des fonctionnalit\u00e9s plus robustes. 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\">statistiques compl\u00e8tes<\/a> englobant des donn\u00e9es en temps r\u00e9el et historiques.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Avec ses fonctionnalit\u00e9s \u00e9tonnamment puissantes, son <a href=\"https:\/\/kinsta.com\/fr\/blog\/principes-conception-web\/\">design convivial<\/a>, sa navigation intuitive et l&rsquo;accent mis sur le contenu, il n&rsquo;est pas difficile de comprendre pourquoi Docusaurus est consid\u00e9r\u00e9 comme un excellent outil pour tout d\u00e9veloppeur cherchant \u00e0 d\u00e9ployer et \u00e0 maintenir facilement un site et\/ou un blog de documentation statique rationalis\u00e9 et bien organis\u00e9.<\/p>\n\n<p>Une fois que vous aurez rempli votre site de contenu que vos visiteurs appr\u00e9cieront, vous commencerez \u00e0 prendre note des fonctions int\u00e9gr\u00e9es suppl\u00e9mentaires qui s&rsquo;av\u00e8rent pratiques. Par exemple, les capacit\u00e9s d&rsquo;optimisation des moteurs de recherche de Docusaurus sont parfaites pour vous aider \u00e0 obtenir une meilleure visibilit\u00e9 aupr\u00e8s d&rsquo;un public plus large pendant que vous travaillez sur d&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/seo-wordpress\/\">autres techniques pour progresser dans les classements SEO<\/a>.<\/p>\n<p><em>Avez-vous construit quelque chose avec Docusaurus ? Partagez vos projets et votre exp\u00e9rience avec nous dans la section des commentaires ci-dessous.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pour les sites web l\u00e9gers, les applications et autres petits projets, de plus en plus de d\u00e9veloppeurs se tournent vers les g\u00e9n\u00e9rateurs de sites statiques plut\u00f4t &#8230;<\/p>\n","protected":false},"author":283,"featured_media":66648,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1004,980],"class_list":["post-66647","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react","topic-tutoriel-javascript"],"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>Cr\u00e9er et personnaliser un site Docusaurus (avec fonction blog)<\/title>\n<meta name=\"description\" content=\"Vous avez besoin d&#039;un site et d&#039;un blog faciles \u00e0 d\u00e9ployer et ax\u00e9s sur le contenu ? Apprenez \u00e0 cr\u00e9er et \u00e0 d\u00e9ployer un site Docusaurus en quelques minutes en suivant ce tutoriel.\" \/>\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\/docusaurus\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cr\u00e9er et personnaliser un site Docusaurus (avec fonction blog)\" \/>\n<meta property=\"og:description\" content=\"Vous avez besoin d&#039;un site et d&#039;un blog faciles \u00e0 d\u00e9ployer et ax\u00e9s sur le contenu ? Apprenez \u00e0 cr\u00e9er et \u00e0 d\u00e9ployer un site Docusaurus en quelques minutes en suivant ce tutoriel.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/\" \/>\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-02-23T11:16:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-01T15:41:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/docusarus.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3042\" \/>\n\t<meta property=\"og:image:height\" content=\"1521\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Maciek Palmowski\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Vous avez besoin d&#039;un site et d&#039;un blog faciles \u00e0 d\u00e9ployer et ax\u00e9s sur le contenu ? Apprenez \u00e0 cr\u00e9er et \u00e0 d\u00e9ployer un site Docusaurus en quelques minutes en suivant ce tutoriel.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/docusarus.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Maciek Palmowski\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/\"},\"author\":{\"name\":\"Maciek Palmowski\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072\"},\"headline\":\"Cr\u00e9er et personnaliser un site Docusaurus (avec fonction blog)\",\"datePublished\":\"2023-02-23T11:16:32+00:00\",\"dateModified\":\"2025-09-01T15:41:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/\"},\"wordCount\":2398,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/docusarus.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/\",\"name\":\"Cr\u00e9er et personnaliser un site Docusaurus (avec fonction blog)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/docusarus.jpg\",\"datePublished\":\"2023-02-23T11:16:32+00:00\",\"dateModified\":\"2025-09-01T15:41:55+00:00\",\"description\":\"Vous avez besoin d'un site et d'un blog faciles \u00e0 d\u00e9ployer et ax\u00e9s sur le contenu ? Apprenez \u00e0 cr\u00e9er et \u00e0 d\u00e9ployer un site Docusaurus en quelques minutes en suivant ce tutoriel.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/docusarus.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/docusarus.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutoriels JavaScript\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/tutoriel-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Cr\u00e9er et personnaliser un site Docusaurus (avec fonction blog)\"}]},{\"@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\/0cf8d8dc768875c83e582e95abbdd072\",\"name\":\"Maciek Palmowski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g\",\"caption\":\"Maciek Palmowski\"},\"description\":\"Maciek is a web developer working at Kinsta as a Development Advocate Analyst. After hours, he spends most of his time coding, trying to find interesting news for his newsletters, or drinking coffee.\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/maciekpalmowski\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Cr\u00e9er et personnaliser un site Docusaurus (avec fonction blog)","description":"Vous avez besoin d'un site et d'un blog faciles \u00e0 d\u00e9ployer et ax\u00e9s sur le contenu ? Apprenez \u00e0 cr\u00e9er et \u00e0 d\u00e9ployer un site Docusaurus en quelques minutes en suivant ce tutoriel.","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\/docusaurus\/","og_locale":"fr_FR","og_type":"article","og_title":"Cr\u00e9er et personnaliser un site Docusaurus (avec fonction blog)","og_description":"Vous avez besoin d'un site et d'un blog faciles \u00e0 d\u00e9ployer et ax\u00e9s sur le contenu ? Apprenez \u00e0 cr\u00e9er et \u00e0 d\u00e9ployer un site Docusaurus en quelques minutes en suivant ce tutoriel.","og_url":"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-02-23T11:16:32+00:00","article_modified_time":"2025-09-01T15:41:55+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/docusarus.jpg","type":"image\/jpeg"}],"author":"Maciek Palmowski","twitter_card":"summary_large_image","twitter_description":"Vous avez besoin d'un site et d'un blog faciles \u00e0 d\u00e9ployer et ax\u00e9s sur le contenu ? Apprenez \u00e0 cr\u00e9er et \u00e0 d\u00e9ployer un site Docusaurus en quelques minutes en suivant ce tutoriel.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/docusarus.jpg","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Maciek Palmowski","Dur\u00e9e de lecture estim\u00e9e":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/"},"author":{"name":"Maciek Palmowski","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072"},"headline":"Cr\u00e9er et personnaliser un site Docusaurus (avec fonction blog)","datePublished":"2023-02-23T11:16:32+00:00","dateModified":"2025-09-01T15:41:55+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/"},"wordCount":2398,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/docusarus.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/docusaurus\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/","url":"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/","name":"Cr\u00e9er et personnaliser un site Docusaurus (avec fonction blog)","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/docusarus.jpg","datePublished":"2023-02-23T11:16:32+00:00","dateModified":"2025-09-01T15:41:55+00:00","description":"Vous avez besoin d'un site et d'un blog faciles \u00e0 d\u00e9ployer et ax\u00e9s sur le contenu ? Apprenez \u00e0 cr\u00e9er et \u00e0 d\u00e9ployer un site Docusaurus en quelques minutes en suivant ce tutoriel.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/docusaurus\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/docusarus.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/docusarus.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/docusaurus\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Tutoriels JavaScript","item":"https:\/\/kinsta.com\/fr\/sujets\/tutoriel-javascript\/"},{"@type":"ListItem","position":3,"name":"Cr\u00e9er et personnaliser un site Docusaurus (avec fonction blog)"}]},{"@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\/0cf8d8dc768875c83e582e95abbdd072","name":"Maciek Palmowski","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g","caption":"Maciek Palmowski"},"description":"Maciek is a web developer working at Kinsta as a Development Advocate Analyst. After hours, he spends most of his time coding, trying to find interesting news for his newsletters, or drinking coffee.","url":"https:\/\/kinsta.com\/fr\/blog\/author\/maciekpalmowski\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/66647","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\/283"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=66647"}],"version-history":[{"count":16,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/66647\/revisions"}],"predecessor-version":[{"id":80701,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/66647\/revisions\/80701"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66647\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66647\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66647\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66647\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66647\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66647\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66647\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66647\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66647\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66647\/translations\/dk"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66647\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/66648"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=66647"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=66647"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=66647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}