site-jouf/content/tech/creation-site.md

title	date	lastmod	publishdate	description	weight	categories	tags
Création du présent site	2025-03-22T18:40:11+01:00	0001-01-01T00:00:00+01:00	2025-03-22T18:40:11+01:00	Tout ce que j'ai découvert et qui mérite d'être consigné	10	tech 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à !