Commencer un site web [Brouillon]

Avant de commencer un nouveau site web, appelé nouveau projet, il faut d'abord installer Hugo. Une fois Hugo installé, on peut commencer un nouveau projet en lançant la ligne de commande.

Le site web installé est basé sur le thème Bearcub, un thème multilingue extrêmement basic qui n'utilise aucun javascript.

hugo new project [NOM DU PROJET]
cd [NOM DU PROJET]
git init
cd themes
git clone https://github.com/clente/hugo-bearcub.git themes/bearcub-[NOM DU PROJET]
echo "theme = 'bearcub-[NOM DU PROJET]'" >> hugo.toml

Le thème bearcub a besoin d'un field spécial sans quoi il ne lancera pas le server : il faut ajouter les informations suivantes au hugo.toml (à la fin)

[params.author]
    name = "John Doe" # Your name as shown in the RSS feed metadata

Une fois que cela est fait on obtient un beau site vide.

Structure des dossiers sur Hugo

Il est très important de comprendre la structure des dossiers sur Hugo avant de se lancer. 

Changements dans le fichier header.html 

J'ai changé le fichier pour rendre le tout centré

<!-- Centrage de l'image de tête et création d'un lien -->

<div style="display: flex;justify-content: center">
  <a href="{{ relURL .Site.Home.RelPermalink}}">
    <img style="border-style:none" src="/[imageaccueil].png">
  </img>
  </a>
</div>

<!-- Centrage du titre -->

<div style="display: flex;justify-content: center;">
  <a href="{{ relURL .Site.Home.RelPermalink }}" class="title">
    <h1>{{ .Site.Title }}</h1>
  </a>
</div>

<!-- Ajout de lignes horizontales pour faire des sections de menu -->
<hr>

<nav>{{- partial "nav.html" . -}}</nav>

<hr>

Changements pour l'alignement dans original.css

Voici tout ce que j'ai changé dans original.css

/* barre de navigation alignée au centre */

nav {
  display: flex;
  justify-content: center;
}

/* changements de la couleur des hyperliens du menu */

nav a {
  margin-right: 20px;
  font-weight: 600;
  color: #48a860;
}

/* ajouts de SML pour faciliter les images centrées et avec bordure*/

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; ;
  border-style: solid;
  border-width: 3px;
  border-color: #48a860;
}