HUGO (Générateur de site web statique)

Environnement

• Ubuntu 18.04

Pré-requis

Installer git :

apt install git

Installation

Télécharger et installer le dernier paquet DEB à l'adresse : https://github.com/gohugoio/hugo/releases

wget https://github.com/gohugoio/hugo/releases/download/v0.60.1/hugo_0.60.1_Linux-64bit.deb

dpkg -i hugo_0.60.1_Linux-64bit.deb

Utilisation

Créer un projet :

mkdir -p ~/hugo/projet

hugo new site ~/hugo/projet

Congratulations! Your new Hugo site is created in /home/user/hugo/projet.

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

Télécharger un thème dans le dossier :

cd ~/hugo/projet/themes

git clone https://github.com/gesquive/slate

Générer le site :

hugo server --destination ~/hugo/docs/

Le site est visible à l'adresse : http://localhost:1313/

Compresser et envoyer le site vers le serveur web :

scp ~/hugo/docs/docs.zip web_server:/tmp

Modification du CSS pour centrer les vignettes en hauteur

Éditer le fichier ~/hugo/projet/themes/slate/static/css avec Atom et modifier la valeur padding:48px par padding:13% dans le bloc .container :

.container{box-sizing:border-box;min-height:10px;padding:13% 0;position:relative;text-align:center;justify-content:center}

Modification du CSS pour limiter les vignettes à 6 par ligne

Éditer le fichier /projet/themes/slate/static/css avec Atom et supprimer les blocs @media screen and (min-width:1632px) { à @media screen and (min-width:2448px) { :

@media screen and (min-width:1632px) {
 .tile-container {
  width:1428px
 }
}
@media screen and (min-width:1836px) {
 .tile-container {
  width:1632px
 }
}
@media screen and (min-width:2040px) {
 .tile-container {
  width:1836px
 }
}
@media screen and (min-width:2244px) {
 .tile-container {
  width:2040px
 }
}
@media screen and (min-width:2448px) {
 .tile-container {
  width:2244px
 }
}
@media screen and (min-width:2652px) {
 .tile-container {
  width:2448px
 }
}