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 pour le style de menu 

 

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

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

<hr>

 

 

Changements pour l'alignement 

 

/* 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;
}