Hugo - Création d'un site avec le thème Hugo Clarity
Mis à jour le 19/10/2022
Pour ce blog nous utilisons le générateur de sites statiques Hugo
avec pour thème Hugo Clarity.
Voici comment les installer.
L'installation qui suit a été réalisée sous Ubuntu 21.10 puis Ubuntu 22.04 lors de la mise à jour de ce billet.
Installation de Hugo
- Installation du gestionnaire de versions Git, il sera
utile pour récupérer le thème mais c'est aussi une bonne pratique de versionner
les sources du site :
sudo apt install git - Installation du gestionnaire de paquets Homebrew : voir le billet Ubuntu - Installation de Homebrew.
- Et enfin installation de Hugo avec Homebrew :
brew install hugo - Et on peut alors vérifier que Hugo est bien installé avec la commande :Qui doit donner selon la version installée quelque chose comme :
hugo versionhugo v0.104.3+extended linux/amd64 BuildDate=unknown
Initialisation du site
Nous pouvons créer maintenant un site nommé monsite avec la commande hugo new
va générer le squelette du site :
hugo new site monsite && cd monsiteAvec tree -F voici le contenu du répertoire monsite :
./ ├── archetypes/ │ └── default.md ├── config.toml ├── content/ ├── data/ ├── layouts/ ├── public/ ├── static/ └── themes/
Mise en place du thème Hugo Clarity
Le squelette du site créé à l'étape précédente ne suffit pas, sauf si l'on
désire vraiment 'partir de zéro' et se plonger dans les arcanes de Hugo.
La commande hugo server conduit à un 'Page Not Found' pas très engageant.
Il est préférable de choisir et installer un thème. Hugo propose de nombreux thèmes sur la page Hugo Theme : blog, portfolio, gallerie etc.
Le présent site utilise le thème Hugo Clarity, on peut le découvrir en action sur le site de son créateur.
Voici comment installer le thème Hugo Clarity. Toujours dans le répertoire
monsite récupérer le thème Hugo Clarity avec les commandes :
- Initialisation du repository Git :
git init - Récupération des source de Hugo Clarity :
git submodule add https://github.com/chipzoller/hugo-clarity themes/hugo-clarity - Suppression des sources du site donné comme exemple :
cp -a themes/hugo-clarity/exampleSite/* . - Suppression du fichier de configuration par défaut
config.toml:Noter que la configuration de Hugo Clarity s'effectue dans des fichiers regroupés dans le répertoirerm -f config.tomlconfig/. Le fichierconfig.tomlutilisé par le thème se trouve dansconfig/_default/config.toml. - Avec
tree -Fvoici maintenant le contenu du répertoiremonsite:./ ├── archetypes/ │ ├── default.md │ └── post.md ├── config/ │ └── _default/ │ ├── configTaxo.toml │ ├── config.toml │ ├── languages.toml │ ├── markup.toml │ ├── menus/ │ │ ├── menu.en.toml │ │ └── menu.pt.toml │ └── params.toml ├── content/ │ ├── about.md │ ├── about.pt.md │ ├── archives.md │ ├── homepage/ │ │ ├── about.md │ │ ├── index.md │ │ └── work.md │ ├── _index.md │ ├── post/ │ │ ├── bundle/ │ │ │ ├── building.png │ │ │ ├── building.webp │ │ │ └── index.md │ │ ├── emoji-support.md │ │ ├── _index.md │ │ ├── map.md │ │ ├── markdown-syntax.md │ │ ├── markdown-syntax.pt.md │ │ ├── math-typesetting.md │ │ ├── notices.md │ │ ├── placeholder-text.md │ │ └── rich-content.md │ └── search.md ├── data/ ├── layouts/ ├── LICENSE ├── public/ ├── README.md ├── resources/ │ └── _gen/ │ ├── assets/ │ │ └── sass/ │ │ └── sass/ │ │ ├── main.sass_d2bdc985df0e3369a538eb4e858e857f.content │ │ └── main.sass_d2bdc985df0e3369a538eb4e858e857f.json │ └── images/ ├── static/ │ ├── images/ │ │ ├── building.png │ │ ├── dollar.png │ │ ├── jane-doe.png │ │ └── Note-Snippet.gif │ └── logos/ │ └── logo.png └── themes/ └── hugo-clarity/ ├── archetypes/ │ └── post.md ├── assets/ │ ├── js/ │ │ ├── code.js │ │ ├── custom.js │ │ ├── functions.js │ │ ├── fuse.js │ │ ├── highlight.js │ │ ├── index.js │ │ ├── search.js │ │ └── variables.js │ └── sass/ │ ├── _base.sass │ ├── _components.sass │ ├── _custom.sass │ ├── _fonts.sass │ ├── main.sass │ ├── _mobile.sass │ ├── _override.sass │ ├── _syntax.sass │ ├── _utils.sass │ └── _variables.sass ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── exampleSite/ │ ├── archetypes/ │ │ └── post.md │ ├── config/ │ │ └── _default/ │ │ ├── configTaxo.toml │ │ ├── config.toml │ │ ├── languages.toml │ │ ├── markup.toml │ │ ├── menus/ │ │ │ ├── menu.en.toml │ │ │ └── menu.pt.toml │ │ └── params.toml │ ├── content/ │ │ ├── about.md │ │ ├── about.pt.md │ │ ├── archives.md │ │ ├── homepage/ │ │ │ ├── about.md │ │ │ ├── index.md │ │ │ └── work.md │ │ ├── _index.md │ │ ├── post/ │ │ │ ├── bundle/ │ │ │ │ ├── building.png │ │ │ │ ├── building.webp │ │ │ │ └── index.md │ │ │ ├── emoji-support.md │ │ │ ├── _index.md │ │ │ ├── map.md │ │ │ ├── markdown-syntax.md │ │ │ ├── markdown-syntax.pt.md │ │ │ ├── math-typesetting.md │ │ │ ├── notices.md │ │ │ ├── placeholder-text.md │ │ │ └── rich-content.md │ │ └── search.md │ ├── layouts/ │ ├── LICENSE │ ├── README.md │ ├── resources/ │ │ └── _gen/ │ │ └── assets/ │ │ └── sass/ │ │ └── sass/ │ │ ├── main.sass_d2bdc985df0e3369a538eb4e858e857f.content │ │ └── main.sass_d2bdc985df0e3369a538eb4e858e857f.json │ └── static/ │ ├── images/ │ │ ├── building.png │ │ ├── dollar.png │ │ ├── jane-doe.png │ │ └── Note-Snippet.gif │ └── logos/ │ └── logo.png ├── i18n/ │ ├── ca.toml │ ├── de.toml │ ├── en.toml │ ├── es.toml │ ├── fr.toml │ ├── ja.toml │ ├── no.toml │ ├── pt.toml │ ├── tr.toml │ ├── zh-CN.toml │ ├── zh.toml │ └── zh-TW.toml ├── images/ │ ├── article-toc.png │ ├── image-figure.png │ ├── image-inline.png │ ├── screenshot-darkmode.png │ ├── screenshot-mobile-darkmode.png │ ├── screenshot-mobile.png │ ├── screenshot.png │ ├── syntax-block.gif │ ├── tags.png │ ├── tn-darkmode.png │ └── tn.png ├── layouts/ │ ├── 404.html │ ├── _default/ │ │ ├── baseof.html │ │ ├── index.json │ │ ├── list.html │ │ ├── _markup/ │ │ │ └── render-image.html │ │ ├── rss.xml │ │ └── single.html │ ├── index.html │ ├── partials/ │ │ ├── analytics.html │ │ ├── archive.html │ │ ├── comments.html │ │ ├── excerpt.html │ │ ├── favicon.html │ │ ├── figure.html │ │ ├── follow.html │ │ ├── footer.html │ │ ├── func/ │ │ │ ├── getCodeBlockSettings.html │ │ │ ├── getJavascriptBundle.html │ │ │ └── getStylesBundle.html │ │ ├── header.html │ │ ├── head.html │ │ ├── hooks/ │ │ │ ├── body-end.html │ │ │ └── head-end.html │ │ ├── i18nlist.html │ │ ├── icons.html │ │ ├── image.html │ │ ├── logo.html │ │ ├── math.html │ │ ├── mode.html │ │ ├── nav.html │ │ ├── opengraph.html │ │ ├── pager.html │ │ ├── post-meta.html │ │ ├── related.html │ │ ├── scripts.html │ │ ├── search/ │ │ │ ├── scripts.html │ │ │ └── widget.html │ │ ├── share.html │ │ ├── sidebar.html │ │ ├── sprite.html │ │ ├── top.html │ │ └── utterances.html │ ├── search/ │ │ └── single.html │ └── shortcodes/ │ ├── notice.html │ ├── openstreetmap.html │ ├── video.html │ └── youtube.html ├── LICENSE.md ├── README.md ├── resources/ │ └── _gen/ │ └── assets/ │ └── sass/ │ └── sass/ │ ├── main.sass_d2bdc985df0e3369a538eb4e858e857f.content │ └── main.sass_d2bdc985df0e3369a538eb4e858e857f.json ├── static/ │ ├── fonts/ │ │ ├── Metropolis-BlackItalic.woff │ │ ├── Metropolis-BlackItalic.woff2 │ │ ├── Metropolis-Black.woff │ │ ├── Metropolis-Black.woff2 │ │ ├── Metropolis-BoldItalic.woff │ │ ├── Metropolis-BoldItalic.woff2 │ │ ├── Metropolis-Bold.woff │ │ ├── Metropolis-Bold.woff2 │ │ ├── Metropolis-ExtraBoldItalic.woff │ │ ├── Metropolis-ExtraBoldItalic.woff2 │ │ ├── Metropolis-ExtraBold.woff │ │ ├── Metropolis-ExtraBold.woff2 │ │ ├── Metropolis-ExtraLightItalic.woff │ │ ├── Metropolis-ExtraLightItalic.woff2 │ │ ├── Metropolis-ExtraLight.woff │ │ ├── Metropolis-ExtraLight.woff2 │ │ ├── Metropolis-LightItalic.woff │ │ ├── Metropolis-LightItalic.woff2 │ │ ├── Metropolis-Light.woff │ │ ├── Metropolis-Light.woff2 │ │ ├── Metropolis-MediumItalic.woff │ │ ├── Metropolis-MediumItalic.woff2 │ │ ├── Metropolis-Medium.woff │ │ ├── Metropolis-Medium.woff2 │ │ ├── Metropolis-RegularItalic.woff │ │ ├── Metropolis-RegularItalic.woff2 │ │ ├── Metropolis-Regular.woff │ │ ├── Metropolis-Regular.woff2 │ │ ├── Metropolis-SemiBoldItalic.woff │ │ ├── Metropolis-SemiBoldItalic.woff2 │ │ ├── Metropolis-SemiBold.woff │ │ ├── Metropolis-SemiBold.woff2 │ │ ├── Metropolis-ThinItalic.woff │ │ ├── Metropolis-ThinItalic.woff2 │ │ ├── Metropolis-Thin.woff │ │ └── Metropolis-Thin.woff2 │ ├── icons/ │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-256x256.png │ │ ├── apple-touch-icon.png │ │ ├── bar.svg │ │ ├── browserconfig.xml │ │ ├── cancel.svg │ │ ├── caret-icon.svg │ │ ├── carly.svg │ │ ├── close.svg │ │ ├── copy.svg │ │ ├── expand.svg │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon.ico │ │ ├── link.svg │ │ ├── mstile-150x150.png │ │ ├── order.svg │ │ └── site.webmanifest │ └── images/ │ ├── broken-image-error-msg.png │ ├── night-moon.jpg │ └── sun.svg └── theme.toml
Lancement du serveur
On peut alors lancer le serveur avec la commande :
hugo serverQui donne :
Start building sites …
hugo v0.104.3+extended linux/amd64 BuildDate=unknown
| EN | PT
-------------------+----+-----
Pages | 54 | 30
Paginator pages | 1 | 0
Non-page files | 2 | 0
Static files | 63 | 63
Processed images | 0 | 0
Aliases | 30 | 15
Sitemaps | 2 | 1
Cleaned | 0 | 0
Built in 97 ms
Watching for changes in /home/demo/monsite/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /home/demo/monsite/config/_default, /home/demo/monsite/config/_default/menus
Environment: "development"
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/ (bind address 127.0.0.1)
Press Ctrl+C to stop
Le site se trouve sur http://localhost:1313/. Et l'on obtient :
