Développer un site Web avec GoHugo.io

The world’s fastest framework for building websites

© Julien Noyer - All rights reserved for educational purposes only

Introduction

Hugo.io est un outil en interface de commande qui permet de générer des site Web à partir de fichiers Markdown. Le fait que Hugo.io soit basé sur l'utilisation du Markdown lui confert un intérêt particulier, car le premier sujet à aborder pour le création d'outils numériques est la compatibilité des formats. Le format Markdown est en l'occurence l'un des plus adaptés à la transformation, car il est constitué d'une syntaxe simple.

Pour aller plus loin au sujet de la compatibilité : https://pandoc.org.

Installer Hugo.io

Pour installer Hugo.io il faut disposer d'une machine compatible avec Go car, il a été développé dans ce langage. Des installeurs Hugo.io sont disponibles pour les systèmes suivants :

MacOS
Windows
Linux
OpenBSD
FreeBSD

Installation MacOs et Linux avec Homebrew

Si vous utilisez Homebrew vous pouvez installer Hugo.io avec la commande suivante :


brew install hugo

Installation Windows avec Chocolatey ou Scoop

Si vous utilisez Chocolatey vous pouvez installer Hugo.io avec la commande suivante :


choco install hugo -confirm

Si vous utilisez Scoop vous pouvez installer Hugo.io avec la commande suivante :


scoop install hugo

Vérifier votre installation

Pour vous assurer que Hugo.io a bien été installé vous pouvez taper la commande suivante :


hugo version

Initialiser un nouveau projet Hugo.io

Pour créer un nouveau projet Hugo.io il est recommandé d'utiliser la commande new site dans un dossier spécifique. Cette commande créée la structure du projet :


hugo new site WEBproject
cd WEBproject

La commande cd WEBproject vous permet de vous positionner dans le dossier créé.

La commande new site génère un dossier qui contient la structure complète du projet dans lequel nous allons pouvoir éditer des fichiers pour créer nos pages web. Nous allons commencer par initialiser notre dossier avec git pour gérer nos sauvegardes puis installer un thème pour notre projet :


git init
git clone https://github.com/adityatelange/hugo-PaperMod themes/hugo-PaperMod --depth=1

Les thèmes Hugo.io sont des bibliothèques de styles pour nos pages web, il en existe une grande quantité (displinibles ici) dons les fichiers sont modifiables. Nous avons installé le thème PaperMod avec la commande précédentes, nous devons à présent l'activer en l'ajoutant dans le fichier de configuration config.toml avec la commande suivante :


echo 'theme = "hugo-PaperMod"' >> config.toml

Quelque soit le thème la démarche reste la même.

La commande précédente à éditer le fichier de configuration config.toml, c'est dans ce fichier qu'il est possible de définir la langue du projet et sont titre principal :

baseURL = "http://example.org/"
languageCode = "en-us"
title = "Ingénieur 2000 - Séquance Observer"
theme = "hugo-PaperMod"

Créer des pages web avec Hugo.io

Pour créer une page avec Hugo.io il faut créer nouveau fichier Markdown et le placer dans le dossier content en utilisant la commande suivante :


hugo new home-page.md

Le fichier créé contient un index dans lequel sont inscrits les informations sur le fichier, pour configurer le menu nous ajoutons la propriété menu comme indiqué dans le code ci-dessous :

---
title: "Home Page"
date: 2020-11-15T14:18:33+01:00
draft: true
menu: 
    main:
        name: "Home"
---

Une fois que le page est finie il faut modifier la valeur de draft en true;

Lancer le projet Hugo.io dans le navigateur

Une fois toutes vos pages créée vous pouvez lancer le projet Hugo.io dans le navigateur avec la commande suivante :


hugo server -D

Cette commande ne permet pas de compiler le projet pour le mettre en ligne mais permet de l'émuler afin de le rendre lisible dans un navigateur Web.

Le projet est ouvert sur le port 1313, il vous suffi de vous rendre à l'adresse suivante :

http://localhost:1313

Il est possibile de définir le port avec le drapeau --port.

Ajouter un fichier CSS personnalisé

Il est possible d'éditer les propriétés CSS du thème en chargeant un fichier CSS dans le fichier correspondant à la balise <head>du thème. Pour cela il faut ouvrir le dossier layouts/partials/(ou équivalant) pour éditer le fichier head.html. Dans ce fichier, il faut identifier la ligne correspondant à l'import du dernier fichier CSS pour ajouter la code suivant :

<link rel="stylesheet" href="/assets/css/overwrite.css">

La balise <link> référence un fichier overwrite.css qu'il faut créer est placer dans assets à l'intérieur du dosser content :

mkdir content/assets && mkdir content/assets/css
touch /content/assets/css/overwrite.css

Toutes les propriété CSS sont possible à l'intérieur de ce fichier. En savoir plus.

Compiler le projet Hugo.io

La compilation d'un projet est une principe qui permet de traduire la structure du projet et le fichier en site struture de site Web afin de pouvoir le mettre en ligne. Avec Hugo.io il faut utiliser la commande suivante :


hugo -D

Le projet compilé sera créé à la racine du projet dans un dossier public qui contiendra tous les fichiers à mettre en ligne. Il est encore possible d'éditer les fichiers compilés pour y ajouter des scripts par exemple.

Il est possible d'afficher le projet compiler dans le navigateur en ouvrant le fichier index.html.

Ressources

Index des liens vers les sujets traités dans ce document :

Cascading Style Sheets https://hackmd.io/@dws-teach/BJO72aLqL
Hugo https://gohugo.io
Markdown https://fr.wikipedia.org/wiki/Markdown
CommonMark https://commonmark.org
Learn Markdown in 60 seconds https://commonmark.org/help/tutorial/
Golang https://golang.org
Homebrew https://brew.sh/index_fr