Aller au contenu principal
Version: 2.0.0-beta.3

Déploiement

Pour construire les fichiers statiques de votre site web pour la production, exécutez :

npm run build

Une fois terminé, les fichiers statiques seront générés dans le répertoire build.

remarque

La seule responsabilité de Docusaurus est de construire votre site et d'émettre des fichiers statiques dans build.

C'est maintenant à vous de choisir comment héberger ces fichiers statiques.

Vous pouvez déployer votre site sur des services d'hébergement statiques tels que Vercel, GitHub Pages, Netlify, Render, Surge ...

Un site Docusaurus est rendu de manière statique, et il peut généralement fonctionner sans JavaScript !

Tester votre construction en local#

Il est important de tester votre construction avant de déployer sur une production.

Docusaurus possède une commande docusaurus serve pour cela :

npm run serve

Configuration du slash de fin#

Docusaurus possède une config trailingSlash, pour permettre de personnaliser les URL/liens et les modèles de noms de fichiers émis.

La valeur par défaut fonctionne généralement bien.

Malheureusement, chaque hébergeur statique a un comportement différent, et déployer exactement le même site sur différents hôtes peut conduire à des résultats différents.

En fonction de votre hôte, il peut être utile de modifier cette configuration.

astuce

Utilisez slorber/trailing-slash-guide pour mieux comprendre le comportement de votre hôte et configurer trailingSlash de manière appropriée.

Auto-hébergement#

Docusaurus peut être auto-hébergé en utilisant docusaurus serve. Changez de port en utilisant --port et --host pour changer d'hôte.

npm run serve -- --build --port 80 --host 0.0.0.0
avertissement

Ce n'est pas la meilleure option, par rapport à un fournisseur d'hébergement statique / CDN.

Déploiement sur les pages GitHub#

Docusaurus fournit un moyen facile de publier sur GitHub Pages. Il s'agit d'un hébergement fourni gratuitement avec chaque dépôt GitHub.

Paramètres docusaurus.config.js#

Tout d'abord, modifiez votre docusaurus.config.js et ajoutez les paramètres requis :

NomDescription
organizationNameL'utilisateur ou l'organisation GitHub qui possède le dépôt. Si vous en êtes le propriétaire, c'est votre nom d'utilisateur GitHub. Dans le cas de Docusaurus, c'est «facebook» qui est l'organisation GitHub qui possède Docusaurus.
projectNameLe nom du répertoire GitHub. Par exemple, le nom du dépôt pour Docusaurus est "docusaurus", donc le nom du projet est "docusaurus".
urlURL de la page utilisateur/organisation de votre page GitHub. Il s'agit généralement de https://_username_.github.io.
baseUrlL'URL de base pour votre projet. Pour les projets hébergés sur des pages GitHub, elle suit le format "/projectName/". Pour https://github.com/facebook/docusaurus, baseUrl est /docusaurus/.
info

Dans le cas où vous souhaitez utiliser votre domaine personnalisé pour GitHub Pages, créez un fichier CNAME dans le répertoire static. Tout ce qui se trouve dans le répertoire static sera copié à la racine du répertoire build pour le déploiement.

Lorsque vous utilisez un domaine personnalisé, vous devriez pouvoir revenir de baseUrl: '/nomduprojet/' à baseUrl: '/'

Vous pouvez vous référer à la documentation de GitHub Utilisateur, organisation et pages de projet pour plus de détails.

caution

GitHub Pages ajoute par défaut un slash final aux URL Docusaurus. Il est recommandé de définir une configuration trailingSlash (true ou false, pas undefined).

Exemple :

docusaurus.config.js
module.exports = {  // ...  url: 'https://endiliey.github.io', // URL de votre site web  baseUrl: '/',  projectName: 'endiliey.github.io',  organizationName: 'endiliey',  trailingSlash: false,  // ...};
avertissement

Par défaut, les pages GitHub exécutent les fichiers publiés via Jekyll. Puisque Jekyll va se débarrasser de tous les fichiers qui commencent par _, il est recommandé de désactiver Jekyll en ajoutant un fichier vide nommé .nojekyll dans votre répertoire static.

Paramètres de l'environnement#

Spécifiez l'utilisateur Git comme variable d'environnement.

NomDescription
GIT_USERLe nom d'utilisateur d'un compte GitHub qui a un accès à ce dépôt. Pour vos propres dépôts, ce sera généralement votre nom d'utilisateur GitHub. Le GIT_USER spécifié doit avoir un accès push au dépôt spécifié par la combinaison de organizationName et projectName.

Paramètres facultatifs, également définis comme variables d'environnement :

NomDescription
USE_SSHDéfini à true pour utiliser SSH au lieu du HTTPS par défaut pour la connexion au dépôt GitHub.
DEPLOYMENT_BRANCHLa branche sur laquelle le site web sera déployé, par défaut gh-pages pour les dépôts normaux et master pour les noms de dépôt se terminant par github.io.
CURRENT_BRANCHLa branche qui contient les dernières modifications de docs qui seront déployées. Habituellement, la branche sera master, mais il pourrait s'agir de n'importe quelle branche (par défaut ou autre) sauf gh-pages. Si rien n'est défini pour cette variable, alors la branche courante sera utilisée.
GIT_PASSMot de passe (ou jeton) de l'utilisateur git (spécifié par GIT_USER). Par exemple, pour faciliter le déploiement non interactif (par exemple le déploiement continu)

Les installations de GitHub Enterprise devraient fonctionner de la même manière que github.com ; il suffit de définir l'hôte GitHub Enterprise de l'organisation comme variable d'environnement :

NomDescription
GITHUB_HOSTLe nom de domaine de votre site d'entreprise GitHub.
GITHUB_PORTLe port de votre site d'entreprise GitHub.

Déployez#

Enfin, pour déployer votre site sur GitHub Pages, exécutez :

GIT_USER=<GITHUB_USERNAME> yarn deploy

Déclenchement du déploiement avec les actions GitHub#

Les GitHub Actions vous permettent d'automatiser, de personnaliser et d'exécuter vos flux de développement logiciel directement dans votre dépôt. Ce flux de travail suppose que votre documentation réside dans la branche documentation de votre dépôt et que votre source de publication est configurée pour la branche gh-pages.

  1. Générer une nouvelle clé SSH.
  2. Par défaut, votre clé publique devrait avoir été créée dans ~/.ssh/id_rsa.pub ou utilisez le nom que vous avez fourni à l'étape précédente pour ajouter votre clé à GitHub deploy keys.
  3. Copiez la clé dans le presse-papiers avec xclip -sel clip < ~/.ssh/id_rsa.pub et collez-la comme clé de déploiement dans votre dépôt. Copiez le contenu du fichier si la ligne de commande ne fonctionne pas pour vous. Cochez la case Allow write access avant d'enregistrer votre clé de déploiement.
  4. Vous aurez besoin de votre clé privée comme secret GitHub pour permettre à Docusaurus d'exécuter le déploiement pour vous.
  5. Copiez votre clé privée avec xclip -sel clip < ~/.ssh/id_rsa et collez un secret GitHub avec le nom GH_PAGES_DEPLOY. Copiez le contenu du fichier si la ligne de commande ne fonctionne pas pour vous. Enregistrez votre secret.
  6. Créez votre fichier de flux de documentation dans .github/workflows/. Dans cet exemple, c'est documentation.yml.
    avertissement

    Veillez à remplacer actions@github.com par votre email GitHub et gh-actions par votre nom.

documentation.yml
name: documentation
on:  pull_request:    branches: [documentation]  push:    branches: [documentation]
jobs:  checks:    if: github.event_name != 'push'    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@v1      - uses: actions/setup-node@v1        with:          node-version: '12.x'      - name: Test Build        run: |          if [ -e yarn.lock ]; then          yarn install --frozen-lockfile          elif [ -e package-lock.json ]; then          npm ci          else          npm i          fi          npm run build  gh-release:    if: github.event_name != 'pull_request'    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@v1      - uses: actions/setup-node@v1        with:          node-version: '12.x'      - uses: webfactory/ssh-agent@v0.5.0        with:          ssh-private-key: ${{ secrets.GH_PAGES_DEPLOY }}      - name: Release to GitHub Pages        env:          USE_SSH: true          GIT_USER: git        run: |          git config --global user.email "actions@github.com"          git config --global user.name "gh-actions"          if [ -e yarn.lock ]; then          yarn install --frozen-lockfile          elif [ -e package-lock.json ]; then          npm ci          else          npm i          fi          npm run deploy
  1. Maintenant, lorsqu'une nouvelle pull request arrive vers votre dépôt dans la branche documentation, il s'assurera automatiquement que la construction de Docusaurus est réussie.
  2. Lorsque la pull request est fusionnée à la branche documentation ou que quelqu'un pousse directement vers la branche documentation , elle construira et déploiera vers la branche gh-pages.
  3. Après cette étape, votre documentation mise à jour sera disponible sur les pages GitHub.

Déclenchement du déploiement avec Travis CI#

Les services d'intégration continue (CI) sont généralement utilisés pour effectuer des tâches routinières lorsque de nouveaux commits sont enregistrés dans le contrôle de source. Ces tâches peuvent être une combinaison de tests unitaires et de tests d'intégration, d'automatisation de la construction, de publication de paquets sur NPM et de déploiement de modifications sur votre site Web. Tout ce que vous avez à faire pour automatiser le déploiement de votre site Web est d'invoquer le script de déploiement de yarn chaque fois que votre site est mis à jour. La section suivante couvre comment faire exactement cela en utilisant Travis CI, un fournisseur de services d'intégration continue populaire.

  1. Allez sur https://github.com/settings/tokens et générez un nouveau jeton d'accès personnel. Lors de la création du jeton, octroyez-lui la portée du dépôt afin qu'il dispose des autorisations dont il a besoin.
  2. En utilisant votre compte GitHub, ajoutez l'application Travis CI au dépôt que vous souhaitez activer.
  3. Ouvrez votre tableau de bord Travis CI. L'URL ressemble à https://travis-ci.com/USERNAME/REPO et naviguez vers la section More options > Setting > Environment Variables de votre dépôt.
  4. Créez une nouvelle variable d'environnement nommée GH_TOKEN avec votre jeton nouvellement généré comme valeur, puis GH_EMAIL (votre adresse e-mail) et GH_NAME (votre nom d'utilisateur GitHub).
  5. Créez un .travis.yml à la racine de votre dépôt avec les éléments suivants :
.travis.yml
language: node_jsnode_js:  - '10'branches:  only:    - mastercache:  yarn: truescript:  - git config --global user.name "${GH_NAME}"  - git config --global user.email "${GH_EMAIL}"  - echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc  - yarn && GIT_USER="${GH_NAME}" yarn deploy

Maintenant, chaque fois qu'un nouveau commit arrive dans master, Travis CI exécutera votre suite de tests et si tout se passe, votre site web sera déployé via le script yarn deploy.

Déclenchement du déploiement avec Buddy#

Buddy est un outil CI/CD facile à utiliser qui vous permet d'automatiser le déploiement de votre portail dans différents environnements, notamment les pages GitHub.

Suivez ces étapes pour créer un pipeline qui déploie automatiquement une nouvelle version de votre site Web chaque fois que vous apportez des modifications à la branche sélectionnée de votre projet :

  1. Allez sur https://github.com/settings/tokens et générez un nouveau jeton d'accès personnel. Lors de la création du jeton, octroyez-lui la portée du dépôt afin qu'il dispose des autorisations dont il a besoin.
  2. Connectez-vous à votre compte Buddy et créez un nouveau projet.
  3. Choisissez GitHub comme hébergeur git et sélectionnez le dépôt avec le code de votre site web.
  4. À l'aide du panneau de navigation de gauche, basculez vers la vue Pipelines.
  5. Créez un nouveau pipeline. Définissez son nom, définissez le mode de déclenchement à On push, et sélectionnez la branche qui déclenche l'exécution du pipeline.
  6. Ajoutez une action Node.js.
  7. Ajoutez ces commandes dans le terminal de l'action :
    GIT_USER=<GH_PERSONAL_ACCESS_TOKEN>git config --global user.email "<YOUR_GH_EMAIL>"git config --global user.name "<YOUR_GH_USERNAME>"yarn deploy

Après avoir créé ce pipeline simple, chaque nouveau commit poussé vers la branche que vous avez sélectionnée déploie votre site web sur GitHub Pages à l'aide de yarn deploy. Lisez ce guide pour en savoir plus sur la mise en place d'un pipeline CI/CD pour Docusaurus.

Utiliser des pipelines Azure#

  1. Inscrivez-vous sur Pipelines Azure si vous ne l'avez pas déjà fait.
  2. Créez une organisation et au sein de l'organisation créez un projet et connectez votre dépôt à partir de GitHub.
  3. Allez sur https://github.com/settings/tokens et générez un nouveau jeton d'accès personnel avec la portée du dépôt.
  4. Dans la page du projet (qui ressemble à https://dev.azure.com/ORG_NAME/REPO_NAME/_build) créez un nouveau pipeline avec le texte suivant. Aussi, cliquez sur modifier et ajoutez une nouvelle variable d'environnement nommée GH_TOKEN avec votre jeton nouvellement généré comme valeur, puis GH_EMAIL (votre adresse e-mail) et GH_NAME (votre nom d'utilisateur GitHub). Assurez-vous de les marquer comme secrets. Vous pouvez également ajouter un fichier nommé azure-pipelines.yml à la racine de votre dépôt.
azure-pipelines.yml
trigger:  - master
pool:  vmImage: 'ubuntu-latest'
steps:  - checkout: self    persistCredentials: true
  - task: NodeTool@0    inputs:      versionSpec: '10.x'    displayName: 'Install Node.js'
  - script: |      git config --global user.name "${GH_NAME}"      git config --global user.email "${GH_EMAIL}"      git checkout -b master      echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc      yarn && GIT_USER="${GH_NAME}" yarn deploy    env:      GH_NAME: $(GH_NAME)      GH_EMAIL: $(GH_EMAIL)      GH_TOKEN: $(GH_TOKEN)    displayName: 'yarn install and build'

Utiliser Drone#

  1. Créez une nouvelle clé ssh qui sera la clé de déploiement pour votre projet.
  2. Nommez vos clés privées et publiques pour qu'elles soient spécifiques et pour ne pas écraser vos autres clés ssh.
  3. Allez sur https://github.com/USERNAME/REPO/settings/keys et ajoutez une nouvelle clé de déploiement en collant votre clé publique que vous venez de générer.
  4. Ouvrez votre tableau de bord Drone.io et connectez-vous. L'URL ressemble à https://cloud.drone.io/USERNAME/REPO.
  5. Cliquez sur le dépôt, cliquez sur activer le dépôt, et ajoutez un secret appelé git_deploy_private_key avec la valeur de votre clé privée que vous venez de générer.
  6. Créez un .drone.yml à la racine de votre dépôt avec le texte ci-dessous.
# .drone.ymlkind: pipelinetype: dockertrigger:  event:    - tag- name: Website  image: node  commands:    - mkdir -p $HOME/.ssh    - ssh-keyscan -t rsa github.com >> $HOME/.ssh/known_hosts    - echo "$GITHUB_PRIVATE_KEY > $HOME/.ssh/id_rsa"    - chmod 0600 $HOME/.ssh/id_rsa    - cd website    - npm i    - npm run publish-gh-pages  environment:    USE_SSH: true    GIT_USER: $DRONE_COMMIT_AUTHOR    GITHUB_PRIVATE_KEY: git_deploy_private_key

Maintenant, chaque fois que vous poussez un nouveau tag sur github, ce déclencheur démarrera la tâche de drone ci pour publier votre site web.

Déploiement sur Netlify#

Pour déployer vos sites Docusaurus 2 sur Netlify, assurez-vous d'abord que les options suivantes sont correctement configurées :

docusaurus.config.js
module.exports = {  url: 'https://docusaurus-2.netlify. om', // Url de votre site sans slash à la fin  baseUrl: '/', // Répertoire de base de votre site relatif à votre depôt  // ...};

Ensuite, créez votre site avec Netlify.

Pendant que vous configurez le site, spécifiez les commandes de compilation et les répertoires comme suit :

  • build command: npm run build
  • build directory: build

Si vous n'avez pas configuré ces options de compilation, vous pouvez toujours aller dans "Site settings" -> "Build and deploy" après la création de votre site.

Une fois correctement configuré avec les options ci-dessus, votre site devrait être déployé et redéployé automatiquement lors de la fusion de votre branche de déploiement, qui est par défaut master.

avertissement

Par défaut, Netlify ajoute un slash final aux URL Docusaurus.

Il est recommandé de désactiver le paramètre Netlify Post Processing > Asset Optimization > Pretty Urls pour éviter les URL en minuscules, les redirections inutiles et les erreurs 404.

Faites très attention : la case à cocher globale Disable asset optimization est défectueuse et ne désactive pas vraiment le paramètre Pretty URLs en pratique. Veillez à le décocher indépendamment.

Si vous voulez garder le paramètre Pretty Urls de Netlify activé, ajustez la configuration trailingSlash de Docusaurus de manière appropriée.

Reportez-vous à slorber/trailing-slash-guide pour plus d'informations.

Déploiement sur Vercel#

Déployer votre projet Docusaurus sur Vercel vous fournira différents avantages dans les domaines de la performance et de la facilité d'utilisation.

Pour déployer votre projet Docusaurus avec un Vercel pour l'intégration Git, assurez-vous qu'il a été poussé dans un dépôt Git.

Importer le projet dans Vercel en utilisant le Import Flow. Lors de l'importation, vous trouverez toutes les options pertinentes préconfigurées pour vous ; cependant, vous pouvez choisir de modifier l'une de ces options, dont une liste peut être trouvée ici.

Après l'importation de votre projet, tous les pushs ultérieurs vers les branches généreront des Déploiements d'aperçu, et toutes les modifications apportées à la Branche de production (communément "main") donneront lieu à un Déploiement de production.

Déploiement sur Render#

Render offre gratuitement l'hebergement d'un site statique avec SSL entièrement géré, domaines personnalisés, un CDN global et des déploiements continus automatiques de votre dépôt Git. Commencez en quelques minutes en suivant le guide de Render pour déployer Docusaurus.

Déploiement sur Qovery#

Qovery est une plateforme cloud entièrement gérée qui fonctionne sur votre compte AWS, GCP, Azure et Digital Ocean où vous pouvez héberger des sites statiques, des API backend, des bases de données, des cron jobs et toutes vos autres apps en un seul endroit.

  1. Créez un compte Qovery.

Visitez le tableau de bord de Qovery pour créer un compte si vous n'en avez pas déjà un.

  1. Créez un projet

Cliquez sur « Create a new project » et donnez un nom à votre projet.

Cliquez sur « Next ».

  1. Ajoutez une application

Cliquez sur « Create an application » puis choisissez « I have an application » et sélectionnez votre dépôt GitHub ou GitLab où se trouve votre application.

Cliquez sur « Next ».

Ignorez l'ajout de services

  1. Déployez

Cliquez sur « Deploy ».

Vous pouvez voir le statut en temps réel en cliquant sur les journaux de déploiement.

Déploiement sur Hostman#

Hostman vous permet d'héberger gratuitement des sites web statiques. Hostman automatise tout, il vous suffit de connecter votre dépôt et de suivre des étapes faciles :

  1. Créez un service

Pour déployer un site web statique Docusaurus, cliquez sur « Create » dans le coin supérieur gauche de votre Dashboard et choisissez « Front-end app or static website ».

  1. Sélectionnez le projet à déployer

Si vous êtes connecté à Hostman avec votre compte GitHub, GitLab ou Bitbucket, à ce stade, vous verrez le dépôt avec vos projets, y compris les projets privés.

Choisissez le projet que vous souhaitez déployer. Il doit contenir le répertoire avec les fichiers du projet (généralement il s’agit de website ou my-website).

Pour accéder à un autre dépôt, cliquez sur « Connect another repository ».

Si vous n'avez pas utilisé les informations d'identification de votre compte Git pour vous connecter, vous pourrez accéder au compte nécessaire maintenant, puis sélectionner le projet.

  1. Configurez les paramètres de construction. Ensuite, la fenêtre de personnalisation du site Web apparaîtra.

Choisissez l'option du site Web statique dans la liste des frameworks.

Le « Directory with app » pointe vers le répertoire qui contiendra les fichiers du projet après la construction. Vous pouvez laisser à vide si au cours de l'étape 2 vous avez sélectionné le dépôt avec le contenu du répertoire website (ou my_website).

La « build command » pour Docusaurus sera :

yarn run build

Vous pouvez modifier la commande de compilation si nécessaire. Vous pouvez entrer plusieurs commandes séparées par &&.

  1. Pour déployer, cliquez sur « Deploy » pour lancer le processus de construction.

Une fois qu'il aura démarré, vous entrerez dans le journal de déploiement. En cas de problème avec le code, vous obtiendrez des messages d'avertissement ou d'erreur dans le journal, précisant la cause du problème.

Habituellement, le journal contient toutes les données de débogage dont vous avez besoin, mais nous sommes également là pour vous aider à résoudre les problèmes, alors n'hésitez pas à nous contacter par chat.

Une fois le déploiement terminé, vous recevrez une notification par mail et vous verrez également une note du journal.

Terminé !

Votre projet est prêt.

Déploiement sur Surge#

Surge est une plate-forme statique d'hébergement web, elle est utilisée pour déployer votre projet Docusaurus depuis la ligne de commande en une minute. Déployer votre projet sur Surge est facile et il est également gratuit (y compris un domaine personnalisé et SSL).

Déployez votre application en quelques secondes en utilisant surge avec les étapes suivantes :

  1. Tout d'abord, installez Surge en utilisant npm en exécutant la commande suivante :
npm install --g surge
  1. Pour construire pour la production les fichiers statiques de votre site à la racine de votre projet, exécutez :
npm run build
  1. Ensuite, exécutez cette commande à l'intérieur du répertoire racine de votre projet :
surge build/

La première fois, les utilisateurs de Surge seront invités à créer un compte à partir de la ligne de commande (cela ne se produit qu'une fois).

Confirmez que le site que vous voulez publier se trouve dans le répertoire build , un sous-domaine généré aléatoirement sous-domaine *.surge.sh est toujours donné (celui-ci peut être modifié).

Utiliser votre nom de domaine#

Si vous avez un nom de domaine, vous pouvez déployer votre site en utilisant la commande :

surge build/ votredomaine.com

Votre site est maintenant déployé gratuitement sur sousdomaine.surge.sh ou votredomaine.com selon la méthode que vous avez choisie.

Mise en place du fichier CNAME#

Stockez votre domaine dans un fichier CNAME pour de futurs déploiements avec la commande suivante :

echo subdomain.surge.sh > CNAME

Vous pouvez déployer tout autre changement dans le futur avec la commande surge.

Déploiement sur QuantCDN#

  1. Installez Quant CLI

  2. Créez un compte QuantCDN en vous inscrivant

  3. Initialisez votre projet avec quant init et remplissez vos informations d'identification :

quant init
  1. Déployez votre site
quant deploy

Consultez docs et blog pour plus d'exemples et de cas d'utilisation pour le déploiement sur QuantCDN.