mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-10 07:37:19 +02:00
414 lines
No EOL
55 KiB
HTML
414 lines
No EOL
55 KiB
HTML
<!DOCTYPE html><html lang="fr"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Publication de votre site · Docusaurus</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Vous devez avoir maintenant un [site fonctionnant localement](/docs/fr/next/site-creation). Une fois que vous l'avez [personnalisé](/docs/fr/next/site-config) à votre gout, c'est le temps de le publier. Docusaurus génère un site web HTML statique qui est prêt à être servi par votre serveur web préféré ou une solution d'hébergement en ligne."/><meta name="docsearch:version" content="next"/><meta name="docsearch:language" content="fr"/><meta property="og:title" content="Publication de votre site · Docusaurus"/><meta property="og:type" content="website"/><meta property="og:url" content="https://docusaurus.io/"/><meta property="og:description" content="Vous devez avoir maintenant un [site fonctionnant localement](/docs/fr/next/site-creation). Une fois que vous l'avez [personnalisé](/docs/fr/next/site-config) à votre gout, c'est le temps de le publier. Docusaurus génère un site web HTML statique qui est prêt à être servi par votre serveur web préféré ou une solution d'hébergement en ligne."/><meta property="og:image" content="https://docusaurus.io/img/docusaurus.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://docusaurus.io/img/docusaurus.png"/><link rel="shortcut icon" href="/img/docusaurus.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://docusaurus.io/blog/atom.xml" title="Docusaurus Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://docusaurus.io/blog/feed.xml" title="Docusaurus Blog RSS Feed"/><script>
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||
|
||
ga('create', 'UA-44373548-31', 'auto');
|
||
ga('send', 'pageview');
|
||
</script><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script><script type="text/javascript" src="/js/code-blocks-buttons.js"></script><script src="https://unpkg.com/vanilla-back-to-top@7.1.14/dist/vanilla-back-to-top.min.js"></script><script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
addBackToTop(
|
||
{"zIndex":100}
|
||
)
|
||
});
|
||
</script><script src="/js/scrollSpy.js"></script><link rel="stylesheet" href="/css/prism.css"/><link rel="stylesheet" href="/css/main.css"/><script src="/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/fr"><img class="logo" src="/img/docusaurus.svg" alt="Docusaurus"/><h2 class="headerTitleWithLogo">Docusaurus</h2></a><a href="/fr/versions"><h3>next</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/fr/next/installation" target="_self">Documentations</a></li><li class=""><a href="/docs/fr/next/tutorial-setup" target="_self">Tutoriel</a></li><li class=""><a href="/fr/users" target="_self">Utilisateurs</a></li><li class=""><a href="/blog/" target="_self">Blog</a></li><li class=""><a href="https://github.com/facebook/docusaurus" target="_blank">GitHub</a></li><span><li><a id="languages-menu" href="#"><img class="languages-icon" src="/img/language.svg" alt="Languages icon"/>Français</a><div id="languages-dropdown" class="hide"><ul id="languages-dropdown-items"><li><a href="/docs/en/next/publishing">English</a></li><li><a href="/docs/ko/next/publishing">한국어</a></li><li><a href="/docs/pt-BR/next/publishing">Português (Brasil)</a></li><li><a href="/docs/ro/next/publishing">Română</a></li><li><a href="/docs/ru/next/publishing">Русский</a></li><li><a href="/docs/zh-CN/next/publishing">简体中文</a></li><li><a href="https://crowdin.com/project/docusaurus" target="_blank" rel="noreferrer noopener">Aidez-nous à traduire</a></li></ul></div></li><script>
|
||
const languagesMenuItem = document.getElementById("languages-menu");
|
||
const languagesDropDown = document.getElementById("languages-dropdown");
|
||
languagesMenuItem.addEventListener("click", function(event) {
|
||
event.preventDefault();
|
||
|
||
if (languagesDropDown.className == "hide") {
|
||
languagesDropDown.className = "visible";
|
||
} else {
|
||
languagesDropDown.className = "hide";
|
||
}
|
||
});
|
||
</script></span><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><div class="hamburger-menu"><div class="line1"></div><div class="line2"></div><div class="line3"></div></div></div><h2><i>›</i><span>Premiers pas</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Premiers pas<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/fr/next/installation">Installation</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/next/site-preparation">Préparation du site</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/next/site-creation">Création de votre site</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/fr/next/publishing">Publication de votre site</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/next/docker">Docker</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guides<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/fr/next/adding-blog">Ajouter un blog</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/next/custom-pages">Pages personnalisées</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/next/search">Activation de la recherche</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/next/navigation">Navigation et Barre latérale</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/next/translation">Traductions & Localisation</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/next/versioning">Gestion de version</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">API<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/fr/next/commands">Commande CLI</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/next/doc-markdown">Fonctionnalités de Markdown</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/next/api-pages">Pages et styles</a></li><li class="navListItem"><a class="navItem" href="/docs/fr/next/site-config">siteConfig.js</a></li></ul></div></div></section></div><script>
|
||
var coll = document.getElementsByClassName('collapsible');
|
||
var checkActiveCategory = true;
|
||
for (var i = 0; i < coll.length; i++) {
|
||
var links = coll[i].nextElementSibling.getElementsByTagName('*');
|
||
if (checkActiveCategory){
|
||
for (var j = 0; j < links.length; j++) {
|
||
if (links[j].classList.contains('navListItemActive')){
|
||
coll[i].nextElementSibling.classList.toggle('hide');
|
||
coll[i].childNodes[1].classList.toggle('rotate');
|
||
checkActiveCategory = false;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
coll[i].addEventListener('click', function() {
|
||
var arrow = this.childNodes[1];
|
||
arrow.classList.toggle('rotate');
|
||
var content = this.nextElementSibling;
|
||
content.classList.toggle('hide');
|
||
});
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
|
||
createToggler('#tocToggler', 'body', 'tocActive');
|
||
|
||
var headings = document.querySelector('.toc-headings');
|
||
headings && headings.addEventListener('click', function(event) {
|
||
var el = event.target;
|
||
while(el !== headings){
|
||
if (el.tagName === 'A') {
|
||
document.body.classList.remove('tocActive');
|
||
break;
|
||
} else{
|
||
el = el.parentNode;
|
||
}
|
||
}
|
||
}, false);
|
||
|
||
function createToggler(togglerSelector, targetSelector, className) {
|
||
var toggler = document.querySelector(togglerSelector);
|
||
var target = document.querySelector(targetSelector);
|
||
|
||
if (!toggler) {
|
||
return;
|
||
}
|
||
|
||
toggler.onclick = function(event) {
|
||
event.preventDefault();
|
||
|
||
target.classList.toggle(className);
|
||
};
|
||
}
|
||
});
|
||
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://crowdin.com/project/docusaurus/fr" target="_blank" rel="noreferrer noopener">Translate</a><h1 id="__docusaurus" class="postHeaderTitle">Publication de votre site</h1></header><article><div><span><p>Vous devez avoir maintenant un <a href="/docs/fr/next/site-creation">site fonctionnant localement</a>. Une fois que vous l'avez <a href="/docs/fr/next/site-config">personnalisé</a> à votre gout, c'est le temps de le publier. Docusaurus génère un site web HTML statique qui est prêt à être servi par votre serveur web préféré ou une solution d'hébergement en ligne.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="création-des-pages-html-statiques"></a><a href="#création-des-pages-html-statiques" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Création des pages HTML statiques</h2>
|
||
<p>Pour créer une version statique de votre site web, exécutez le script suivant dans le dossier <code>website</code>:</p>
|
||
<pre><code class="hljs css language-bash">yarn run build <span class="hljs-comment"># ou `npm run build`</span>
|
||
</code></pre>
|
||
<p>Cela va générer un dossier <code>build</code> dans le dossier <code>website</code> contenant les fichiers <code>.html</code> de toute votre documentation et d'autres pages incluses dans <code>pages</code>.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="hébergement-de-pages-html-statiques"></a><a href="#hébergement-de-pages-html-statiques" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Hébergement de pages HTML statiques</h2>
|
||
<p>À ce point, vous pouvez prendre tous les fichiers dans le dossier <code>website/build</code> et les copier dans votre dossier <code>html</code> de votre serveur web préféré.</p>
|
||
<blockquote>
|
||
<p>Par exemple, Apache et Nginx diffuse le contenu à partir de <code>/var/www/html</code> par défaut. Cela dit, choisir un serveur web ou un hébergeur est à l'extérieur du cadre de Docusaurus.</p>
|
||
<p>Lorsque vous diffusez le site à partir de votre propre serveur web, assurez-vous que le serveur web fournit bien les fichiers de composants avec les entêtes HTTP appropriés. Les fichiers CSS doivent être servis avec l'entête <code>content-type</code> de <code>text/css</code>. Dans le cas de Nginx, cela signifierait le paramètre <code>inclure /etc/nginx/mime.types;</code> dans votre fichier <code>nginx.conf</code> . Consulter <a href="https://github.com/facebook/docusaurus/issues/602">ce problème</a> pour plus d'informations.</p>
|
||
</blockquote>
|
||
<h3><a class="anchor" aria-hidden="true" id="hébergement-dans-un-service-"></a><a href="#hébergement-dans-un-service-" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Hébergement dans un service :</h3>
|
||
<ul>
|
||
<li><a href="#using-zeit-now">ZEIT Now</a></li>
|
||
<li><a href="#using-github-pages">Github Pages</a></li>
|
||
<li><a href="#hosting-on-netlify">Netlify</a></li>
|
||
<li><a href="#hosting-on-render">Render</a></li>
|
||
</ul>
|
||
<h3><a class="anchor" aria-hidden="true" id="utilisation-de-zeit-now"></a><a href="#utilisation-de-zeit-now" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Utilisation de ZEIT Now</h3>
|
||
<p>Déployer votre projet Docusaurus sur <a href="https://zeit.co/now">ZEIT Now</a> vous fournira <a href="https://zeit.co/now">différents avantages</a> dans les domaines de la performance et de la facilité d'utilisation.</p>
|
||
<p>Most importantly, however, deploying a Docusaurus project only takes a couple of seconds:</p>
|
||
<ol>
|
||
<li>Tout d'abord, installez leur <a href="https://zeit.co/download">interface de ligne de commande</a>:</li>
|
||
</ol>
|
||
<pre><code class="hljs css language-bash">npm i -g now
|
||
</code></pre>
|
||
<ol start="2">
|
||
<li>Exécutez une seule commande dans le répertoire racine de votre projet :</li>
|
||
</ol>
|
||
<pre><code class="hljs css language-bash">now
|
||
</code></pre>
|
||
<p><strong>C'est tout.</strong> Vos docs seront automatiquement déployées.</p>
|
||
<blockquote>
|
||
<p>Notez que la prise en charge de la structure de répertoire de Now est légèrement différente de la structure de répertoire par défaut d'un projet Docusaurus - Le répertoire <code>docs</code> doit être dans le répertoire <code>website</code>, suivant idéalement la structure des répertoires dans cet exemple. Vous devrez également spécifier une valeur <code>customDocsPath</code> dans <code>siteConfig.js</code>. Take a look at the <a href="https://github.com/zeit/now-examples/tree/master/docusaurus">now-examples repository for a Docusaurus project</a>.</p>
|
||
</blockquote>
|
||
<h3><a class="anchor" aria-hidden="true" id="utilisation-de-github-pages"></a><a href="#utilisation-de-github-pages" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Utilisation de Github Pages</h3>
|
||
<p>Docusaurus was designed to work well with one of the most popular hosting solutions for open source projects: <a href="https://pages.github.com/">GitHub Pages</a>.</p>
|
||
<h4><a class="anchor" aria-hidden="true" id="déploiement-sur-les-pages-github"></a><a href="#déploiement-sur-les-pages-github" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Déploiement sur les pages GitHub</h4>
|
||
<ol>
|
||
<li>Docusaurus prend en charge le déploiement en tant que <a href="https://help.github.com/articles/user-organization-and-project-pages">pages de projet ou pages d'utilisateur/organisation</a>, votre dépôt de code n'a même pas besoin d'être public.</li>
|
||
</ol>
|
||
<blockquote>
|
||
<p>Même si votre dépôt est privé, tout ce qui est publié dans une branche <code>gh-pages</code> sera <a href="https://help.github.com/articles/user-organization-and-project-pages/">public</a>.</p>
|
||
</blockquote>
|
||
<p><strong>Remarque :</strong> Lorsque vous déployez en tant qu'utilisateur/organisation des pages, le script de publication va déployer ces sites à la racine de la branche <strong><code>master</code></strong> du dépôt <em>username</em>.github.io. Dans ce cas, notez que vous aurez l'infra de Docusaurus, vos docs, etc. soit dans <strong>une autre branche de <em>username</em>.github.io repo</strong> (par exemple, appelée <code>source</code>), ou dans un autre dépôt séparé (par exemple dans le même que le code source documenté).</p>
|
||
<ol start="2">
|
||
<li>Vous devrez modifier le fichier <code>website/siteConfig.js</code> et ajouter les paramètres requis.</li>
|
||
</ol>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Nom</th><th>Description</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><code>organizationName</code></td><td>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, ce serait l'organisation GitHub "<em>facebook</em>".</td></tr>
|
||
<tr><td><code>projectName</code></td><td>Le nom du dépôt GitHub pour votre projet. For example, the source code for Docusaurus is hosted at <a href="https://github.com/facebook/docusaurus">https://github.com/facebook/docusaurus</a>, so our project name, in this case, would be "docusaurus".</td></tr>
|
||
<tr><td><code>url</code></td><td>L'URL de votre site web. Pour les projets hébergés sur des pages GitHub, ce sera "https://<em>username</em>.github.io"</td></tr>
|
||
<tr><td><code>baseUrl</code></td><td>L'URL de base pour votre projet. Pour les projets hébergés sur des pages GitHub, il suit le format "/<em>projectName</em>/". Pour <a href="https://github.com/facebook/docusaurus">https://github.com/facebook/docusaurus</a>, <code>baseUrl</code> est <code>/docusaurus/</code>.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<pre><code class="hljs css language-js"><span class="hljs-keyword">const</span> siteConfig = {
|
||
...
|
||
url: <span class="hljs-string">'https://__userName__.github.io'</span>, <span class="hljs-comment">// L'URL de votre site web</span>
|
||
<span class="hljs-attr">baseUrl</span>: <span class="hljs-string">'/testProject/'</span>,
|
||
<span class="hljs-attr">projectName</span>: <span class="hljs-string">'testProject'</span>,
|
||
<span class="hljs-attr">organizationName</span>: <span class="hljs-string">'userName'</span>
|
||
...
|
||
}
|
||
</code></pre>
|
||
<p>Dans le cas où vous souhaitez déployer le site en tant qu'utilisateur ou organisation, spécifiez le nom du projet comme <code><username>.github.io</code> ou <code><orgname>.github.io</code>. Par exemple, si votre nom d'utilisateur GitHub est "user42", alors cela sera <em>user42.github.io</em>, ou dans le cas d'un nom d'organisation de "org123", cela sera <em>org123.github.io</em>.</p>
|
||
<p><strong>Remarque :</strong> Ne pas définir <code>url</code> et <code>baseUrl</code> de votre projet peuvent entraîner la création de chemins de fichiers incorrects qui peuvent casser des liens vers des chemins de ressources tels que les feuilles de style et les images.</p>
|
||
<blockquote>
|
||
<p>Bien que nous recommandions de définir les <code>projectName</code> et <code>organizationName</code> dans <code>siteConfig.js</code>, vous pouvez également utiliser les variables d'environnement <code>ORGANIZATION_NAME</code> et <code>PROJECT_NAME</code>.</p>
|
||
</blockquote>
|
||
<ol start="3">
|
||
<li>Maintenant vous devez spécifier l'utilisateur git comme variable d'environnement, et exécuter le script <a href="/docs/fr/next/commands#docusaurus-publish"><code>publish-gh-pages</code></a></li>
|
||
</ol>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Nom</th><th>Description</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><code>GIT_USER</code></td><td>The username for a GitHub account that has to commit access to this repo. For your repositories, this will usually be your own GitHub username. Le <code>GIT_USER</code> spécifié doit avoir accès au dépôt spécifié dans la combinaison de <code>organisationName</code> et <code>projectName</code>.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<p>Pour exécuter le script directement à partir de la ligne de commande, vous pouvez utiliser le suivant, en remplissant les valeurs de paramètre comme il se doit.</p>
|
||
<p><strong>Bash</strong></p>
|
||
<pre><code class="hljs css language-bash">GIT_USER=<GIT_USER> \
|
||
CURRENT_BRANCH=master \
|
||
USE_SSH=<span class="hljs-literal">true</span> \
|
||
yarn run publish-gh-pages <span class="hljs-comment"># ou `npm run publish-gh-pages`</span>
|
||
</code></pre>
|
||
<p><strong>Windows</strong></p>
|
||
<pre><code class="hljs css language-batch">cmd /C <span class="hljs-string">"set "</span><span class="hljs-attribute">GIT_USER</span>=<GIT_USER>"&& <span class="hljs-builtin-name">set</span> <span class="hljs-attribute">CURRENT_BRANCH</span>=master && <span class="hljs-builtin-name">set</span> <span class="hljs-attribute">USE_SSH</span>=<span class="hljs-literal">true</span> && yarn <span class="hljs-builtin-name">run</span> publish-gh-pages<span class="hljs-string">"
|
||
</span></code></pre>
|
||
<p>Il y a également deux paramètres optionnels définis comme variables d'environnement :</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Nom</th><th>Description</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><code>USE_SSH</code></td><td>Si cela est défini à <code>true</code>, alors SSH est utilisé au lieu de HTTPS pour la connexion au dépôt GitHub. HTTPS est la valeur par défaut si cette variable n'est pas définie.</td></tr>
|
||
<tr><td><code>CURRENT_BRANCH</code></td><td>La branche qui contient les dernières modifications docs qui seront déployées. Habituellement, la branche sera <code>master</code>, mais peut être n'importe quelle branche (par défaut ou autrement) sauf pour <code>gh-pages</code>. Si rien n'est défini pour cette variable, la branche actuelle sera utilisée.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<p>Si vous rencontrez des problèmes liés aux clés SSH, visitez la documentation d'authentification <a href="https://help.github.com/articles/connecting-to-github-with-ssh/">GitHub</a>.</p>
|
||
<p>Vous devriez maintenant pouvoir charger votre site en visitant son URL GitHub Pages, ce qui pourrait être quelque chose en suivant les lignes de https://<em>nom d'utilisateur</em>.github.io/<em>projectName</em>, ou un domaine personnalisé si vous avez configuré cette page. Par exemple, l'URL GitHub de Docusaurus est <a href="https://facebook.github.io/Docusaurus">https://facebook.github.io/Docusaurus</a> car elle est desservie par la branche <code>gh-pages</code> du dépôt GitHub <a href="https://github.com/facebook/docurus">https://github.com/facebook/docurus</a>. Cependant, il est également accessible via <a href="https://docusaurus.io/">https://docusaurus.io/</a>, via un fichier <code>CNAME</code> généré qui peut être configuré via <code>cname</code> de l'<a href="/docs/fr/next/site-config#cname-string">option siteConfig</a>.</p>
|
||
<p>Nous encourageons vivement la lecture à travers la documentation <a href="https://pages.github.com">GitHub Pages</a> pour en savoir plus sur le fonctionnement de cette solution d'hébergement.</p>
|
||
<p>Vous pouvez exécuter la commande au-dessus de chaque fois que vous mettez à jour les documents et que vous souhaitez déployer les modifications de votre site. L'exécution manuelle du script peut être excellente pour les sites où la documentation change rarement et il n'est pas trop gênant de se souvenir de déployer manuellement des modifications.</p>
|
||
<p>Cependant, vous pouvez automatiser le processus de publication avec une intégration continue (CI).</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="automatisation-des-déploiements-en-utilisant-une-intégration-continue"></a><a href="#automatisation-des-déploiements-en-utilisant-une-intégration-continue" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Automatisation des déploiements en utilisant une intégration continue</h2>
|
||
<p>Les services d'intégration continue (CI) sont généralement utilisés pour effectuer des tâches de routine lorsque de nouveaux commits sont vérifiés pour contrôler la source. Ces tâches peuvent être une combinaison de tests unitaires et de tests d'intégration, d'automatisation des builds, de publication des paquets vers NPM, et oui, de déploiement de modifications sur votre site Web. All you need to do to automate the deployment of your website is to invoke the <code>publish-gh-pages</code> script whenever your docs get updated. Dans la section suivante, nous allons couvrir la façon de faire juste cela en utilisant <a href="https://circleci.com/">CircleCI</a>, un fournisseur de service d'intégration continue populaire.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="utilisation-de-circleci-20"></a><a href="#utilisation-de-circleci-20" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Utilisation de CircleCI 2.0</h3>
|
||
<p>Si vous ne l'avez pas déjà fait, vous pouvez <a href="https://circleci.com/signup/">configurer CircleCI</a> pour votre projet open source. Ensuite, afin d'activer le déploiement automatique de votre site et de la documentation via CircleCI, il suffit de configurer Circle pour exécuter le script <code>publish-gh-pages</code> dans la partie de l'étape de déploiement. Vous pouvez suivre les étapes ci-dessous pour obtenir cette configuration.</p>
|
||
<ol>
|
||
<li>Assurez-vous que le compte GitHub qui sera défini comme <code>GIT_USER</code> a l'accès d'<code>écriture</code> au dépôt qui contient la documentation, en vérifiant <code>Paramètres | Collaborateurs & équipes</code> dans le dépôt.</li>
|
||
<li>Connectez-vous à GitHub sous <code>GIT_USER</code>.</li>
|
||
<li>Allez sur <a href="https://github.com/settings/tokens">https://github.com/settings/tokens</a> pour le <code>GIT_USER</code> et générez un nouveau <a href="https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/">jeton d'accès personnel</a>, lui accordant le contrôle total des dépôts privés via le champ d'application <code>repository</code>. Stockez ce jeton dans un endroit sûr, assurez-vous de ne pas le partager avec n'importe qui. Ce jeton peut être utilisé pour authentifier les actions GitHub en votre nom à la place de votre mot de passe GitHub.</li>
|
||
<li>Ouvrez votre tableau de bord CircleCI et naviguez sur la page Paramètres de votre dépôt, puis sélectionnez "variables d'environnement". L'URL ressemble à <a href="https://circleci.com/gh/ORG/REPO/edit#env-vars">https://circleci.com/gh/ORG/REPO/edit#env-vars</a>, où "ORG/REPO" devrait être remplacé par votre propre organisation/référentiel GitHub.</li>
|
||
<li>Créez une nouvelle variable d'environnement nommée <code>GITHUB_TOKEN</code>, en utilisant votre jeton d'accès nouvellement généré comme valeur.</li>
|
||
<li>Créez un répertoire <code>.circleci</code> et créez un fichier <code>config.yml</code> dans ce répertoire.</li>
|
||
<li>Copiez le texte ci-dessous dans <code>.circleci/config.yml</code>.</li>
|
||
</ol>
|
||
<pre><code class="hljs css language-yaml"><span class="hljs-comment"># If you only want the circle to run on direct commits to master, you can uncomment this out</span>
|
||
<span class="hljs-comment"># and uncomment the filters: *filter-only-master down below too</span>
|
||
<span class="hljs-comment">#</span>
|
||
<span class="hljs-comment"># aliases:</span>
|
||
<span class="hljs-comment"># - &filter-only-master</span>
|
||
<span class="hljs-comment"># branches:</span>
|
||
<span class="hljs-comment"># only:</span>
|
||
<span class="hljs-comment"># - master</span>
|
||
|
||
<span class="hljs-attr">version:</span> <span class="hljs-number">2</span>
|
||
<span class="hljs-attr">jobs:</span>
|
||
<span class="hljs-attr">deploy-website:</span>
|
||
<span class="hljs-attr">docker:</span>
|
||
<span class="hljs-comment"># specify the version you desire here</span>
|
||
|
||
<span class="hljs-bullet">-</span> <span class="hljs-attr">image:</span> <span class="hljs-string">circleci/node:8.11.1</span>
|
||
|
||
<span class="hljs-attr">steps:</span>
|
||
|
||
<span class="hljs-bullet">-</span> <span class="hljs-string">checkout</span>
|
||
<span class="hljs-bullet">-</span> <span class="hljs-attr">run:</span>
|
||
<span class="hljs-attr">name:</span> <span class="hljs-string">Deploying</span> <span class="hljs-string">to</span> <span class="hljs-string">GitHub</span> <span class="hljs-string">Pages</span>
|
||
<span class="hljs-attr">command:</span> <span class="hljs-string">|
|
||
git config --global user.email "<GITHUB_USERNAME>@users.noreply.github.com"
|
||
git config --global user.name "<YOUR_NAME>"
|
||
echo "machine github.com login <GITHUB_USERNAME> password $GITHUB_TOKEN" > ~/.netrc
|
||
cd website && yarn install && GIT_USER=<GIT_USER> yarn run publish-gh-pages
|
||
</span>
|
||
<span class="hljs-attr">workflows:</span>
|
||
<span class="hljs-attr">version:</span> <span class="hljs-number">2</span>
|
||
<span class="hljs-attr">build_and_deploy:</span>
|
||
<span class="hljs-attr">jobs:</span>
|
||
|
||
<span class="hljs-bullet">-</span> <span class="hljs-attr">deploy-website:</span>
|
||
<span class="hljs-comment"># filters: *filter-only-master</span>
|
||
</code></pre>
|
||
<p>Assurez-vous de remplacer tous les <code><....></code> dans <code>command:</code> avec des valeurs appropriées. Pour <code><GIT_USER></code>, c'est un compte GitHub qui a accès à la documentation pour pousser dans votre dépôt GitHub. De nombreuses fois <code><GIT_USER></code> et <code><GITHUB_USERNAME></code> seront les mêmes.</p>
|
||
<p><strong>NE PAS</strong> placer la valeur réelle de <code>$GITHUB_TOKEN</code> dans <code>circle.yml</code>. Nous avons déjà configuré cela en tant que variable d'environnement à l'étape 5.</p>
|
||
<blockquote>
|
||
<p>Si vous voulez utiliser SSH pour votre connexion de dépôt GitHub, vous pouvez définir <code>USE_SSH=true</code>. La commande ci-dessus ressemblerait donc à : <code>cd website && npm install && GIT_USER=<GIT_USER> USE_SSH=true npm run publish-gh-pages</code>.</p>
|
||
<p>Contrairement au script <code>publish-gh-pages</code> lancé manuellement, lorsque le script s'exécute dans l'environnement Circle, la valeur de <code>CURRENT_BRANCH</code> est déjà définie comme une variable d'environnement <a href="https://circleci.com/docs/1.0/environment-variables/">dans CircleCI</a> et sera récupérée automatiquement par le script.</p>
|
||
</blockquote>
|
||
<p>Maintenant, chaque fois qu'un nouveau commit se trouve dans <code>master</code>, CircleCI exécutera votre suite de tests et, si tout passe, votre site sera déployé via le script <code>publish-gh-pages</code> .</p>
|
||
<blockquote>
|
||
<p>Si vous préférez utiliser une clé de déploiement au lieu d'un jeton d'accès personnel, vous pouvez en commençant par les <a href="https://circleci.com/docs/1.0/adding-read-write-deployment-key/">instructions</a> de CircleCI pour ajouter une clé de déploiement en lecture/écriture.</p>
|
||
</blockquote>
|
||
<h3><a class="anchor" aria-hidden="true" id="conseils--astuces"></a><a href="#conseils--astuces" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Conseils & astuces</h3>
|
||
<p>Lorsque vous déployez pour la première fois la branche <code>gh-pages</code> en utilisant CircleCI, vous pouvez remarquer que certains jobs déclenchés par des commits sur la branche <code>gh-pages</code> ne parviennent pas s'exécuter correctement à cause du manque de tests (cela peut également envoyer des notifications de builds échoués sur chat/slack).</p>
|
||
<p>Vous pouvez contourner cela :</p>
|
||
<ul>
|
||
<li>Définition de la variable d'environnement <code>CUSTOM_COMMIT_MESSAGE</code> dans la commande <code>publish-gh-pages</code> avec le contenu de <code>[skip ci]</code>. Par exemple :</li>
|
||
</ul>
|
||
<pre><code class="hljs css language-bash">CUSTOM_COMMIT_MESSAGE=<span class="hljs-string">"[skip ci]"</span> \
|
||
yarn run publish-gh-pages <span class="hljs-comment"># ou `npm run publish-gh-pages`</span>
|
||
</code></pre>
|
||
<ul>
|
||
<li>Vous pouvez également travailler autour de cela en créant une configuration CircleCI basique avec le contenu suivant :</li>
|
||
</ul>
|
||
<pre><code class="hljs css language-yaml"><span class="hljs-comment"># CircleCI 2.0 Fichier de configuration</span>
|
||
<span class="hljs-comment"># Ce fichier de configuration empêchera l'exécution de tests sur la branche gh-pages.</span>
|
||
<span class="hljs-attr">version:</span> <span class="hljs-number">2</span>
|
||
<span class="hljs-attr">jobs:</span>
|
||
<span class="hljs-attr">build:</span>
|
||
<span class="hljs-attr">machine:</span> <span class="hljs-literal">true</span>
|
||
<span class="hljs-attr">branches:</span>
|
||
<span class="hljs-attr">ignore:</span> <span class="hljs-string">gh-pages</span>
|
||
<span class="hljs-attr">steps:</span>
|
||
<span class="hljs-bullet">-</span> <span class="hljs-attr">run:</span> <span class="hljs-string">echo</span> <span class="hljs-string">"Ignore les tests sur la branche gh-pages"</span>
|
||
</code></pre>
|
||
<p>Enregistrez ce fichier sous le nom <code>config.yml</code> et placez-le dans un répertoire <code>.circleci</code> dans votre répertoire <code>website/static</code>.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="utilisation-de-travis-ci"></a><a href="#utilisation-de-travis-ci" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Utilisation de Travis CI</h3>
|
||
<ol>
|
||
<li>Allez sur <a href="https://github.com/settings/tokens">https://github.com/settings/tokens</a> et générez un nouveau <a href="https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/">jeton d'accès personnel</a></li>
|
||
<li>En utilisant votre compte GitHub, <a href="https://github.com/marketplace/travis-ci">ajoutez l'application Travis CI</a> au dépôt que vous souhaitez activer.</li>
|
||
<li>Ouvrez votre tableau de bord Travis CI. L'URL ressemble à <a href="https://travis-ci.com/USERNAME/REPO">https://travis-ci.com/USERNAME/REPO</a>, et accédez à la section <code>Plus d'options</code> > <code>Paramètres</code> > <code>Variables d'environnement</code> de votre dépôt.</li>
|
||
<li>Créez une nouvelle variable d'environnement nommée <code>GH_TOKEN</code> avec votre jeton nouvellement généré, puis <code>GH_EMAIL</code> (votre adresse e-mail) et <code>GH_NAME</code> (votre nom d'utilisateur GitHub).</li>
|
||
<li>Créez un <code>.travis.yml</code> à la racine de votre dépôt avec le texte ci-dessous.</li>
|
||
</ol>
|
||
<pre><code class="hljs css language-yaml"><span class="hljs-comment"># .travis.yml</span>
|
||
<span class="hljs-attr">language:</span> <span class="hljs-string">node_js</span>
|
||
<span class="hljs-attr">node_js:</span>
|
||
<span class="hljs-bullet">-</span> <span class="hljs-string">'8'</span>
|
||
<span class="hljs-attr">branches:</span>
|
||
<span class="hljs-attr">only:</span>
|
||
<span class="hljs-bullet">-</span> <span class="hljs-string">master</span>
|
||
<span class="hljs-attr">cache:</span>
|
||
<span class="hljs-attr">yarn:</span> <span class="hljs-literal">true</span>
|
||
<span class="hljs-attr">script:</span>
|
||
<span class="hljs-bullet">-</span> <span class="hljs-string">git</span> <span class="hljs-string">config</span> <span class="hljs-string">--global</span> <span class="hljs-string">user.name</span> <span class="hljs-string">"${GH_NAME}"</span>
|
||
<span class="hljs-bullet">-</span> <span class="hljs-string">git</span> <span class="hljs-string">config</span> <span class="hljs-string">--global</span> <span class="hljs-string">user.email</span> <span class="hljs-string">"${GH_EMAIL}"</span>
|
||
<span class="hljs-bullet">-</span> <span class="hljs-string">echo</span> <span class="hljs-string">"machine github.com login ${GH_NAME} password ${GH_TOKEN}"</span> <span class="hljs-string">></span> <span class="hljs-string">~/.netrc</span>
|
||
<span class="hljs-bullet">-</span> <span class="hljs-string">cd</span> <span class="hljs-string">website</span> <span class="hljs-string">&&</span> <span class="hljs-string">yarn</span> <span class="hljs-string">install</span> <span class="hljs-string">&&</span> <span class="hljs-string">GIT_USER="${GH_NAME}"</span> <span class="hljs-string">yarn</span> <span class="hljs-string">run</span> <span class="hljs-string">publish-gh-pages</span>
|
||
</code></pre>
|
||
<p>Maintenant, chaque fois qu'un nouveau commit se trouve dans <code>master</code>, Travis CI exécutera votre suite de tests et, si tout passe, votre site sera déployé via le script <code>publish-gh-pages</code> .</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="using-azure-pipelines"></a><a href="#using-azure-pipelines" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using Azure Pipelines</h3>
|
||
<ol>
|
||
<li>Sign Up at <a href="https://azure.microsoft.com/en-us/services/devops/pipelines/">Azure Pipelines</a> if you haven't already.</li>
|
||
<li>Create an organization and within the organization create a project and connect your repository from GitHub.</li>
|
||
<li>Go to <a href="https://github.com/settings/tokens">https://github.com/settings/tokens</a> and generate a new <a href="https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/">personal access token</a> with repository scope.</li>
|
||
<li>In the project page (which looks like <a href="https://dev.azure.com/ORG_NAME/REPO_NAME/_build">https://dev.azure.com/ORG_NAME/REPO_NAME/_build</a>) create a new pipeline with the following text. Also, click on edit and add a new environment variable named <code>GH_TOKEN</code> with your newly generated token as its value, then <code>GH_EMAIL</code> (your email address) and <code>GH_NAME</code> (your GitHub username). Make sure to mark them as secret. Alternatively, you can also add a file named <code>azure-pipelines.yml</code> at yout repository root.</li>
|
||
</ol>
|
||
<pre><code class="hljs css language-yaml"><span class="hljs-comment"># azure-pipelines.yml</span>
|
||
<span class="hljs-attr">trigger:</span>
|
||
<span class="hljs-bullet">-</span> <span class="hljs-string">master</span>
|
||
|
||
<span class="hljs-attr">pool:</span>
|
||
<span class="hljs-attr">vmImage:</span> <span class="hljs-string">'ubuntu-latest'</span>
|
||
|
||
<span class="hljs-attr">steps:</span>
|
||
|
||
<span class="hljs-bullet">-</span> <span class="hljs-attr">checkout:</span> <span class="hljs-string">self</span>
|
||
<span class="hljs-attr">persistCredentials:</span> <span class="hljs-literal">true</span>
|
||
|
||
<span class="hljs-bullet">-</span> <span class="hljs-attr">task:</span> <span class="hljs-string">NodeTool@0</span>
|
||
<span class="hljs-attr">inputs:</span>
|
||
<span class="hljs-attr">versionSpec:</span> <span class="hljs-string">'10.x'</span>
|
||
<span class="hljs-attr">displayName:</span> <span class="hljs-string">'Install Node.js'</span>
|
||
|
||
<span class="hljs-bullet">-</span> <span class="hljs-attr">script:</span> <span class="hljs-string">|
|
||
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
|
||
cd website
|
||
yarn install
|
||
GIT_USER="${GH_NAME}" CURRENT_BRANCH=master yarn run publish-gh-pages
|
||
</span> <span class="hljs-attr">env:</span>
|
||
<span class="hljs-attr">GH_NAME:</span> <span class="hljs-string">$(GH_NAME)</span>
|
||
<span class="hljs-attr">GH_EMAIL:</span> <span class="hljs-string">$(GH_EMAIL)</span>
|
||
<span class="hljs-attr">GH_TOKEN:</span> <span class="hljs-string">$(GH_TOKEN)</span>
|
||
<span class="hljs-attr">displayName:</span> <span class="hljs-string">'yarn install and build'</span>
|
||
</code></pre>
|
||
<h3><a class="anchor" aria-hidden="true" id="hébergement-sur-zeit-now"></a><a href="#hébergement-sur-zeit-now" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Hébergement sur ZEIT now</h3>
|
||
<p>Avec <a href="#using-zeit-now">ZEIT Now</a>, vous pouvez déployer votre site et le connecter à <a href="https://zeit.co/github">GitHub</a> ou <a href="https://zeit.co/gitlab">GitLab</a> pour recevoir automatiquement un nouveau déploiement à chaque fois que vous pousser un commit.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="hébergement-sur-netlify"></a><a href="#hébergement-sur-netlify" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Hébergement sur Netlify</h3>
|
||
<p>Étapes pour configurer votre site alimenté par Docusaurus sur Netlify.</p>
|
||
<ol>
|
||
<li><p>Sélectionnez <strong>Nouveau site depuis Git</strong></p></li>
|
||
<li><p>Connectez-vous à votre fournisseur Git préféré.</p></li>
|
||
<li><p>Sélectionnez la branche à déployer. La valeur par défaut est <code>master</code></p></li>
|
||
<li><p>Configurez vos étapes de construction :</p>
|
||
<ul>
|
||
<li>Pour votre commande de build, saisissez : <code>cd website; npm install; npm run build;</code></li>
|
||
<li>Pour publier le répertoire : <code>website/build/<projectName></code> (utilisez le <code>projectName</code> de votre <code>siteConfig</code>)</li>
|
||
</ul></li>
|
||
<li><p>Cliquez sur <strong>Déployer site</strong></p></li>
|
||
</ol>
|
||
<p>Vous pouvez également configurer Netlify pour qu'il reconstruise sur chaque commit de votre dépôt, ou seulement sur les commits de la branche <code>master</code>.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="hébergement-sur-render"></a><a href="#hébergement-sur-render" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Hébergement sur Render</h3>
|
||
<p>Render offers free <a href="https://render.com/docs/static-sites">static site</a> hosting with fully managed SSL, custom domains, a global CDN and continuous auto deploy from your Git repo. Déployez votre application en quelques minutes en suivant ces étapes.</p>
|
||
<ol>
|
||
<li><p>Créez un nouveau <strong>Service Web</strong> sur Render, et donnez la permission à l'application GitHub de Render d'accéder à votre dépôt Docusaurus.</p></li>
|
||
<li><p>Sélectionnez la branche à déployer. La valeur par défaut est <code>master</code>.</p></li>
|
||
<li><p>Entrez les valeurs suivantes pendant la création.</p></li>
|
||
</ol>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Champ</th><th>Valeur</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><strong>Environment</strong></td><td><code>Site statique</code></td></tr>
|
||
<tr><td><strong>Build Command</strong></td><td><code>cd website; yarn install; yarn build</code></td></tr>
|
||
<tr><td><strong>Publish Directory</strong></td><td><code>website/build/<projectName></code></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<p><code>projectName</code> est la valeur que vous avez définie dans votre <code>siteConfig.js</code>.</p>
|
||
<pre><code class="hljs">javascript{7}
|
||
const siteConfig = {
|
||
// ...
|
||
projectName: 'votre-nom-projet',
|
||
// ...
|
||
</code></pre>
|
||
<p>C'est tout ! Votre application sera directement sur votre URL Render dès que la version sera terminée.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="publication-sur-github-enterprise"></a><a href="#publication-sur-github-enterprise" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Publication sur GitHub Enterprise</h3>
|
||
<p>Les installations de GitHub entreprise devraient fonctionner de la même manière que github.com; vous n'avez qu'à identifier l'hôte GitHub Enterprise de l'organisation.</p>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Nom</th><th>Description</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><code>GITHUB_HOST</code></td><td>Le nom d'hôte du serveur d'entreprise GitHub.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<p>Modifiez votre <code>siteConfig.js</code> pour ajouter une propriété <code>'githubHost'</code> qui représente le nom d'hôte GitHub Entreprise. Autrement, définissez une variable d'environnement <code>GITHUB_HOST</code> lors de l'exécution de la commande publication.</p>
|
||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/fr/next/site-creation"><span class="arrow-prev">← </span><span>Création de votre site</span></a><a class="docs-next button" href="/docs/fr/next/docker"><span>Docker</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#création-des-pages-html-statiques">Création des pages HTML statiques</a></li><li><a href="#hébergement-de-pages-html-statiques">Hébergement de pages HTML statiques</a><ul class="toc-headings"><li><a href="#hébergement-dans-un-service-">Hébergement dans un service :</a></li><li><a href="#utilisation-de-zeit-now">Utilisation de ZEIT Now</a></li><li><a href="#utilisation-de-github-pages">Utilisation de Github Pages</a></li></ul></li><li><a href="#automatisation-des-déploiements-en-utilisant-une-intégration-continue">Automatisation des déploiements en utilisant une intégration continue</a><ul class="toc-headings"><li><a href="#utilisation-de-circleci-20">Utilisation de CircleCI 2.0</a></li><li><a href="#conseils--astuces">Conseils & astuces</a></li><li><a href="#utilisation-de-travis-ci">Utilisation de Travis CI</a></li><li><a href="#using-azure-pipelines">Using Azure Pipelines</a></li><li><a href="#hébergement-sur-zeit-now">Hébergement sur ZEIT now</a></li><li><a href="#hébergement-sur-netlify">Hébergement sur Netlify</a></li><li><a href="#hébergement-sur-render">Hébergement sur Render</a></li><li><a href="#publication-sur-github-enterprise">Publication sur GitHub Enterprise</a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/docusaurus_monochrome.svg" alt="Docusaurus" width="66" height="58"/></a><div class="footerSection"><h5>Docs</h5><a href="
|
||
/docs/fr/installation">Getting Started</a><a href="
|
||
/docs/fr/versioning">Versioning</a><a href="
|
||
/docs/fr/translation">Localization</a><a href="
|
||
/docs/fr/search">Adding Search</a></div><div class="footerSection"><h5>Community</h5><a href="/fr/help">Help</a><a href="/fr/users">User Showcase</a><a href="/fr/about-slash">About</a></div><div class="footerSection"><h5>Legal</h5><a href="https://opensource.facebook.com/legal/privacy/" target="_blank" rel="noreferrer noopener">Privacy</a><a href="https://opensource.facebook.com/legal/terms/" target="_blank" rel="noreferrer noopener">Terms</a></div><div class="footerSection"><h5>Social</h5><div class="social"><a class="github-button" href="https://github.com/facebook/docusaurus" data-count-href="https://github.com/facebook/docusaurus/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">docusaurus</a></div><div class="social"><a href="https://twitter.com/docusaurus" class="twitter-follow-button">Follow @docusaurus</a></div><div class="social"><div class="fb-like" data-href="https://docusaurus.io" data-colorscheme="dark" data-layout="standard" data-share="true" data-width="225" data-show-faces="false"></div></div></div></section><a href="https://opensource.facebook.com/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright"><span>Copyright © 2020 Facebook Inc.</span> Landing images by <a href="https://undraw.co/">unDraw</a>.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'199138890728411',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||
document.addEventListener('keyup', function(e) {
|
||
if (e.target !== document.body) {
|
||
return;
|
||
}
|
||
// keyCode for '/' (slash)
|
||
if (e.keyCode === 191) {
|
||
const search = document.getElementById('search_input_react');
|
||
search && search.focus();
|
||
}
|
||
});
|
||
</script><script>
|
||
var search = docsearch({
|
||
|
||
apiKey: '3eb9507824b8be89e7a199ecaa1a9d2c',
|
||
indexName: 'docusaurus',
|
||
inputSelector: '#search_input_react',
|
||
algoliaOptions: {"facetFilters":["language:fr","version:next"]}
|
||
});
|
||
</script></body></html> |