Site Statique avec HUGO - Premiers pas

Installer et éditer du contenu

Vous souhaitez créer un blog et vous cherchez un outil facile d’utilisation ?
Le framework open-source HUGO peut vous intéresser.
C’est d’ailleurs l’outil que j’utilise pour générer le blog sur lequel vous vous trouvez actuellement.
Voici comment j’ai procédé pour installer HUGO sur ma machine Windows 7.

Installer le binaire sous Windows 7

Voir aussi la documentation officielle HUGO.

Arbo

On va créer une arborescence classique et très simple avec une partie pour l’exécutable et une autre pour les données.

c:
cd \
mkdir hugo
mkdir hugo\bin
mkdir hugo\sites

Download

Télécharger le zip des binaires Windows 7.
Lors de mon installation, il s’agissait de hugo_0.37_Windows-64bit.zip.

Extract

Extraire le zip (fichier hugo.exe) dans le répertoire C:\hugo\bin

Config

Pour plus de facilité, positionner le path du binaire dans le PATH via regedit (HKEY_CURRENT_USER\Environment\PATH) ou la ligne de commande.

Test

c:
cd hugo\bin
hugo version

Si tout fonctionne correctement, on a le résultat suivant

Hugo Static Site Generator v0.37.1 windows/amd64 BuildDate: 2018-03-07T17:56:57Z

Créer une enveloppe de site

On va créer notre blog dans le répertoire sites créé précédemment

c:
cd hugo\sites
hugo new site blog

Si tout fonctionne correctement, on a le résultat suivant

Congratulations! Your new Hugo site is created in C:\hugo\sites\blog.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

La structure créée par la commande précédente est la suivante

C:\hugo\sites\blog>dir

09/03/2018  16:18    <REP>          .
09/03/2018  16:18    <REP>          ..
09/03/2018  16:14    <REP>          archetypes
09/03/2018  16:21               105 config.toml
09/03/2018  16:21    <REP>          content
09/03/2018  16:14    <REP>          data
09/03/2018  16:14    <REP>          layouts
09/03/2018  16:18    <REP>          public
09/03/2018  16:14    <REP>          static
09/03/2018  16:14    <REP>          themes

Ajouter un thème

Choisir un thème

On choisit un thème parmi ceux disponibles pour HUGO ici.
Une fois le thème choisi on peut le dowloader ou le récupérer via git. Nous allons le downloader.

Download

On récupère le thème beautifulhugo.

Install

Extraire le zip de la branche voulue dans le répertoire C:\hugo\sites\blog\themes.
On a alors

C:\hugo\sites\blog>dir themes
07/03/2018  16:11    <REP>          .
07/03/2018  16:11    <REP>          ..
07/03/2018  16:11    <REP>          beautifulhugo

Modifier le fichier de configuration HUGO

Ajouter le nom du thème dans le fichier de configuration du projet C:\hugo\blog\config.toml.

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "beautifulhugo"

Tester le thème

On démarre le server de rendu HotReload de HUGO.
Ajouter “-D” à la commande ci-dessous si on veut voir les posts en draft.

C:\hugo\sites\blog>hugo server
←[K25lBuilding sites . ←[?25h
                   | EN
+------------------+----+
  Pages            |  7
  Paginator pages  |  0
  Non-page files   |  0
  Static files     | 33
  Processed images |  0
  Aliases          |  1
  Sitemaps         |  1
  Cleaned          |  0

Total in 234 ms
Watching for changes in C:\hugo\sites\blog{content,data,layouts,static,themes}
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disable
astRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Voici le rendu dans le navigateur
cms hugo hello theme

Ajouter du contenu

Pour créer un nouveau post

C:\hugo\sites\blog>hugo new post/mypost.md

La création du post est effective

C:\hugo\sites\blog\content\post\mypost.md created

Le contenu du fichier mypost.md ressemble à ça
On remarque que le post est créé en mode draft

---
title: "Mypost"
date: 2018-03-12T00:09:49+01:00
draft: true
---

On modifie le fichier mypost.md pour ajouter du contenu et supprimer le mode draft

---
title: "Mypost"
date: 2018-03-12T00:09:49+01:00
draft: false
---
# Hello World !

Voici le rendu dans le navigateur
cms hugo hello world

Bilan

On a installé HUGO, un thème et écrit notre premier post.
C’est assez simple à mettre en place et on est déjà capable de générer du contenu.
Bien sûr il reste à se familiariser avec la syntaxe Markdown et les nombreuses fonctions qu’offre HUGO avant d’être en mesure de réaliser un joli blog avec quelques fioritures.

cms  hugo  static  install  tuto 
comments powered by Disqus