Création du présent site
Je débute en technos front, je n’avais jamais fait de site auparavant.
Je note donc ici tout ce qui m’a été utile de savoir pour faire ce site.
Pour faire ce site je n’ai pas voulu utiliser de CMS type WordPress, je n’y comprends rien, le WYSIWYG, c’est pas pour moi. Du coup j’ai voulu faire mon barbu et je me suis tourné vers Hugo.
Hugo
Hugo est un générateur de site statique, c’est-à-dire qu’il produit des fichiers HTML et CSS, auxquels on peut éventuellement ajouter du JS. Les CMS types WordPress sont dynamiques, les informations sont stockées dans une base de données et sont servies au client via une construction de la page au moment de la requête.
Bref je veux un truc plus léger et plus simple (?) à mettre en place, qui me laisse une grande liberté (parce que je peux être tatillon).
Le contenu est écrit avec mon éditeur de texte préféré sur mon ordinateur, je n’ai pas besoin d’être connécté à internet et d’aller sur l’interface d’administration de mno site. Une fois le contenu écrit, il faut bien là une connection internet pour pouvoir envoyer les modifications.
Hugo permet de ne se concentrer que sur le contenu, on écrit les text au format Markdown et Hugo permet de convertir tout ça en HTML, une fois la rédaction terminée.
Tout la partie visualisation est gérée par un thème, que l’on peut changer très facilement. Il en existe des centaines disponibles sur internet. Le site de Hugo en recense quelques-uns.
Petits mémos qui m’ont été utiles pendant la mise en place
Modification du thème
Dans l’architecture d’un site fait avec Hugo, les thèmes se trouvent dans le répertoire themes.
Aucun des différents thèmes que j’ai utilisé ne me convenait à 100% et j’ai donc voulu les modifier.
Pour modifier un thème, il n’est pas possible de faire une modification du thème directement étant donné qu’il est issu d’un dépôt git d’une autre personne.
La solution proposée par Hugo se trouve au cœur même de son architecture.
Il existe des dossiers archetypes, images, layouts et static qui permettent de surcharger les mêmes dossiers issus du thème.
CSS et SCSS
Le thème que j’utilise a un CSS qui a été compilé avec SCSS. SCSS permet de simplifier l’écriture du CSS, mais demande à être compilé en CSS avant de pouvoir être utilisé.
Pour utiliser SCSS, il faut installer le package npm sass via la commande :
npm install -g sass
Pour compiler un fichier SCSS en CSS, il faut lancer la commande
sass src/scss/theme.scss static/css/theme.css
Minifier le CSS
Le CSS produit à un impact sur les performances du site et celles-ci peuvent-être améliorées en “minifiant” le CSS produit.
Une lib appelée css-minify peut-être utilisée à cette fin, il suffit de l’installer avec npm :
npm install css-minify -g
Eton peut l’utiliser avec :
css-minify -f static/css/theme.css -o static/css/
qui créera un fichier theme.min.css dans le dossier static/css/.
Fichier qui pourra être utilisé dans le HTML !
Infrastructure
J’ai serveur qui regroupe beaucoup de services, dont la partie émergée est ce blog. Ce serveur est un VPS de chez OVH.
Sur ce serveur, j’ai installé Yunohost qui me permet d’installer très facilement des centaines applications dessus. Et donc ça permet notamment de mettre en place un site web, le présent site web.
Déploiement du site
Pour compiler les fichiers markdown en HTML il suffit lancer la commande
hugo
Cette commande crée un dossier public/ qui contient tous les fichiers HTML.
Pour publier ces fichiers sur le site, j’utilise Rclone.
Rclone me permet de transférer via SFTP ces fichiers sur le serveur avec la commande
rclone sync public/ accueil:www/
Et voilà !
Modifier