Souhaitant créer mon propre thème Ghost, je n'ai pas trouvé un fichier docker-compose.yaml ou une méthodologie de création d'environnement de développement qui me convienne. Et oui je suis un peu flemmard parfois et je souhaitais quelque chose de simple à mettre en œuvre !

J'ai donc décidé de réaliser mon environnement... Et juste au cas où, je le partage ici pour ceux qui le souhaitent. 😘

Ghost étant écrit en node.js, ma première réflexion fut : "Ça va être simple de se faire un petit environnement de développement. Un joli NODE_ENV=development et fini !".

Et pour être honnête, c'était presque ça ! 😂

🚀 Quickstart 🚀

Afin de faire au plus simple pour ceux qui sont venus chercher l'essentiel, LE docker-compose.yaml qui va bien. Allons à l'essentiel :

version: '3.8'
services:
  ghost:
    image: ghost:3
    container_name: ghost-dev
    restart: unless-stopped
    environment:
      - NODE_ENV=development
    volumes:
      - ghost_content:/var/lib/ghost/content 
      - ./themes/mytheme:/var/lib/ghost/content/themes/mytheme
    ports:
      - 2368:2368
    networks:
      - lan

  node-tools-init:
    image: node:12-buster-slim
    container_name: ghost-tools-init
    restart: on-failure
    volumes:
      - ./themes/mytheme:/home/node/app/mytheme
    working_dir: /home/node/app/mytheme
    command: 'yarn install'
    networks:
      - lan


  node-tools:
    image: node:12-buster-slim
    container_name: ghost-tools
    restart: unless-stopped
    volumes:
      - ./themes/mytheme:/home/node/app/mytheme
    working_dir: /home/node/app/mytheme
    command: 'yarn dev'
    network_mode: none

networks:
  lan:
    name: ghost-lan

volumes:
  ghost_content:

Il sera bien évidemment nécessaire :

  • Que votre thème custom soit dans le dossier themes à la racine.
  • Pensez à modifier le fichier package.json afin de changer le nom du thème : surtout si vous forkez le thème Casper.
  • Connectez-vous à l'administration une première fois et modifiez le thème actif.

L'arborescence de mon projet :

.
├── docker-compose.yaml
├── themes
└── └── mytheme

🚗 Pimp My Dev 🚗

Quelques explications tout de même !

Avant tout chose, je souhaitais rester au plus près de mon environnement de production afin de n'avoir aucune mauvaise surprise lors du passage en production !

Dans mon fichier je déclare donc deux services :

  • Le CMS Ghost,
  • Une boite à outils node.js.

Commençons par la déclaration du CMS :

version: '3.8'
services:
  ghost:
    image: ghost:3
    container_name: ghost-dev
    restart: unless-stopped
    environment:
      - NODE_ENV=development
    volumes:
      - ghost_content:/var/lib/ghost/content 
      - ./themes/mytheme:/var/lib/ghost/content/themes/mytheme
    ports:
      - 2368:2368
    networks:
      - lan

networks:
  lan:
    name: ghost-lan

volumes:
  ghost_content:

J'utilise donc l'image officielle de Ghost :

version: '3.8'
services:
  ghost:
    image: ghost:3

Et je lance donc l'instance en mode development :

environment:
  - NODE_ENV=development

J'utilise un volume pour stocker de façon persistante mon installation de Ghost. Je ne souhaite pas refaire l'inscription à l'administration après chaque démarrage !  

Je place ensuite mon thème dans le dossier themes de Ghost :


    volumes:
      - ghost_content:/var/lib/ghost/content
      - ./themes/mytheme:/var/lib/ghost/content/themes/mytheme

Je ne précise pas de base de données, dans ce cas Ghost va utiliser une base de données SQLite qui sera bien suffisante pour mon environnement de développement !

Ensuite je vais lancer une instance à usage unique... ou presque ! Pourquoi ? Il est nécessaire d'exécuter au moins une fois la commande yarn install dans votre thème. Plusieurs options s'offrent à moi :

  • Installer yarn sur mon hôte et lancer la commande depuis celui-ci : Si j'installe Docker, ce n'est pas pour avoir node/yarn ou autre dépendances/logiciels sur mon hôte !
  • Exécuter la commande manuellement depuis mon instance Ghost par exemple :
docker exec -it ghost-dev bash
cd /var/lib/ghost/content/themes/mytheme
yarn install

Il est tout à fait possible de réaliser le premier lancement de cette façon.

Je préfère une autre solution, utiliser une instance qui va effectuer cette tâche :

  node-tools-init:
    image: node:12-buster-slim
    container_name: ghost-tools-init
    restart: on-failure
    volumes:
      - ./themes/mytheme:/home/node/app/mytheme
    working_dir: /home/node/app/mytheme
    command: 'yarn install'
    networks:
      - lan

Il était également possible d'utiliser un script ( entrypoint.sh ) sur ma dernière instance node afin de réaliser les deux opérations... Bref il existe énormement de solution, j'utilise celle-ci car :

  • facile à mettre en oeuvre,
  • pas de build.

Enfin je lance mon dernier conteneur pour exécuter yarn dev :

  node-tools:
    image: node:12-buster-slim
    container_name: ghost-tools
    restart: unless-stopped
    volumes:
      - ./themes/mytheme:/home/node/app/mytheme
    working_dir: /home/node/app/mytheme
    command: 'yarn dev'
    network_mode: none

J'utilise le mode network_mode: none car mon conteneur n'a aucun intérêt d'avoir accès à du réseau. Si vous le désirez, vous pouvez retirer cette ligne qui n'a qu'un intérêt très sécuritaire !

Vous voila enfin prêts pour customiser votre thème Ghost ! Il existe bien des façons de mettre en place un environnement de développement pour réaliser cette tâche. Je vous ai présenté ici ma façon de faire, aucun doute sur le fait qu'il existe sûrement d'autres moyens de réaliser cet environnement !

En tout cas, j'espère que cette présentation vous permettra de réaliser votre propre environnement afin de répondre à vos besoins !

Car finalement, la vraie question : un environnement de développement idéal c'est quoi ? Pourquoi je n'ai pas trouvé mon bonheur sur internet ?

En tout cas  n'hésitez pas à m'apporter des remarques ou des commentaires sur Twitter ! C'est toujours un plaisir d'avoir des retours ! 😘