---
title: Développer un site Web avec GoHugo
tags: lowcode, markdown, hugo
robots: noindex, nofollow
author: Julien Noyer
---
# Développer un site Web avec GoHugo.io
*The world’s fastest framework for building websites*
> © [Julien Noyer](https://www.linkedin.com/in/julien-n-21219b28/) - All rights reserved for educational purposes only
---
## Introduction
[Hugo.io](https://gohugo.io) est un outil en interface de commande qui permet de générer des site Web à partir de fichiers [*Markdown*](https://fr.wikipedia.org/wiki/Markdown). Le fait que [Hugo.io](https://gohugo.io) soit basé sur l'utilisation du [*Markdown*](https://fr.wikipedia.org/wiki/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*](https://fr.wikipedia.org/wiki/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](https://gohugo.io)
Pour installer [Hugo.io](https://gohugo.io) il faut disposer d'une machine compatible avec [Go](https://golang.org) car, il a été développé dans ce langage. Des installeurs [Hugo.io](https://gohugo.io) sont disponibles pour les systèmes suivants :
- MacOS
- Windows
- Linux
- OpenBSD
- FreeBSD
## Installation MacOs et Linux avec [Homebrew](https://brew.sh/index_fr)
Si vous utilisez [Homebrew](https://brew.sh/index_fr) vous pouvez installer [Hugo.io](https://gohugo.io) avec la commande suivante :
```bash=
brew install hugo
```
## Installation Windows avec [Chocolatey](https://chocolatey.org) ou [Scoop](https://scoop.sh)
Si vous utilisez [Chocolatey](https://chocolatey.org) vous pouvez installer [Hugo.io](https://gohugo.io) avec la commande suivante :
```bash=
choco install hugo -confirm
```
Si vous utilisez [Scoop](https://scoop.sh) vous pouvez installer [Hugo.io](https://gohugo.io) avec la commande suivante :
```bash=
scoop install hugo
```
## Vérifier votre installation
Pour vous assurer que [Hugo.io](https://gohugo.io) a bien été installé vous pouvez taper la commande suivante :
```bash=
hugo version
```
---
# Initialiser un nouveau projet [Hugo.io](https://gohugo.io)
Pour créer un nouveau projet [Hugo.io](https://gohugo.io) il est recommandé d'utiliser la commande `new site` dans un dossier spécifique. Cette commande créée la structure du projet :
```bash=
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 :
```bash=
git init
git clone https://github.com/adityatelange/hugo-PaperMod themes/hugo-PaperMod --depth=1
```
Les thèmes [Hugo.io](https://gohugo.io) sont des bibliothèques de styles pour nos pages web, il en existe une grande quantité (displinibles [ici](https://themes.gohugo.io)) 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 :
```bash=
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](https://gohugo.io)
Pour créer une page avec [Hugo.io](https://gohugo.io) il faut créer nouveau fichier [*Markdown*](https://fr.wikipedia.org/wiki/Markdown) et le placer dans le dossier `content` en utilisant la commande suivante :
```bash=
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](https://gohugo.io) dans le navigateur
Une fois toutes vos pages créée vous pouvez lancer le projet [Hugo.io](https://gohugo.io) dans le navigateur avec la commande suivante :
```bash=
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 :
```html
<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` :
```bash
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**](https://hackmd.io/@dws-teach/BJO72aLqL).
## Compiler le projet [Hugo.io](https://gohugo.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](https://gohugo.io) il faut utiliser la commande suivante :
```bash=
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
Sign in with Wallet
Connect another wallet