Version: 2.0.0-beta.0

Déploiement

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

npm
Yarn

npm run build

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

Vous pouvez déployer votre site sur des services d'hébergement statiques tels que Vercel, GitHub Pages, Netlify, Render et Surge. Les sites Docusaurus sont rendus statiquement donc ils fonctionnent aussi sans JavaScript !

Tester la construction en local#

Il est important de tester la construction avant de déployer sur une production. Docusaurus inclut une commande docusaurus serve pour tester la compilation localement.

npm
Yarn

npm run serve

Auto-hébergement#

avertissement

Ce n'est pas la solution la plus performante

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

npm
Yarn

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

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 :

Nom	Description
`organizationName`	L'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.
`projectName`	Le nom du répertoire GitHub. Par exemple, le nom du dépôt pour Docusaurus est "docusaurus", donc le nom du projet est "docusaurus".
`url`	URL de la page utilisateur/organisation de votre page GitHub. Il s'agit généralement de https://_username_.github.io.
`baseUrl`	L'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.

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

Exemple :

docusaurus.config.js

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

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.

Nom	Description
`GIT_USER`	Le 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 :

Nom	Description
`USE_SSH`	Défini à `true` pour utiliser SSH au lieu du HTTPS par défaut pour la connexion au dépôt GitHub.
`DEPLOYMENT_BRANCH`	La 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_BRANCH`	La 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_PASS`	Mot 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 :

Nom	Description
`GITHUB_HOST`	Le nom de domaine de votre site d'entreprise GitHub.
`GITHUB_PORT`	Le port de votre site d'entreprise GitHub.

Déployez#

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

Bash
Windows
PowerShell

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.

Générer une nouvelle clé SSH.
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.
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.
Vous aurez besoin de votre clé privée comme secret GitHub pour permettre à Docusaurus d'exécuter le déploiement pour vous.
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.
Créez votre fichier de flux de documentation dans .github/workflows/. Dans cet exemple, c'est documentation.yml.

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/[email protected]
      - uses: actions/setup-[email protected]
        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/[email protected]
      - uses: actions/setup-[email protected]
        with:
          node-version: '12.x'
      - uses: webfactory/ssh-[email protected]
        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 "[email protected]"
          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

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.
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.
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.

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.
En utilisant votre compte GitHub, ajoutez l'application Travis CI au dépôt que vous souhaitez activer.
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.
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).
Créez un .travis.yml à la racine de votre dépôt avec les éléments suivants :

.travis.yml

language: node_js
node_js:
  - '10'
branches:
  only:
    - master
cache:
  yarn: true
script:
  - 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.

Utiliser des pipelines Azure#

Inscrivez-vous sur Pipelines Azure si vous ne l'avez pas déjà fait.
Créez une organisation et au sein de l'organisation créez un projet et connectez votre dépôt à partir de GitHub.
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.
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: [email protected]
    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#

Créez une nouvelle clé ssh qui sera la clé de déploiement pour votre projet.
Nommez vos clés privées et publiques pour qu'elles soient spécifiques et pour ne pas écraser vos autres clés ssh.
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.
Ouvrez votre tableau de bord Drone.io et connectez-vous. L'URL ressemble à https://cloud.drone.io/USERNAME/REPO.
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.
Créez un .drone.yml à la racine de votre dépôt avec le texte ci-dessous.

# .drone.yml
kind: pipeline
type: docker
trigger:
  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.

important

Assurez-vous de désactiver le paramètre Netlify Pretty URLs pour éviter les URL en minuscule, les redirections inutiles et les erreurs 404.

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.

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.

Créez un projet

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

Cliquez sur « Next ».

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

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 :

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 ».

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.

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 &&.

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 :

Tout d'abord, installez Surge en utilisant npm en exécutant la commande suivante :

npm install --g surge

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

npm run build

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#

Installez Quant CLI
Créez un compte QuantCDN en vous inscrivant
Initialisez votre projet avec quant init et remplissez vos informations d'identification :

quant init

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.

Tester la construction en local#

Auto-hébergement#

avertissement

Déploiement sur les pages GitHub#

Paramètres docusaurus.config.js#

info

avertissement

Paramètres de l'environnement#

Déployez#

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

Déclenchement du déploiement avec Travis CI#

Utiliser des pipelines Azure#

Utiliser Drone#

Déploiement sur Netlify#

important

Déploiement sur Vercel#

Déploiement sur Render#

Déploiement sur Qovery#

Déploiement sur Hostman#

Déploiement sur Surge#

Utiliser votre nom de domaine#

Mise en place du fichier CNAME#

Déploiement sur QuantCDN#

Paramètres `docusaurus.config.js`#