Site statique : Écrivez, sauvegardez, c'est publié !

2018-02-04 Technologie Diy

Hugo : déploiement automatique avec Dropbox

Avoir un site web qui se met à jour en créant un simple fichier sous Dropbox, ce serait pratique, non ? C’est ce que j’ai réalisé pour le site garamond.fr.

Principe et prérequis

Les générateurs de sites statiques, comme Hugo ou Jekyll, sont excellents. Cependant la publication de nouveaux articles nécessite souvent quelques manipulations.

L’objectif est d’utiliser la commande hugo --watch, qui reconstruit le site à chaud, en utilisant un répertoire Dropbox synchronisé sur le serveur. Ce répertoire (hugo-site/content) contient tous vos articles. Ainsi, lorsque vous écrivez même depuis votre smartphone comme je le fais en ce moment, le site se met à jour automatiquement et de façon transparente.

Pour que dropboxd (le démon Dropbox) et hugo-watch soient persistants, il est nécessaire d’avoir accès au serveur en SSH et de pouvoir y créer une session screen. Un accès en root est un plus qui permet de récupérer un environnement fonctionnel (hugo-watch et dropboxd) au redémarrage du serveur.

Synchronisation Dropbox

Étant donnée la quantité de données personnelles qui se retrouvent sur mon espace Dropbox, il n’est pas souhaitable pas qu’elles se retrouvent sur le serveur. - Pour cela, à l’aide d’une adresse mail secondaire (redirection, alias), créez un nouveau compte. - Sur votre compte personnel, créez ensuite un répertoire avec le contenu du site web (chez moi il est dans ~/Dropbox/Statique/garamond.fr/) et partagez-le en écriture seule vers votre autre compte. - Connectez-vous ensuite au serveur et installez dropbox :

  chez-moi:~$ ssh user@mon-serveur
  user@mon-serveur:~/$ screen -S console
  user@mon-serveur:~/$ cd ~ && wget -O - "https://www.dropbox.com/download?plat=lnx.x86_64" | tar xzf -
  user@mon-serveur:~/$ ~/.dropbox-dist/dropboxd

Création du site

Tout d’abord, créez une nouvelle console avec C-a c.

Créez ensuite un site web avec Hugo et synchronisez le répertoire en faisant un lien symbolique :

user@mon-serveur:~$ hugo new site garamond.fr
user@mon-serveur:~$ cd garamond.fr
user@mon-serveur:~/garamond.fr/$ rmdir content
user@mon-serveur:~/garamond.fr/$ ln -s ~/Dropbox/garamond.fr content

Reconstruction automatique du site

Vous pouvez ensuite surveiller les modifications du contenu. Pour cela, rien de plus facile :

user@mon-serveur:~$ cd ~/garamond.fr
user@mon-serveur:~$ hugo --watch

C’est fait ! Sortez ensuite de la session screen avec C-a d pour que les deux consoles que vous avez créées restent.

Remettre en place

Screen, Hugo et Dropbox sont susceptibles de planter. Dans ce cas, essayez de récupérer la session screen, et refaites les deux commandes cd garamond.fr/ && hugo --watch et ~/.dropbox-dist/dropboxd.