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
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
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.