Un site statique c’est quoi ? 

Plus besoin de PHP, de base de données, c’est un gain de vitesse apréciable.
Par contre, le site doit être regénéré entièrement à chaque ajout d’articles.
Le principe est simple, plus de partie administration, on écrit les articles dans un language de type wiki : le Markdown (md).
Le moteur va ensuite générer le code souhaité (HTML, XML, JSON), à l’aide de templates rédigés par l’auteur.
Une arborescence est constituée, il suffit d’envoyer le tout sur votre serveur web via FTP, RSYNC, SFTP.

Installation sous Debian 

Rendez-vous sur le site Hugo releases pour télécharger la dernière version (hugo_0.50_Linux-64bit.deb) puis installez-la.

# dpkg -i hugo_0.50_Linux-64bit.deb

Si vous souhaitez utiliser la coloration syntaxique dans le code, installez également python3-pygments :

# apt-get install python3-pygments

Vérifier l’installation correcte en tapant :

$ hugo version

Votre “moulinette” est prête à fonctionner et à générer des pages.
Pour obtenir de l’aide sur les commandes :

$ hugo help

Création du site 

Une seule commande suffit :

$ hugo new site `mon_blog`

Hugo construit alors une arborescence dans le répertoire du site :

archetypes - config.toml - content - data - layouts - public - static - themes

La structure du site 

  • archetypes : permet de définir les front matter par défaut pour les différents types de contenu.
  • config.toml : le fichier de configuration du site.
  • content : le contenu de votre site, comme les pages ou les articles.
  • data : les fichiers de données structurées (inutile pour un blog).
  • layouts : les fichiers personnalisés définissant la structure des pages (accueil, articles, listes).
  • public : les pages statiques générées qu’il faudra publier sur votre site web.
  • static : les fichiers qui ne changent pas (styles css, JavaScript et images).
  • themes : les fichiers de configuration du thème.

Écrire un article 

$ hugo new /post/toto.md

Cette commande va créer un nouveau fichier nommé test.md contenant les informations de l’article dans le répertoire /content/post/. Cet article est accessible à l’url http://localhost:1313/post/test/.
Une fois le fichier article créé, ouvrez-le dans un éditeur texte.

Le fichier article se comporte de deux parties :

  • Le Front Matter, entouré de signes +++
  • Le contenu de l’article lui-même, rédigé au format Markdown

Voici un exemple de Front Matter :

+++
categories = ["catégorie"]
date = "2013-05-01"
title = "titre de l'article"
description="description "
tags = ["tag1","tag2"]
cover = "img/image.jpg"
toc=true
+++

Le front matter contient les informations de l’article : la date, le titre, l’url, la description, le statut (draft ou publié), les tags et catégories.
Maintenant, il ne reste plus qu’à écrire votre article au format Markdown.

Ajouter un thème 

Allez sur le répertoire des thèmes Hugo et choisissez un thème (j’utilise le thème Dream Plus modifié).
Suivez la procédure expliquée sur la page de ce thème.

Configurer le site 

Le fichier config.toml contient tous les paramètres spécifiques au site : nom, url nom du thème, etc.
Exemple (pour le thème Dream-plus)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
baseURL = "http://pingouindesalpes.com/"
relativeURLs=true
canonifyURLs=true
languageCode = "fr"
defaultContentLanguage = "fr"
title = "Le pingouin de l'Oise"
theme = "dream-plus"
pygmentsCodeFences = true
pygmentsUseClasses = true
disqusShortname = "le-pingouin-de-loise"

enableRobotsTXT = true
enableEmoji=true

[blackfriday]
        hrefTargetBlank = true 

[params]
	author = "90v3Z - L3  P1n90U1n"
	description = "Un debianeux à la campagne."
	avatar = "/img/govez.png"
	motto = "Webmaster autodidacte."
	enableToc = true
	
	favicon = "/img/defaultFav.ico"

  	enableColorBG= true

	customCSS = ["/css/chroma-styles-trac.css"]
	
	enableTags = true
	enableCategories = true

	itemsPerPage = 4

	contentType = "posts"

	twitterEmoji=true

[social]
	email = "govez@pingouindesalpes.com"
	github = "govez"
	twitter = "govez"
	siteStartYear = 2018

Générer les pages statiques 

$ hugo

Cette simple commande générera les pages dans le répertoire public.

Afficher son site en local 

$ hugo server -D

Cette commande permet de visionner le site à l’adresse http://localhost:1313/hugo/

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
Started building sites ...

Built site for language fr:
0 draft content
0 future content
0 expired content
128 regular pages created
72 other pages created
0 non-page files copied
81 paginator pages created
49 tags created
10 categories created
0 publication_types created
total in 239 ms
Watching for changes in /home/govez/public_html/hugo/{data,content,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/hugo/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Déployer le site sur le web 

Afin d’envoyer les pages générées sur mon espace web, j’ai créé un petit script qui utilise lftp.
Pour mettre à jour le site, je le lance à chaque nouvelle publication.

$ ./synchro.sh

Le script synchro.sh pour l’hébergeur Hosteur :

1
2
3
4
5
6
7
8
#!/bin/sh
LFTP=$(which lftp) 
$LFTP -c "set ssl:verify-certificate no; 	 
open ftp://identifiant_ftp:motdepasse_ftp@clusterftp.hosteur.com; 
set net:limit-rate 25000 
lcd ~/repertoire_hugo/public; 
cd /httpdocs/hugo; 
mirror --continue --reverse --dereference --parallel=5 --delete --verbose"