Utilisez Gitlab.com pour déployer automatiquement votre site web Hugo

Cela fait maintenant plusieurs mois que j'ai migré mon site de Wordpress à Hugo. Alors, non, je ne vous expliquerai pas qu'est-ce que c'est Hugo car on l'a déjà fait. Non, je ne vous expliquerai pas pourquoi Hugo c'est mieux que Wordpress car on l'a déjà fait. Non, je ne vous expliquerai pas non plus comment récupérer le contenu de votre Wordpress car on l'a déjà fait

Dans cet article je vais vous expliquer comment, grâce au CI de GitLab, j'ai automatisé la publication de mes articles sur un hébergement Web qui dispose d'un accès FTP.

Prérequis

• Vous disposez d'un compte sur une instance GitLab
• Votre instance GitLab dispose d'un GitLab Runner qui se chargera du CI/CD
• Vous avez installé Hugo, généré votre site et installé votre thème

Description de processus

Dans notre exemple, nous allons "pusher" sur notre repository GitLab notre site hugo avec le fichier qui décris comment construire et publier notre site web. GitLab va lire ce fichier et démarrer une tâche qui se chargera d'exécuter chaque étape nécessaire à la construction du site pour terminer par publier le site généré sur le serveur FTP de votre hébergement web.

Le secret du déploiement automatique

GitLab CI dispose de fonctionnalités équivalentes à Travis-CI ou même notre bon vieux Jenkins avec l'avantage d'avoir tout sous la main et directement intégré à son projet.

Voici notre fichier .gitlab-ci.yml de référence :

stages:
  - build
  - deploy
build:
  stage: build
  image: jojomi/hugo
  script:
  - hugo version
  - git submodule update --init --recursive
  - hugo -d public_html
  artifacts:
    paths:
    - public_html
  only:
  - master
deploy:
  stage: deploy
  script:
    - apt-get update -qq && apt-get install -y -qq lftp
    - lftp -u $FTP_LOGIN,$FTP_PASSWORD $FTP_HOST -e "mirror -v --parallel=2 -e -R --ignore-time -p ./public_html/ www/ ; quit"
    - echo "deployment complete"
  dependencies:
    - build

• Le fichier est découpé en 2 étapes : build et deploy
• L'étape deploy dépend de la bonne exécution de l'étape build
• L'étape build ne s'exécutera que sur la branche master
• Dans build on fait référence à l'image docker jojomi/hugo qui sera utilisé pour construire notre site web
• Dans build on exécutera les commandes définies dans script qui se chargeront d'initialisé le thème de notre site et transformera votre site Hugo en site statique HTML dans le dossier public_html du conteneur
• Si tous se passe correctement, on passe à l'étape de deploy
• On installe les outils qui nous manque pour uploader des fichiers par FTP
• On termine par le transfert de fichier en tant que tel en publiant le contenu du public_html dans le répertoire www du serveur FTP de votre hébergement web.

Ajouter les variables de connexion FTP dans votre GitLab

Dans la dernière commande ci-dessus, nous utilisons des variables $FTP_LOGIN,$FTP_PASSWORD et $FTP_HOST pour protéger ses valeurs d'une simple lecture du contenu du repository.

Dans les paramètres de votre repository, rendez-vous dans Intégration et livraison continue et dans la section Variables ajoutez ces 3 noms de variables ainsi que les valeurs et n'oubliez pas de glisser le curseur sur Protégée

Voilà, vous êtes paré pour publier automatiquement votre site web à chaque push dans votre repository GitLab