Aller au contenu

Development

Premiers pas avec Jekyll et Docker

Apprenez à configurer Jekyll à l'aide de conteneurs Docker pour obtenir un environnement de développement propre et isolé. Ce tutoriel vous guide dans la création, la personnalisation et le déploiement d'un site statique sans installer Ruby ni Jekyll directement sur votre machine, une solution idéale pour les développeurs qui veulent un flux de travail uniforme sur n'importe quelle plateforme.

3 min de lecture

Jekyll est un générateur de sites statiques écrit en Ruby par le cofondateur de GitHub, Tom Preston-Werner. Jekyll analyse des gabarits Liquid et du contenu rédigé en Markdown pour produire du contenu statique qui peut ensuite être servi par n’importe quel service Web. Ce contenu Markdown est exempt de tout le HTML, la mise en page, les styles et les codes courts personnalisés qui encombrent souvent le contenu sur d’autres plateformes de blogue comme WordPress.

Si vous cherchez une bonne introduction à Jekyll, je vous recommande Jekyll Bootstrap.

Docker

Pourquoi utiliser Docker? Dans sa configuration de base, Jekyll ne fait que générer du contenu statique, mais il peut être enrichi à l’aide de plugiciels. Docker offre l’avantage de pouvoir fournir aux développeurs ou aux services de déploiement continu un conteneur simple, prêt à démarrer.

Docker Machine

Les utilisateurs de Linux peuvent se passer d’installer Docker Machine, mais devront installer Docker Compose. Les utilisateurs d’OS X devront lancer une instance de Docker Machine s’ils n’en ont pas déjà une en cours d’exécution. Assurez-vous d’avoir installé la plus récente version de Docker Toolbox avant de poursuivre.

docker-machine create --driver=virtualbox default
eval $(docker-machine env default)

Docker Compose

Les utilisateurs de Linux devront installer docker-compose séparément, car il n’est généralement pas inclus dans l’installation de Docker. Les instructions se trouvent sur le site Web de Docker.

Conteneur Jekyll

Jekyll dispose d’une image sur Docker Hub, ce qui rend le tout très simple.

Notez que je n’utilise pas la version GitHub Pages de ce conteneur. Si vous prévoyez utiliser GitHub Pages, remplacez l’étiquette d’image ci-dessous, latest, par pages. L’image pages reproduit plus fidèlement la configuration de Jekyll qu’utilise GitHub Pages.

Créez un fichier nommé docker-compose.yml à la racine de votre dépôt et entrez-y ce qui suit :

version: "2"
services:
  web:
    image: "jekyll/jekyll:latest"
    name: jekyll
    ports:
      - "4000:4000"
    volumes:
      - ./:/srv/jekyll
networks:
  default:
    driver: bridge

Démarrez ensuite un conteneur Docker avec Docker Compose :

docker-compose up -d

Ouvrez votre navigateur Web préféré et accédez à http://localhost:4000. Comme nous n’avons encore aucun fichier, le service Web utilisé par le conteneur affichera la liste du contenu de notre volume monté.

Si vous utilisez OS X, vous n’obtiendrez aucune réponse de localhost:4000, car Docker s’exécute dans une machine virtuelle. Vous devrez plutôt exécuter docker-machine ip default pour connaître l’adresse IP de Docker Machine, ou configurer une redirection de port dans VirtualBox. Avec la Docker Machine default en cours d’exécution, exécutez la commande suivante dans le Terminal pour configurer une redirection de port :

VBoxManage controlvm "default" natpf1 "http,tcp,,4000,,4000"

Vous pourrez alors accéder à http://localhost:4000 comme si le site était servi localement.

Initialiser le site

Pour initialiser le site, nous pouvons réutiliser le conteneur Jekyll existant. Exécutez jekyll new . --force dans le répertoire racine du dépôt à l’aide de la commande docker exec.

docker exec -it jekyll jekyll new . --force

Si nous actualisons notre navigateur, nous verrons le thème Jekyll par défaut recompilé ainsi que quelques pages et billets d’exemple.

Valider dans le contrôle de version

C’est le bon moment pour créer un dépôt Git, valider le site et le pousser vers votre dépôt. Remplacez <username> par le nom de votre compte GitHub :

git init
git add . -m "Initial Jekyll site"
git remote add origin git@github.com:<username>/<username>.github.io.git
git push -u origin master

Personnaliser la configuration de Jekyll

Tôt ou tard, vous voudrez modifier le fichier _config.yml de Jekyll et devrez redémarrer le service Jekyll. Pour ce faire, il faut en fait redémarrer le conteneur Docker.

docker-compose restart
Partager