Déploiement
Pour construire les fichiers statiques de votre site web pour la production, exécutez :
- npm
- Yarn
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 localIl 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
#
Auto-hébergementavertissement
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
#
Déploiement sur les pages GitHubDocusaurus fournit un moyen facile de publier sur GitHub Pages. Il s'agit d'un hébergement fourni gratuitement avec chaque dépôt GitHub.
docusaurus.config.js
#
Paramètres 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 :
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'environnementSpé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. |
#
DéployerEnfin, pour déployer votre site sur GitHub Pages, exécutez :
- Bash
- Windows
- PowerShell
#
Déclenchement du déploiement avec les actions GitHubLes 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 caseAllow 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 nomGH_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'estdocumentation.yml
.
- 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 branchedocumentation
, elle construira et déploiera vers la branchegh-pages
. - Après cette étape, votre documentation mise à jour sera disponible sur les pages GitHub.
#
Déclenchement du déploiement avec Travis CILes 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, puisGH_EMAIL
(votre adresse e-mail) etGH_NAME
(votre nom d'utilisateur GitHub). - Créez un
.travis.yml
à la racine de votre dépôt avec les éléments suivants :
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, puisGH_EMAIL
(votre adresse e-mail) etGH_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.
#
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.
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 NetlifyPour déployer vos sites Docusaurus 2 sur Netlify, assurez-vous d'abord que les options suivantes sont correctement configurées :
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 VercelDé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 RenderRender 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 SurgeSurge 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 :
- Pour construire pour la production les fichiers statiques de votre site à la racine de votre projet, exécutez :
- Ensuite, exécutez cette commande à l'intérieur du répertoire racine de votre projet :
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 domaineSi vous avez un nom de domaine, vous pouvez déployer votre site en utilisant la commande :
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 CNAMEStockez votre domaine dans un fichier CNAME pour de futurs déploiements avec la commande suivante :
Vous pouvez déployer tout autre changement dans le futur avec la commande surge
.