Hugo, générateur de site statique
Rédigé par Paille
Aucun commentaire
Classé dans : Internet

Quoi t'est-ce et comment ça marche ?
Suivez le guide....
Site statique ? Quoi t'est-ce ?
Selon wikipédia :"C'"est une page web dont le contenu ne varie pas en fonction des caractéristiques de la demande, c'est-à-dire qu'à un moment donné tous les internautes qui demandent la page reçoivent le même contenu.Pour faire simple, un site statique est conçu de html (le fond) et de css (la forme), pas de php.
À l'inverse, une page web dynamique est générée à la demande et son contenu varie en fonction des caractéristiques de la demande"
Bon il peut y avoir d'autres trucs style JavaScript, mais on va pas compliquer pour le moment.
Pourquoi utiliser des sites statiques en 2018 ?
Pour un blog, une documentation ou un site vitrine (etc.) pas besoin de sortir l'artillerie lourde.....De plus, l'affichage sera beaucoup plus rapide et demandera moins de ressources pour s'afficher.
On peut aussi citer :
Alors, en pratique ?
On peut construire un tel site juste avec un éditeur de texte, mais cela peut s'avérer un peu long....Ou alors on peut utiliser un générateur de site statique qui nous simplifiera la tache. Dans notre cas Hugo.
Trouver Hugo
Le logiciel est disponible dans les dépôts de la plupart des distributions Gnu/Linux (sous windows et mac aussi, hein ?). Mais la version disponible n'est pas forcément la plus récente. Je vous conseille donc de le télécharger directement depuis le github du projet.Créer la base du site
Une fois le bouzin installé, nous allons créer notre premier site. Pour cela ouvrez un terminal et tapez :hugo new site ~/chemin/vers/votre/dossier/nom-du-site
Maintenant, dans votre répertoire vous devriez trouver les dossiers suivants : archetypes, content, data, layouts, static, thème et un fichier de configuration "config.toml". C'est le "squelette" de base de votre site.
Installer un thème
Bon, faut avouer que pour le moment c'est un peu tristounet, il vous faut un thème. Vous trouverez moult thèmes ici.(vous pouvez aussi créer le vôtre).Une fois le thème choisi, téléchargé et décompressé, copiez-le dans votre dossier "thème".
Dans votre thème vous devriez trouver un dossier "exampleSite", ouvrez le et copier le fichier "config.toml".
Remplacez le "config.toml" qui se trouve à la racine de votre site par celui que vous venez de copier. (Attention !! Les thèmes venant de Github sont intitulés "Non-de-thème-master", renommez votre thème en virant le "-master")
Pour info : L’installation d'un thème peut varier d’un thème à l’autre, lisez le fichier README.md fourni.
Pour installer tout ça, reprenez votre terminal, rendez-vous dans le répertoire du site et tapez un :
hugoCette commande va installer votre thème et générer le site. Un dossier "public" fera son apparition, c'est son contenu qu'il faudra mettre sur votre serveur pour mettre à disposition votre site sur le web.
Pour voir ce que ça donne utilisez la commande : hugo server, dans le répertoire du site.
paille@debian:~/hugo/mr-paille$ hugo server
| EN
+------------------+----+
Pages | 30
Paginator pages | 0
Non-page files | 2
Static files | 3
Processed images | 0
Aliases | 11
Sitemaps | 1
Cleaned | 0
Total in 318 ms
Watching for changes in /home/paille/hugo/mr-paille/{content,data,layouts,static,themes}
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
Votre site est maintenant accessible via cette url : http://localhost:1313/
Si vous faites des modifications le site sera réactualisé automatiquement.
Pour personnaliser le blog, il vous faudra modifier le fichier config.toml. Le css se trouve généralement dans themes/nom-de-theme/static/css/ le header, footer (etc.) se trouvent dans themes/nom-de-theme/layouts/partials/ .
Mais pour le moment c'est encore un peu vide, il vous faut des articles et des pages....
Créer un article :
Toujours dans le terminal :hugo new post/mon-premier-article.md
Le post sera créé dans le dossier "content/post" Les articles devront être écrits en HTML ou Markdown (Vous pouvez mélanger les deux.). Il existe des applications qui génèrent ces formats, mais ce n'est pas très compliqué et ça peut toujours être utile. Je vous conseille, donc, de vous y mettre....
L'entête de votre article ressemblera à ça (il peut y avoir des différences) :
+++Le contenu sera inséré après les "+++"
title: "votre titre"
description = ""
author:
- vous
date: '2018-03-26'
categories:
- Example
tags:
- tag1
- tag2
+++
Créer une page :
Les pages sont dans blog/content. Des fois il y a un dossier au nom de la page, ou juste un fichier titre_page.md.Pour créer une page il suffit de générer votre fichier.md avec un éditeur de texte, insérez une entête. :
+++Pour que votre page apparaisse dans votre menu, regardez dans config.toml et rajoutez votre page :
title = "Votre titre"
date = "2018-03-26"
+++
[[menu.main]]Voilà, pour le plus gros, après pour le reste la documentation d'hugo est complète (mais en anglais).
name = "Home"
url = "/"
weight = 1
[[menu.main]]
name = "nouvelle page"
url = "/nouvelle-page/"
weight = 2
Ca peut paraître un peu compliqué au début, mais on s'y fait vite.....