{"id":7963,"date":"2024-03-04T08:02:56","date_gmt":"2024-03-04T08:02:56","guid":{"rendered":"https:\/\/www.webhi.com\/how-to\/?p=7963"},"modified":"2024-03-04T08:02:59","modified_gmt":"2024-03-04T08:02:59","slug":"comment-installer-docusaurus-linux","status":"publish","type":"post","link":"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/","title":{"rendered":"Comment installer Docusaurus sur linux"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/www.webhi.com\/how-to\/gilrogre\/2024\/02\/docusaurus_install_fr.jpg\" alt=\"Installation et configuration du g\u00e9n\u00e9rateur de site statique Docusaurus\" class=\"wp-image-7981\" srcset=\"https:\/\/www.webhi.com\/how-to\/gilrogre\/2024\/02\/docusaurus_install_fr.jpg 1200w, https:\/\/www.webhi.com\/how-to\/gilrogre\/2024\/02\/docusaurus_install_fr-300x169.jpg 300w, https:\/\/www.webhi.com\/how-to\/gilrogre\/2024\/02\/docusaurus_install_fr-1024x576.jpg 1024w, https:\/\/www.webhi.com\/how-to\/gilrogre\/2024\/02\/docusaurus_install_fr-768x432.jpg 768w, https:\/\/www.webhi.com\/how-to\/gilrogre\/2024\/02\/docusaurus_install_fr-150x84.jpg 150w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p><strong>Docusaurus <\/strong>est un g\u00e9n\u00e9rateur de site statique moderne optimis\u00e9 pour cr\u00e9er des sites web de documentation. Il fournit une excellente exp\u00e9rience de documentation pr\u00eate \u00e0 l&#8217;emploi avec des fonctionnalit\u00e9s comme la recherche, le versionnage, l&#8217;i18n, etc. Dans ce tutoriel complet, nous allons passer \u00e9tape par \u00e9tape comment installer Docusaurus sur votre syst\u00e8me.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"pr%C3%A9requis\">Pr\u00e9requis<\/h2>\n\n\n\n<p>Avant d&#8217;installer Docusaurus, vous devez avoir install\u00e9 les logiciels pr\u00e9requis suivants :<\/p>\n\n\n\n<ul>\n<li>Node.js (&gt;=12.13.0,&lt;13.0.0 || &gt;=14.15.0)<\/li>\n\n\n\n<li>Yarn ou NPM<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"nodejs\">Node.js<\/h3>\n\n\n\n<p>Docusaurus est construit avec React et n\u00e9cessite Node.js pour fonctionner.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ node -v<\/code><\/pre>\n\n\n\n<p>Cela imprimera la version install\u00e9e de Node. Si elle est inf\u00e9rieure \u00e0 12.13.0 ou entre 13.0.0 et 14.15.0, vous devez mettre \u00e0 niveau Node.js sur votre syst\u00e8me.<\/p>\n\n\n\n<p>Pour installer Node.js, acc\u00e9dez au&nbsp;<a href=\"https:\/\/nodejs.org\/en\/download\/\" target=\"_blank\" rel=\"noreferrer noopener\">site web officiel de Node.js<\/a>&nbsp;et t\u00e9l\u00e9chargez le programme d&#8217;installation pour votre syst\u00e8me d&#8217;exploitation. Suivez les invites pour installer Node.js.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"yarn-ou-npm\">Yarn ou NPM<\/h3>\n\n\n\n<p>Docusaurus utilise un gestionnaire de paquets comme Yarn ou NPM pour g\u00e9rer ses d\u00e9pendances. Vous devez avoir Yarn ou NPM install\u00e9.<\/p>\n\n\n\n<p>Pour v\u00e9rifier si vous avez Yarn install\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ yarn --version<\/code><\/pre>\n\n\n\n<p>Si Yarn n&#8217;est pas install\u00e9, vous pouvez l&#8217;installer via npm :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ npm install --global yarn<\/code><\/pre>\n\n\n\n<p>Pour v\u00e9rifier si vous avez NPM install\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ npm --version<\/code><\/pre>\n\n\n\n<p>NPM est g\u00e9n\u00e9ralement fourni avec l&#8217;installation de Node.js. Si vous ne l&#8217;avez pas, vous pouvez installer NPM \u00e0 partir du&nbsp;<a href=\"https:\/\/www.npmjs.com\/get-npm\" target=\"_blank\" rel=\"noreferrer noopener\">site web officiel<\/a>.<\/p>\n\n\n\n<p>Une fois que vous avez v\u00e9rifi\u00e9 les pr\u00e9requis, nous pouvons passer \u00e0 l&#8217;installation de Docusaurus.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"installation-de-docusaurus\">Installation de Docusaurus<\/h2>\n\n\n\n<p>Il existe deux fa\u00e7ons principales d&#8217;installer Docusaurus &#8211; en utilisant le mod\u00e8le classique ou en utilisant une seule commande. Nous couvrirons les deux m\u00e9thodes dans cette section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-utilisation-du-mod%C3%A8le-classique\">1. Utilisation du mod\u00e8le classique<\/h3>\n\n\n\n<p>Le mod\u00e8le classique fournit un squelette de projet pour vous permettre de d\u00e9marrer rapidement avec un exemple de contenu. C&#8217;est l&#8217;approche recommand\u00e9e si vous d\u00e9butez avec Docusaurus.<\/p>\n\n\n\n<p>Pour installer Docusaurus \u00e0 l&#8217;aide du mod\u00e8le classique :<\/p>\n\n\n\n<ol>\n<li>Cr\u00e9ez un nouveau r\u00e9pertoire pour votre site Docusaurus :<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ mkdir mon-site-web\n$ cd mon-site-web<\/code><\/pre>\n\n\n\n<ol start=\"2\">\n<li>Ex\u00e9cutez le script d&#8217;installation Docusaurus avec npx :<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ npx @docusaurus\/init@latest init --template classic<\/code><\/pre>\n\n\n\n<p>Cela installera toutes les d\u00e9pendances et cr\u00e9era une structure de projet initiale avec de la documentation exemple, un blog et des pages personnalis\u00e9es.<\/p>\n\n\n\n<ol start=\"3\">\n<li>D\u00e9marrez le serveur de d\u00e9veloppement Docusaurus :<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ cd mon-site-web\n$ npm start<\/code><\/pre>\n\n\n\n<p>Le site web s&#8217;ouvrira sur&nbsp;<a href=\"http:\/\/localhost:3000\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/localhost:3000\/<\/a>&nbsp;o\u00f9 vous pourrez commencer \u00e0 ajouter du contenu.<\/p>\n\n\n\n<p>C&#8217;est tout ! Docusaurus est maintenant install\u00e9 et ex\u00e9cut\u00e9 \u00e0 l&#8217;aide du mod\u00e8le classique.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-utilisation-dune-seule-commande\">2. Utilisation d&#8217;une seule commande<\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement \u00e9chafauder un site Docusaurus nu en utilisant une seule commande npx :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ npx @docusaurus\/init@latest init<\/code><\/pre>\n\n\n\n<p>Cela installe Docusaurus et cr\u00e9e une structure de projet minimale sans aucune documentation ou contenu d&#8217;exemple.<\/p>\n\n\n\n<p>Pour d\u00e9marrer le serveur de d\u00e9veloppement :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ cd mon-site-web  \n$ npm start<\/code><\/pre>\n\n\n\n<p>Cette approche vous donne une page blanche pour construire votre site de documentation comme vous le souhaitez. Mais vous devrez ajouter la documentation, le blog, les pages personnalis\u00e9es, etc. vous-m\u00eame.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"structure-du-projet\">Structure du projet<\/h2>\n\n\n\n<p>Une fois Docusaurus install\u00e9, vous verrez une structure de dossiers g\u00e9n\u00e9r\u00e9e comme celle-ci :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">mon-site-web\n\u251c\u2500\u2500 blog\n\u251c\u2500\u2500 docs\n\u251c\u2500\u2500 src\n\u2502   \u251c\u2500\u2500 css\n\u2502   \u2514\u2500\u2500 pages\n\u251c\u2500\u2500 static  \n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 sidebars.js\n\u251c\u2500\u2500 docusaurus.config.js\n\u2514\u2500\u2500 .gitignore<\/code><\/pre>\n\n\n\n<p>Voici \u00e0 quoi servent chacun de ces dossiers et fichiers :<\/p>\n\n\n\n<ul>\n<li><code>\/blog<\/code>&nbsp;&#8211; Contient les articles de blog qui appara\u00eetront dans la section blog.<\/li>\n\n\n\n<li><code>\/docs<\/code>&nbsp;&#8211; Contient les fichiers Markdown pour la documentation qui appara\u00eetra dans la section docs.<\/li>\n\n\n\n<li><code>\/src<\/code>&nbsp;&#8211; Contient les composants React, les fichiers CSS, les pages statiques et autre code source.<\/li>\n\n\n\n<li><code>\/src\/css<\/code>&nbsp;&#8211; Fichiers CSS pour le style du site.<\/li>\n\n\n\n<li><code>\/src\/pages<\/code>&nbsp;&#8211; Pages statiques comme la page d&#8217;accueil, \u00e0 propos, contact, etc.<\/li>\n\n\n\n<li><code>\/static<\/code>&nbsp;&#8211; Les assets statiques comme images, pdfs, etc. vont ici.<\/li>\n\n\n\n<li><code>package.json<\/code>&nbsp;&#8211; Les d\u00e9pendances NPM et les scripts pour le d\u00e9veloppement.<\/li>\n\n\n\n<li><code>sidebars.js<\/code>&nbsp;&#8211; Configuration pour la navigation lat\u00e9rale gauche.<\/li>\n\n\n\n<li><code>docusaurus.config.js<\/code>&nbsp;&#8211; Fichier de configuration principal du site.<\/li>\n\n\n\n<li><code>.gitignore<\/code>&nbsp;&#8211; Indique \u00e0 git quels fichiers ne pas suivre.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"lancer-le-serveur-de-d%C3%A9veloppement\">Lancer le serveur de d\u00e9veloppement<\/h2>\n\n\n\n<p>Pour pr\u00e9visualiser votre site localement, vous pouvez ex\u00e9cuter le serveur de d\u00e9veloppement Docusaurus :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ npm start<\/code><\/pre>\n\n\n\n<p>Cela d\u00e9marrera le serveur de d\u00e9veloppement sur&nbsp;<a href=\"http:\/\/localhost:3000\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/localhost:3000\/<\/a>&nbsp;et reconstruira le site web au fur et \u00e0 mesure que vous apportez des modifications.<\/p>\n\n\n\n<p>La fonctionnalit\u00e9 de rechargement \u00e0 chaud actualisera automatiquement la page lorsque vous modifiez les fichiers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"configuration-de-docusaurus\">Configuration de Docusaurus<\/h2>\n\n\n\n<p>Le fichier de configuration principal est&nbsp;<code>docusaurus.config.js<\/code>&nbsp;situ\u00e9 \u00e0 la racine.<\/p>\n\n\n\n<p>Ce fichier contient les param\u00e8tres pour :<\/p>\n\n\n\n<ul>\n<li>Les m\u00e9tadonn\u00e9es du site comme le titre, slogan, url, favicon, etc.<\/li>\n\n\n\n<li>Les liens de navigation d&#8217;en-t\u00eate et de pied de page.<\/li>\n\n\n\n<li>Le th\u00e8me de couleurs.<\/li>\n\n\n\n<li>CSS et JavaScript personnalis\u00e9s<\/li>\n\n\n\n<li>Plugins Markdown personnalis\u00e9s<\/li>\n\n\n\n<li>Ajout de pages personnalis\u00e9es<\/li>\n\n\n\n<li>Enregistrement de la documentation, du blog, des pages personnalis\u00e9es<\/li>\n\n\n\n<li>Et bien d&#8217;autres options de configuration.<\/li>\n<\/ul>\n\n\n\n<p>Par exemple, pour changer le titre du site :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><em>\/\/ docusaurus.config.js<\/em>\n\nmodule.exports = {\n  title: 'Mon titre de site', \n  tagline: 'Le slogan de mon site',\n\n  <em>\/\/ ...<\/em>\n}<\/code><\/pre>\n\n\n\n<p>Reportez-vous \u00e0 la&nbsp;<a href=\"https:\/\/docusaurus.io\/docs\/configuration\" target=\"_blank\" rel=\"noreferrer noopener\">documentation de configuration de Docusaurus<\/a>&nbsp;pour la liste compl\u00e8te des options.<\/p>\n\n\n\n<p>Le fichier&nbsp;<code>sidebars.js<\/code>&nbsp;est utilis\u00e9 pour configurer la navigation lat\u00e9rale gauche de la documentation. Il vous permet de sp\u00e9cifier quels documents doivent \u00eatre inclus dans la barre lat\u00e9rale et dans quel ordre.<\/p>\n\n\n\n<p>Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><em>\/\/ sidebars.js<\/em>\n\nmodule.exports = {\n  tutorialSidebar: [\n    'intro',\n    'install',\n    {\n      type: 'category',\n      label: 'Guides',\n      items: [\n        'guide1',\n        'guide2'\n      ]\n    }\n  ], \n}<\/code><\/pre>\n\n\n\n<p>Cela mappe le document&nbsp;<code>intro.md<\/code>&nbsp;\u00e0 l&#8217;\u00e9l\u00e9ment de barre lat\u00e9rale &#8220;Introduction&#8221;,&nbsp;<code>install.md<\/code>&nbsp;\u00e0 &#8220;Installation&#8221; et ainsi de suite.<\/p>\n\n\n\n<p>La&nbsp;<a href=\"https:\/\/docusaurus.io\/docs\" target=\"_blank\" rel=\"noreferrer noopener\">documentation Docusaurus<\/a>&nbsp;fournit une r\u00e9f\u00e9rence compl\u00e8te pour toutes les options de configuration.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cr%C3%A9ation-de-pages\">Cr\u00e9ation de pages<\/h2>\n\n\n\n<p>Pour ajouter une nouvelle page comme &#8220;\u00c0 propos de nous&#8221;, cr\u00e9ez un fichier JSX dans&nbsp;<code>src\/pages\/about.js<\/code>&nbsp;:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><em>\/\/ src\/pages\/about.js<\/em>\n\nimport React from 'react';\n\nfunction About() {\n  return (\n    &lt;main&gt;\n      &lt;h1&gt;\u00c0 propos de nous&lt;\/h1&gt;\n      &lt;p&gt;Cette page vous en dit plus sur nous...&lt;\/p&gt;\n    &lt;\/main&gt;\n  )\n}\n\nexport default About;<\/code><\/pre>\n\n\n\n<p>Ce composant React sera rendu en tant que page \u00e0 l&#8217;URL&nbsp;<code>\/about<\/code>.<\/p>\n\n\n\n<p>De m\u00eame, vous pouvez ajouter des pages comme&nbsp;<code>\/contact<\/code>,&nbsp;<code>\/pricing<\/code>,&nbsp;<code>\/terms<\/code>&nbsp;etc.<\/p>\n\n\n\n<p>Reportez-vous \u00e0 la&nbsp;<a href=\"https:\/\/docusaurus.io\/docs\/creating-pages\" target=\"_blank\" rel=\"noreferrer noopener\">documentation Docusaurus sur les pages<\/a>&nbsp;pour plus de d\u00e9tails.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ajout-darticles-de-blog\">Ajout d&#8217;articles de blog<\/h2>\n\n\n\n<p>Pour cr\u00e9er un nouvel article de blog, ajoutez un fichier Markdown dans le r\u00e9pertoire&nbsp;<code>blog<\/code>. Par exemple :<\/p>\n\n\n\n<p><code>blog\/welcome.md<\/code>&nbsp;:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markdown\" class=\"language-markdown\">---\nslug: welcome\ntitle: Bienvenue sur mon blog  \nauthor: Jean Dupont\nauthor<em>_title: Auteur principal  \nauthor_<\/em>url: https:\/\/github.com\/jeandupont\nauthor<em>_image_<\/em>url: https:\/\/avatars3.githubusercontent.com\/u\/123?s=400&amp;v=4\n<strong>tags: [bonjour, docusaurus]\n---<\/strong>\n\nBienvenue sur mon nouveau blog ! Ceci est mon premier article.\n\nJe vais \u00e9crire sur mon parcours avec Docusaurus et partager mes r\u00e9flexions. Restez pour plus \u00e0 venir !<\/code><\/pre>\n\n\n\n<p>Les attributs de l&#8217;article vous permettent de personnaliser l&#8217;en-t\u00eate du blog. Docusaurus lira ces fichiers Markdown et g\u00e9n\u00e9rera une jolie page de blog pour chaque article.<\/p>\n\n\n\n<p>Reportez-vous \u00e0 la&nbsp;<a href=\"https:\/\/docusaurus.io\/docs\/blog\" target=\"_blank\" rel=\"noreferrer noopener\">documentation du blog Docusaurus<\/a>&nbsp;pour plus de d\u00e9tails sur la cr\u00e9ation d&#8217;articles de blog.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ajout-de-documentation\">Ajout de documentation<\/h2>\n\n\n\n<p>Pour ajouter des pages de documentation, cr\u00e9ez des fichiers Markdown dans le dossier&nbsp;<code>\/docs<\/code>.<\/p>\n\n\n\n<p>Par exemple :<\/p>\n\n\n\n<p><code>docs\/intro.md<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markdown\" class=\"language-markdown\"><strong># Introduction<\/strong>\n\nBienvenue sur mon site de documentation !\n\nJe vais couvrir comment installer Docusaurus et discuter des concepts cl\u00e9s.<\/code><\/pre>\n\n\n\n<p><code>docs\/install.md<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markdown\" class=\"language-markdown\"><strong># Installation<\/strong>\n\nVous pouvez installer Docusaurus en utilisant:\n\n```bash\nnpm init docusaurus@latest\n```\n\nCela vous permettra de d\u00e9marrer rapidement.<\/code><\/pre>\n\n\n\n<p>Les fichiers Markdown seront convertis en HTML et affich\u00e9s joliment avec des fonctionnalit\u00e9s comme une barre lat\u00e9rale, une navigation, une recherche, etc.<\/p>\n\n\n\n<p>Vous pouvez utiliser des titres, des images, des liens, des blocs de code, la coloration syntaxique et le formatage Markdown.<\/p>\n\n\n\n<p>Reportez-vous \u00e0 la&nbsp;<a href=\"https:\/\/docusaurus.io\/docs\/markdown-features\" target=\"_blank\" rel=\"noreferrer noopener\">documentation des fonctionnalit\u00e9s Markdown de Docusaurus<\/a>&nbsp;pour plus de d\u00e9tails sur les fonctionnalit\u00e9s Markdown disponibles.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"versionnage\">Versionnage<\/h2>\n\n\n\n<p>Docusaurus facilite le maintien de versions de documentation avec la fonctionnalit\u00e9 de versionnage.<\/p>\n\n\n\n<p>Pour utiliser le versionnage, initialisez d&#8217;abord la documentation :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ npm run docusaurus docs:version 1.0.0 <\/code><\/pre>\n\n\n\n<p>Cela cr\u00e9era un dossier&nbsp;<code>versioned_docs<\/code>&nbsp;et copiera le contenu de votre dossier&nbsp;<code>docs<\/code>&nbsp;existant dans le sous-dossier&nbsp;<code>versions\/1.0.0<\/code>.<\/p>\n\n\n\n<p>Vous pouvez ensuite apporter des modifications \u00e0 la documentation dans le dossier&nbsp;<code>docs<\/code>&nbsp;qui seront refl\u00e9t\u00e9es dans la version&nbsp;<code>latest<\/code>.<\/p>\n\n\n\n<p>Pour cr\u00e9er une nouvelle version :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ npm run docusaurus docs:version 1.0.1<\/code><\/pre>\n\n\n\n<p>Cela copiera le dossier&nbsp;<code>docs<\/code>&nbsp;actuel dans&nbsp;<code>versions\/1.0.1<\/code>&nbsp;comme instantan\u00e9. Vous pouvez basculer entre les versions en les s\u00e9lectionnant dans le menu d\u00e9roulant de version.<\/p>\n\n\n\n<p>Reportez-vous au&nbsp;<a href=\"https:\/\/docusaurus.io\/docs\/versioning\" target=\"_blank\" rel=\"noreferrer noopener\">guide de versionnage de Docusaurus<\/a>&nbsp;pour plus de d\u00e9tails.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"th%C3%A8mes\">Th\u00e8mes<\/h2>\n\n\n\n<p>Docusaurus est livr\u00e9 avec plusieurs th\u00e8mes dont :<\/p>\n\n\n\n<ul>\n<li><strong>Classique<\/strong>&nbsp;&#8211; Le th\u00e8me classique Docusaurus.<\/li>\n\n\n\n<li><strong>Bootstrap<\/strong>&nbsp;&#8211; Un th\u00e8me avec des styles Bootstrap.<\/li>\n\n\n\n<li><strong>Minimal<\/strong>&nbsp;&#8211; Un th\u00e8me minimal avec du CSS brut.<\/li>\n<\/ul>\n\n\n\n<p>Le th\u00e8me peut \u00eatre configur\u00e9 dans&nbsp;<code>docusaurus.config.js<\/code>&nbsp;:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">module.exports = {\n  <em>\/\/ ...<\/em>\n  themeConfig: {\n    navbar: {\n      title: 'Titre du site',\n      logo: {\n        alt: 'Logo du site', \n        src: 'img\/logo.svg',\n      }\n    },\n  },\n  themes: ['@docusaurus\/theme-classic'], \n}<\/code><\/pre>\n\n\n\n<p>Vous pouvez \u00e9galement cr\u00e9er des&nbsp;<a href=\"https:\/\/docusaurus.io\/docs\/themes\" target=\"_blank\" rel=\"noreferrer noopener\">th\u00e8mes personnalis\u00e9s<\/a>&nbsp;pour cr\u00e9er votre propre marque.<\/p>\n\n\n\n<p>Reportez-vous \u00e0 la documentation sur les th\u00e8mes pour plus de d\u00e9tails sur la personnalisation des composants comme les barres de navigation, pieds de page, palette de couleurs, etc.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"d%C3%A9ploiement\">D\u00e9ploiement<\/h2>\n\n\n\n<p>Une fois que votre site Docusaurus est pr\u00eat, vous pouvez le d\u00e9ployer facilement.<\/p>\n\n\n\n<p>Tout d&#8217;abord, g\u00e9n\u00e9rez les pages HTML statiques :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ npm run build<\/code><\/pre>\n\n\n\n<p>Cela g\u00e9n\u00e9rera un dossier&nbsp;<code>build<\/code>&nbsp;contenant les pages HTML, les bundles JavaScript et les assets.<\/p>\n\n\n\n<p>Vous pouvez maintenant d\u00e9ployer le dossier&nbsp;<code>build<\/code>&nbsp;sur n&#8217;importe quel fournisseur d&#8217;h\u00e9bergement statique comme GitHub Pages, Vercel, Netlify, Azure Static Web Apps, etc.<\/p>\n\n\n\n<p>Par exemple, pour d\u00e9ployer sur GitHub Pages :<\/p>\n\n\n\n<ol>\n<li>Validez le dossier&nbsp;<code>build<\/code>&nbsp;dans une branche&nbsp;<code>gh-pages<\/code>&nbsp;sur GitHub.<\/li>\n\n\n\n<li>D\u00e9finissez le site GitHub Pages pour pointer vers la branche&nbsp;<code>gh-pages<\/code>.<\/li>\n<\/ol>\n\n\n\n<p>Reportez-vous aux&nbsp;<a href=\"https:\/\/docusaurus.io\/docs\/deployment\" target=\"_blank\" rel=\"noreferrer noopener\">docs de d\u00e9ploiement de Docusaurus<\/a>&nbsp;pour obtenir des guides sur le d\u00e9ploiement sur diverses plateformes.<\/p>\n\n\n\n<p>Et c&#8217;est tout ! Votre site Docusaurus devrait maintenant \u00eatre publi\u00e9 en ligne.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"r%C3%A9sum%C3%A9\">R\u00e9sum\u00e9<\/h2>\n\n\n\n<p>Dans ce tutoriel, nous avons vu comment :<\/p>\n\n\n\n<ul>\n<li>Installer Docusaurus en utilisant le mod\u00e8le classique ou la commande unique<\/li>\n\n\n\n<li>Structurer les fichiers et dossiers du projet<\/li>\n\n\n\n<li>Configurer Docusaurus avec&nbsp;<code>docusaurus.config.js<\/code><\/li>\n\n\n\n<li>Ex\u00e9cuter le serveur de d\u00e9veloppement<\/li>\n\n\n\n<li>Cr\u00e9er des pages React<\/li>\n\n\n\n<li>Ajouter des articles de blog<\/li>\n\n\n\n<li>Organiser la documentation avec Markdown<\/li>\n\n\n\n<li>Versionner la documentation<\/li>\n\n\n\n<li>Th\u00e8me du site Docusaurus<\/li>\n\n\n\n<li>D\u00e9ployer Docusaurus en production<\/li>\n<\/ul>\n\n\n\n<p>Docusaurus est un excellent outil pour cr\u00e9er des sites web de documentation avec React. Il fournit une belle exp\u00e9rience pr\u00eate \u00e0 l&#8217;emploi tout en donnant la flexibilit\u00e9 pour personnaliser et \u00e9tendre n&#8217;importe quoi. J&#8217;esp\u00e8re que ce tutoriel vous a aid\u00e9 \u00e0 apprendre \u00e0 vous lancer avec Docusaurus pour votre site de documentation.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Docusaurus est un g\u00e9n\u00e9rateur de site statique moderne optimis\u00e9 pour cr\u00e9er des sites web de documentation. Il fournit une excellente exp\u00e9rience de documentation pr\u00eate \u00e0 l&#8217;emploi avec des fonctionnalit\u00e9s comme la recherche, le versionnage, l&#8217;i18n, etc. Dans ce tutoriel complet, nous allons passer \u00e9tape par \u00e9tape comment installer Docusaurus sur votre syst\u00e8me. Pr\u00e9requis Avant d&#8217;installer ..<\/p>\n<div class=\"clear-fix\"><\/div>\n<p><a href=\"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/\" title=\"read more...\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[67,190],"tags":[],"yoast_head":"\n<title>Comment installer Docusaurus sur linux - WebHi Tutorials &amp; Documentations<\/title>\n<meta name=\"description\" content=\"Guide \u00e9tape par \u00e9tape sur la fa\u00e7on d&#039;installer le g\u00e9n\u00e9rateur de site statique Docusaurus, de structurer les fichiers et dossiers de votre projet, de configurer les param\u00e8tres, de cr\u00e9er des pages et des billets de blog, d&#039;ajouter de la documentation, de versionner les docs, d&#039;appliquer des th\u00e8mes et de d\u00e9ployer le site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment installer Docusaurus sur linux - WebHi Tutorials &amp; Documentations\" \/>\n<meta property=\"og:description\" content=\"Guide \u00e9tape par \u00e9tape sur la fa\u00e7on d&#039;installer le g\u00e9n\u00e9rateur de site statique Docusaurus, de structurer les fichiers et dossiers de votre projet, de configurer les param\u00e8tres, de cr\u00e9er des pages et des billets de blog, d&#039;ajouter de la documentation, de versionner les docs, d&#039;appliquer des th\u00e8mes et de d\u00e9ployer le site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHi Tutorials &amp; Documentations\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webhi.technology\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-04T08:02:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-04T08:02:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhi.com\/how-to\/gilrogre\/2024\/02\/docusaurus_install_fr.jpg\" \/>\n<meta name=\"author\" content=\"webhi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@WebHiTechnology\" \/>\n<meta name=\"twitter:site\" content=\"@WebHiTechnology\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"webhi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/\"},\"author\":{\"name\":\"webhi\",\"@id\":\"https:\/\/www.webhi.com\/how-to\/#\/schema\/person\/b31e76e2311cdc0bb90f5e2733059a54\"},\"headline\":\"Comment installer Docusaurus sur linux\",\"datePublished\":\"2024-03-04T08:02:56+00:00\",\"dateModified\":\"2024-03-04T08:02:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/\"},\"wordCount\":1560,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webhi.com\/how-to\/#organization\"},\"articleSection\":[\"Administration syst\u00e8me Linux\",\"CMS &amp; D\u00e9veloppement Web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/\",\"url\":\"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/\",\"name\":\"Comment installer Docusaurus sur linux - WebHi Tutorials &amp; Documentations\",\"isPartOf\":{\"@id\":\"https:\/\/www.webhi.com\/how-to\/#website\"},\"datePublished\":\"2024-03-04T08:02:56+00:00\",\"dateModified\":\"2024-03-04T08:02:59+00:00\",\"description\":\"Guide \u00e9tape par \u00e9tape sur la fa\u00e7on d'installer le g\u00e9n\u00e9rateur de site statique Docusaurus, de structurer les fichiers et dossiers de votre projet, de configurer les param\u00e8tres, de cr\u00e9er des pages et des billets de blog, d'ajouter de la documentation, de versionner les docs, d'appliquer des th\u00e8mes et de d\u00e9ployer le site.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webhi.com\/how-to\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Comment installer Docusaurus sur linux\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webhi.com\/how-to\/#website\",\"url\":\"https:\/\/www.webhi.com\/how-to\/\",\"name\":\"WebHi Tutorials &amp; Documentations\",\"description\":\"System administration and knowledge base\",\"publisher\":{\"@id\":\"https:\/\/www.webhi.com\/how-to\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webhi.com\/how-to\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webhi.com\/how-to\/#organization\",\"name\":\"WebHi Technology\",\"url\":\"https:\/\/www.webhi.com\/how-to\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webhi.com\/how-to\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webhi.com\/how-to\/gilrogre\/2022\/07\/logo.png\",\"contentUrl\":\"https:\/\/www.webhi.com\/how-to\/gilrogre\/2022\/07\/logo.png\",\"width\":288,\"height\":95,\"caption\":\"WebHi Technology\"},\"image\":{\"@id\":\"https:\/\/www.webhi.com\/how-to\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webhi.technology\",\"https:\/\/twitter.com\/WebHiTechnology\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webhi.com\/how-to\/#\/schema\/person\/b31e76e2311cdc0bb90f5e2733059a54\",\"name\":\"webhi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webhi.com\/how-to\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.webhi.com\/how-to\/ahuphiph\/litespeed\/avatar\/e20da107d0f4c765ead2eef88ad019d8.jpg?ver=1780005063\",\"contentUrl\":\"https:\/\/www.webhi.com\/how-to\/ahuphiph\/litespeed\/avatar\/e20da107d0f4c765ead2eef88ad019d8.jpg?ver=1780005063\",\"caption\":\"webhi\"},\"sameAs\":[\"https:\/\/www.webhi.com\/how-to\"],\"url\":\"https:\/\/www.webhi.com\/how-to\/author\/webhi\/\"}]}<\/script>\n","yoast_head_json":{"title":"Comment installer Docusaurus sur linux - WebHi Tutorials &amp; Documentations","description":"Guide \u00e9tape par \u00e9tape sur la fa\u00e7on d'installer le g\u00e9n\u00e9rateur de site statique Docusaurus, de structurer les fichiers et dossiers de votre projet, de configurer les param\u00e8tres, de cr\u00e9er des pages et des billets de blog, d'ajouter de la documentation, de versionner les docs, d'appliquer des th\u00e8mes et de d\u00e9ployer le site.","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:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/","og_locale":"en_US","og_type":"article","og_title":"Comment installer Docusaurus sur linux - WebHi Tutorials &amp; Documentations","og_description":"Guide \u00e9tape par \u00e9tape sur la fa\u00e7on d'installer le g\u00e9n\u00e9rateur de site statique Docusaurus, de structurer les fichiers et dossiers de votre projet, de configurer les param\u00e8tres, de cr\u00e9er des pages et des billets de blog, d'ajouter de la documentation, de versionner les docs, d'appliquer des th\u00e8mes et de d\u00e9ployer le site.","og_url":"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/","og_site_name":"WebHi Tutorials &amp; Documentations","article_publisher":"https:\/\/www.facebook.com\/webhi.technology","article_published_time":"2024-03-04T08:02:56+00:00","article_modified_time":"2024-03-04T08:02:59+00:00","og_image":[{"url":"https:\/\/www.webhi.com\/how-to\/gilrogre\/2024\/02\/docusaurus_install_fr.jpg"}],"author":"webhi","twitter_card":"summary_large_image","twitter_creator":"@WebHiTechnology","twitter_site":"@WebHiTechnology","twitter_misc":{"Written by":"webhi","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/#article","isPartOf":{"@id":"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/"},"author":{"name":"webhi","@id":"https:\/\/www.webhi.com\/how-to\/#\/schema\/person\/b31e76e2311cdc0bb90f5e2733059a54"},"headline":"Comment installer Docusaurus sur linux","datePublished":"2024-03-04T08:02:56+00:00","dateModified":"2024-03-04T08:02:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/"},"wordCount":1560,"commentCount":0,"publisher":{"@id":"https:\/\/www.webhi.com\/how-to\/#organization"},"articleSection":["Administration syst\u00e8me Linux","CMS &amp; D\u00e9veloppement Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/","url":"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/","name":"Comment installer Docusaurus sur linux - WebHi Tutorials &amp; Documentations","isPartOf":{"@id":"https:\/\/www.webhi.com\/how-to\/#website"},"datePublished":"2024-03-04T08:02:56+00:00","dateModified":"2024-03-04T08:02:59+00:00","description":"Guide \u00e9tape par \u00e9tape sur la fa\u00e7on d'installer le g\u00e9n\u00e9rateur de site statique Docusaurus, de structurer les fichiers et dossiers de votre projet, de configurer les param\u00e8tres, de cr\u00e9er des pages et des billets de blog, d'ajouter de la documentation, de versionner les docs, d'appliquer des th\u00e8mes et de d\u00e9ployer le site.","breadcrumb":{"@id":"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhi.com\/how-to\/fr\/comment-installer-docusaurus-linux\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhi.com\/how-to\/"},{"@type":"ListItem","position":2,"name":"Comment installer Docusaurus sur linux"}]},{"@type":"WebSite","@id":"https:\/\/www.webhi.com\/how-to\/#website","url":"https:\/\/www.webhi.com\/how-to\/","name":"WebHi Tutorials &amp; Documentations","description":"System administration and knowledge base","publisher":{"@id":"https:\/\/www.webhi.com\/how-to\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhi.com\/how-to\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webhi.com\/how-to\/#organization","name":"WebHi Technology","url":"https:\/\/www.webhi.com\/how-to\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhi.com\/how-to\/#\/schema\/logo\/image\/","url":"https:\/\/www.webhi.com\/how-to\/gilrogre\/2022\/07\/logo.png","contentUrl":"https:\/\/www.webhi.com\/how-to\/gilrogre\/2022\/07\/logo.png","width":288,"height":95,"caption":"WebHi Technology"},"image":{"@id":"https:\/\/www.webhi.com\/how-to\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webhi.technology","https:\/\/twitter.com\/WebHiTechnology"]},{"@type":"Person","@id":"https:\/\/www.webhi.com\/how-to\/#\/schema\/person\/b31e76e2311cdc0bb90f5e2733059a54","name":"webhi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhi.com\/how-to\/#\/schema\/person\/image\/","url":"https:\/\/www.webhi.com\/how-to\/ahuphiph\/litespeed\/avatar\/e20da107d0f4c765ead2eef88ad019d8.jpg?ver=1780005063","contentUrl":"https:\/\/www.webhi.com\/how-to\/ahuphiph\/litespeed\/avatar\/e20da107d0f4c765ead2eef88ad019d8.jpg?ver=1780005063","caption":"webhi"},"sameAs":["https:\/\/www.webhi.com\/how-to"],"url":"https:\/\/www.webhi.com\/how-to\/author\/webhi\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhi.com\/how-to\/wp-json\/wp\/v2\/posts\/7963"}],"collection":[{"href":"https:\/\/www.webhi.com\/how-to\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhi.com\/how-to\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhi.com\/how-to\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhi.com\/how-to\/wp-json\/wp\/v2\/comments?post=7963"}],"version-history":[{"count":10,"href":"https:\/\/www.webhi.com\/how-to\/wp-json\/wp\/v2\/posts\/7963\/revisions"}],"predecessor-version":[{"id":8005,"href":"https:\/\/www.webhi.com\/how-to\/wp-json\/wp\/v2\/posts\/7963\/revisions\/8005"}],"wp:attachment":[{"href":"https:\/\/www.webhi.com\/how-to\/wp-json\/wp\/v2\/media?parent=7963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhi.com\/how-to\/wp-json\/wp\/v2\/categories?post=7963"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhi.com\/how-to\/wp-json\/wp\/v2\/tags?post=7963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}