hugo est un générateur de site statique. Comment ça fonctionne ?
Pour être assez explicite (enfin j’espère). Le système fonctionne un peu comme un compilateur. Par exemple en c++. On écrit un code puis il est compilé (traduit) à la machine.
Globalement hugo reprend ce principe. On a des dossiers dans lesquelles il y a des thèmes des layout et du content. Quand on lancera une certaine commande . Le programme généra le site de façon compréhensive pour le navigateur (html css js) .
Les générateurs de site static sont une tendance de fond qui faut surveiller.
hugo en est un parmi tant d’autre je citerais gatby nextjs jekill nuxt hexo.
La liste des générateurs de site:
https://jamstack.org/generators/
Video: top 10 static site generator
hugo est basé sur le langage go.
Prérequis
Au préalable il vous faut avoir visual studio code et 2 extensions:
Markdown Preview Enhanced
Front Matter
La première vous permettra de voir en temps réel l’évolution de l’écriture de votre post, car le code pour écrire votre premier post est du Markdown.
La seconde sert pour l’amelioration du seo.
Installation homebrew
La deuxième chose, c’est qu’il vous faut homebrew d’installé.
homebrew est un gestionnaire de paquet pour mac os et il fonctionne sur linux. Pour l’installer il suffit d’entrer cette commande (commande qu’on retrouve sur le site officiel https://brew.sh/index_fr) sur le terminal
donc aux choix. soit celui de linux (émulateur de terminal) soit celui qui est intégrer dans vs-code (qui est le même)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"Une fois l’installation terminé un message vous dira de mettre les 2 commande suivante
echo 'eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"' >> /home/machin/.profile
/home/machin/.profile machin sera à remplacer par le nom utilisateur ne pas copier bêtement ce code. Il recommande d'installer aussi gcc mais ce n'est pas obligatoire reval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"Pour info ; Pour désinstaller homebrew faite :
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall.sh)"sudo rm -r /home/linuxbrewInstallation hugo
Maintenant que homebrew est installé on peut passer à l’installation de hugo
brew install hugoÇa installe le paquet hugo
Pour créer le blog
hugo new site monpremierblog« mon premierblog » étant le nom du dossier du blog (le nom du blog est géré par le fichier config.toml)
Il va générer un nombre de dossiers
archetypes : à l’intérieur de ce dossier on a default.md qui généra l’entête de l’article quand on fera hugo new monpremierarticle.md
content: c’est dans ce dossier qu’on trouvera les articles de blog. Ils sont écrits en Markdown. Qu’est-ce concrètement. C’est un langage qui ressemble un peu à html mais avec des différence par exemple pour écrire un h1 on aura:
html
<h1>Grand titre </h1>
markdown
# Grand titreOn retrouve assez facilement des sites qui parle de cette syntaxe et je vous conseille de l’apprendre notamment dans l’utilisation de github pour faire des fichiers README.md pour vos projets développement.
data: sert à stocker les fichiers de configuration
layouts: ça sert à faire des theme (pas la certitude à voir)
static: c’est un dossier qui stock les image au moment de la génération du site
themes : là ou on télécharge des thèmes .
config.toml: fichier de configuration
Pour plus de détails
https://gohugo.io/getting-started/directory-structure/
Télécharger le thème
cd monpremierblog
git clone https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/anankeLa commande entre dans le dossier monpremierblog
et je clone le thème depuis le depot github (ananke thème mis en exemple sur la doc https://gohugo.io/getting-started/quick-start/)
la liste des thèmes se retrouve sur :
https://themes.gohugo.io/
(Si git n’est pas installer, taper dans votre terminal sudo apt-get install git)
il faut éditer le fichier config.toml et ajouter le thème ananke
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = "ananke"On modifiera aussi le titre le langage code et si on connait le nom de son url
(la modif de l’url n’est pas obligatoire pour un test).
Le premier post:
https://gohugo.io/content-management/organization/
hugo new monpremierpost.mdAutomatiquement il va créer ce fichier
---
title: "Monpremierpost"
date: 2021-09-20T19:18:35+02:00
draft: true
---En dessous on met le code markdown et on n’oublie pas de mettre draft sur false.
Exemple:
---
title: "Monpremierpost"
date: 2021-09-20T19:18:35+02:00
draft: false
---
# Mon premier article
voici mon premier paragraphe
Pour voir le résultat:
hugo server -DEt allez sur l’adresse http://localhost:1313/ les changement se feront quasi en temps réels.
Pour générer le blog une fois que vous avez terminé faite:
hugo -DIl fera un dossier public avec tous les fichiers html css js.Par contre, si vous ouvrez le fichier index.html directement dans votre ordinateur, vous verrez que le css ne s’applique pas, car si vous regarder la ref généré le lien sera /css/style.css
Pour l’essayer il faudra avoir un serveur apache ou nginx ou un conteneur docker sur votre ordinateur, et à ce moment-là le site fonctionnera. Vous pouvez aussi le déployer sur netifly ou github pour essayer.
https://gohugo.io/hosting-and-deployment/
note: sachez que le résultat que vous avez quand vous faites hugo server -D sera le même que quand vous déploierez votre site.
Note +: pour faire un conteneur nginx rapidement il faut au préalable installer docker sur votre machine
sudo docker run -tid -p 8080:80 -v /home/user/monpremierblog/public/:/usr/share/nginx/html/ --name web nginxEt tapez l’adresse http://localhost:8080/
Si vous n’avez plus besoin du conteneur
sudo docker stop web
sudo docker rm web
#web est le nom que j'ai donné a mon conteneur. Pour vérifier la suppression.
sudo docker ps -a
C’est juste la base de hugo. Je n’ai pas expliqué comment mettre un menu et modifier le layout . La suite au prochain épisode ou pas .