Construire un blog avec Jekyll, Docker et GitLab

J'ai récemment reconstruit mon blog en utilisant Jekyll avec Docker et GitLab. Je vais détailler un processus similaire à celui que j'ai utilisé pour le créer.

L'objectif de cet article est de créer un blog Jekyll simple sans rien installer sur notre machine et d'automatiser le déploiement sur une page GitLab gratuite à l'aide de GitLab CI.

Structure du projet

J'ai choisi la structure suivante pour notre blog nommé project:

• src: les sources Jekyll
• dist: le site statique compilé

Le workflow de développement sera le suivant:

• apporter des modifications au dossier src en ajoutant de nouveaux posts, en modifiant les styles, etc.
• lancer Jekyll dans un conteneur Docker pour compiler et prévisualiser le site statique monté localement dans le dossier dist
• inspecter le site généré dans le dossier dist si nécessaire
• utiliser GitLab CI pour créer une page GitLab à partir du contenu du dossier dist

Configuration du projet

Créons le répertoire project pour héberger le nouveau blog et ajouter un fichierdocker-compose.yml contenant les éléments suivants:

version: '2'

services:
  jekyll:
    image: jekyll/jekyll
    volumes:
      - ./src:/srv/jekyll/site
      - ./dist:/srv/jekyll/_site
    ports:
      - "4000:4000"

Nous pouvons maintenant construire un nouveau projet Jekyll nommé site qui sera monté dans notre dossier localsrc:

$ docker-compose run jekyll jekyll new site

Si vous regardez dans votre répertoire project, vous verrez la structure suivante:

.
├── dist
├── docker-compose.yml
└── src
    ├── Gemfile
    ├── Gemfile.lock
    ├── _config.yml
    ├── _posts
    │   └── xxxx-xx-xx-welcome-to-jekyll.markdown
    ├── about.md
    └── index.md

Construire et prévisualiser le blog

Lorsque tout est en place, nous pouvons créer et servir notre blog tout en surveillant les changements:

$ docker-compose run --service-ports jekyll jekyll serve --source=site

Si vous naviguez sur http://localhost:4000, vous verrez votre nouveau blog!

Configuration Gitlab

Ajoutez un fichier .gitlab-ci.yml à la racine du projet, contenant les éléments suivants:

pages:
  image: alpine:latest
  script:
  - cp -R ./dist ./public
  artifacts:
    paths:
    - public
  only:
  - master

A partir de maintenant, une pipeline GitLab CI sera lancée à chaque fois qu'il y aura un push sur la branche master et montera le contenu de notre dossierdist en tant que racine de la page GitLab.

Installez un nouveau dépôt Gitlab appelé project:

Commit et poussez les modifications sur la branche master:

$ git init
$ git remote add origin git@gitlab.com:{username}/project.git
$ git add .
$ git commit -m "Initial commit"
$ git push -u origin master

Une nouvelle pipeline vient d'être créée. Une fois terminée, le blog est disponible sur https://{username}.gitlab.io/project/.

Mais, comme vous pouvez le voir, les chemins sont rompus car l’URL de base de la page est /project/.

Pour la changer, nous devons modifier /src/_config.yml:

baseurl: "/project"

Nous pouvons maintenant reconstruire le site:

$ docker-compose run jekyll jekyll build --source=site

Lorsque nos modifications sont validées et transférées au dépôt, les chemins sont corrects.

Workflow quotidien

Lorsque nous voulons travailler sur le blog, par exemple pour créer un nouveau post, il suffit de démarrer Jekyll pour créer et servir le site:

$ docker-compose run --service-ports jekyll jekyll serve --source=site

Le site sera automatiquement rechargé en cas de modification du dossier src

Pour le prévisualiser, nous pouvons naviguer sur http://localhost:4000/project/.

Lorsque nous sommes satisfaits des changements, nous pouvons les envoyer au dépôt GitLab et le blog sera automatiquement reconstruit.