This article has the very simple objective of demystifying the elements that we want to have on the site (image in the articles, avatar, etc.). It is all the more subtle that the behavior you get with Hugo as a web server, a Hugo site deployed on gitlab Pages or a cloud cluster are not the same depending on the standard you choose to apply.
The purpose of this post is to clarify the way to proceed to facilitate the creation of post.
Disclaimer: the official tutorial is **very bad** in the case of a site that we want to deploy under gitlab Pages !
Page management
In the context of a site in blog mode, it is relatively simple.
The command hugo new <repertoire>/<nom d'article>.md allows you to add articles in MD format in the "directory" folder. Usually, we use "post" for a blog.
Page properties
The properties of a page are managed in the header of the created pages. They can be found in the following form:
---
title: "mon article"
date: AAAA/MM/DD/THH:MM:SS
draft: true
This is the standard generated by Hugo. There are two things to note:
- In a deployment in gitlab, only "draft: false" pages are displayed. The "draft: true" pages are ignored when building the site. It is then possible to build a site locally (with the -D option for draft) and test some pages while taking advantage of gitlab hosting.
- The basic version can be completed with other information about the created page:
- subtitle: to add a subtitle
- tags: to add tags to an article
- categories: to categorize the articles
In short, nothing crazy, but it is useful. So, the header of the article you are reading is :
---
title: "Gérer du contenu dans un site Hugo"
date: 2020-04-14T09:39:30Z
draft: false
subtitle: "Comment gérer du contenu dans un site statique généré par Hugo"
tags:
- français
- hugo-tips
categories:
- hugo
---
Image management
To manage the images displayed in an article, here is the solution I propose, and which has the advantage of working with hugo locally, but also with a gitlab deployment:
- Create a sub-folder "images" in the "content" directory
- Put the images you want to appear in your article
- add
in your article, where you want the image to appear.
Manage content related to themes (background photos, avatars, etc.)
In these cases, the management of local images can be complicated to manage if you want the operation to be identical whether you use the hugo engine locally or in the Gitlab Pages version.
That's why I propose to manage it in the following way:
Create a directory called "static" at the root of your site. Put the images you want to use directly in this directory, without putting them in a subdirectory. They will then be usable in your config.toml file by simply giving their name.