Faire tourner son propre blog avec Docusaurus et Docker

Cet article reprend là où Exécuter Docusaurus avec Docker s'était arrêté. Lisez-le d'abord et créez les fichiers nécessaires.

Vous avez donc créé votre propre blog avec Docker et Docusaurus. En suivant les étapes expliquées dans l'article Exécuter Docusaurus avec Docker, vous disposez maintenant d'un blog dont la liste des articles est stockée sur votre machine, dans un dossier blog.

Allons plus loin.

Et quand votre blog est prêt à quitter votre machine, Encapsuler un site Docusaurus complet dans une image Docker l'empaquette pour la production, tandis que GitHub - Utiliser les Actions pour déployer ce blog le publie automatiquement à chaque push. Une fois en ligne, Comment auto-héberger Matomo vous dit qui le lit.

Dans l'article précédent, nous avons créé un dossier sur votre disque ; nous allons le réutiliser.

Lancez cd /tmp/docusaurus pour y entrer, puis ouvrez le dossier dans votre éditeur (de mon côté, je lance code .).

Dans Visual Studio Code, vous devriez voir ceci (sinon, relisez et exécutez les commandes du premier article) :

Et en lançant docker compose up --detach --build pour démarrer le blog, vous obtiendrez cet écran :

Personnaliser le nom, le titre, les icônes et l'URL de votre site​

Pour l'instant, on voit My Site en haut à gauche de l'écran.

Il y a un fichier très important dans Docusaurus : docusaurus.config.js (https://docusaurus.io/docs/api/docusaurus-config).

Nous devons l'adapter à nos envies.

Donc, pour copier le fichier docusaurus.config.js sur votre disque, lancez docker compose cp blog:/app/docusaurus.config.js /tmp/docusaurus/docusaurus.config.js (remplacez /tmp/docusaurus par le nom du dossier où vous avez créé votre blog, sur votre disque dur).

Une fois la copie faite, vous retrouvez le fichier dans votre éditeur :

Et la deuxième chose à faire pour pouvoir modifier le fichier et refléter les changements dans notre container Docker, c'est de monter le fichier.

Éditez votre fichier compose.yaml et ajoutez la ligne surlignée ci-dessous :

name: my_docusaurus_blog

services:
  blog:
    build: .
    ports:
      - 3000:3000
    user: 1000:1000
    volumes:
      - ./blog:/app/blog
      - ./docusaurus.config.js:/app/docusaurus.config.js

On y est presque : il faut recréer notre container, donc on relance docker compose up --detach.

En rafraîchissant la page web, on ne verra aucun changement mais... modifions maintenant le fichier docusaurus.config.js.

Ouvrez donc docusaurus.config.js et cherchez themeConfig, puis, à l'intérieur, le nœud navbar.

Vous trouverez quelque chose comme ceci :

Changez le texte comme vous voulez, par exemple :

navbar: {
  title: 'Welcome world!',
  logo: {
    alt: 'It\'s a photo of me ... or not',
    src: 'https://i.pravatar.cc/300',
  },
}

Sauvez, rafraîchissez votre navigateur et vous obtenez :

Étape suivante, toujours dans le fichier docusaurus.config.js : cherchez title, favicon et url, puis renseignez vos propres valeurs, par exemple :

const config = {
  title: 'MyBlog',
  favicon: 'https://www.iconarchive.com/download/i75799/martz90/circle/android.ico',
  url: 'https://yoursite.com',

  // ...
};

Le dossier src/pages​

Le dossier src/pages contient des fichiers comme index.md qui seront convertis en index.html (votre page d'accueil, donc). Vous pouvez aussi créer un fichier appelé tutorial.md (qui deviendra tutorial.html) et créer une entrée de menu dans votre barre de navigation avec /tutorial.html comme cible.

Vous devez copier le dossier du container vers votre host, comme vous l'avez déjà vu. Lancez la commande ci-dessous pour copier le dossier sur votre host :

$ docker compose cp blog:/app/src src▋

Vous devez mettre à jour votre fichier compose.yaml et ajouter la ligne surlignée ci-dessous :

name: my_docusaurus_blog

services:
  blog:
    build: .
    ports:
      - 3000:3000
    user: 1000:1000
    volumes:
      - ./blog:/app/blog
      - ./docusaurus.config.js:/app/docusaurus.config.js
      - ./src:/app/src

Le dossier static​

Ce dossier contient les fichiers qui seront copiés dans votre répertoire racine lors du déploiement de votre blog. C'est donc l'endroit parfait pour mettre, par exemple, un fichier .htaccess ou robots.txt.

Lancez la commande ci-dessous pour copier le dossier sur votre host :

$ docker compose cp blog:/app/static static▋

Et mettez à jour votre fichier compose.yaml comme ceci :

name: my_docusaurus_blog

services:
  blog:
    build: .
    ports:
      - 3000:3000
    user: 1000:1000
    volumes:
      - ./blog:/app/blog
      - ./docusaurus.config.js:/app/docusaurus.config.js
      - ./src:/app/src
      - ./static:/app/static

Vous avez maintenant les bases​

Poursuivez votre route, rendez-vous sur https://docusaurus.io/docs et lisez la documentation.

Trouvez aussi l'inspiration dans la Docusaurus Site Showcase : https://docusaurus.io/showcase.

Le clavier est à vous ! N'attendez pas, commencez à écrire votre blog dès maintenant !