Créer un site web avec Hugo

!!! important "Dans ce tutoriel, vous devez remplacer <name-of-project>, par le nom de votre site, ex: info2000)"

Étape 1: Construire le site

Création du site

hugo new site my-website

Cette commande va créer tout l'arborescence nécessaire à Hugo dans le dossier ./<my-website.

Modification du `config.toml`

Edit at least url to reflect the adress where it will be deployed by gitlab pages.
If your project is located at https://gitlab.com/myuser/agroup/myproject, then your website will be deployed at https://myuser.gitlab.io/agroup/myproject.

Ajouter les éléments suivants à votre config.toml:
baseurl = "https://myuser.gitlab.io/agroup/myproject/" title = "My website title" author = "Le Garage Numérique" [params] description = "A description for my website, that can be used on front page." favicon = "favicon.ico" logo = "my-logo.png" and place pictures in static folder.

Étape 2: Construire la home page

Création de la home page

hugo new _index.md

A new file is created at content/_index.md

Modification

---
title: "Mon super contenu"
date: 2020-12-08T00:13:21+01:00
draft: false
---

Ceci est le contenu de la home page pour mon site web

La partie encadrée entre --- s'appelle le front matter, il s'agit de méta-données utilisées pour le déploiement du site.

Création des templates

Dans le dossier layouts on créé l'arborescence suivante: ├── _default │ ├── baseof.html ├── partials | ├── head.html | ├── header.html | ├── hero.html | ├── styles.html └── index.html

??? note "layouts/index.html"
=== "Contenu" {% raw %} {{define "main"}} {{ partial "hero.html" }} {{end}} {% endraw %} === "Explication" Il s'agit d'un template spécifique à la page d'accueil.
On appelle le template layouts/default/baseof.html avec la directive {% raw %} {{define main}} {% endraw %}.
On appelle aussi partials/hero.html, qui est en quelque sort le slogan de bannière du site.

??? note "layouts/partials/hero.html" === "Contenu" {% raw %} <main class="hero" <div class="hero__caption" > {{ .Content }} </div> </main> {% endraw %} === "Explication" La directive {% raw %} {{ .Content }} {% endraw %} récupère le contenu de content/_index.md après les balises de l'en-tête Toml.

??? note "layouts/default/baseof.html" === "Contenu" ``` {% raw %} <html> {{- partial "head.html" . -}}

        <body>
            {{- partial "header.html" . -}}
            {{- block "main" . }}{{- end }}
            {{- partial "footer.html" . -}}
        </body>

    </html>
    {% endraw %}
    ```
=== "Explication"
    On appelle le partial `head.html`, puis on créé le `body` avec les partials `header.html` et `footer.html` .  
    Le bloc central, "main", sera construit à partir de chaque page.

??? note "layouts/partials/head.html" === "Contenu" ``` {% raw %} <head>

        {{ hugo.Generator }}
        <!-- CSS -->
        {{ partial "styles.html" . }}
    </head>
    {% endraw %}
    ```
=== "Explication"
    C'est ici qu'on placera notamment les informations de référencement **SEO**.  
    Entre double-accolades, on appelle des variables.   
    Quand celles-ci commencent par `$.Site.Params`, il s'agit des variables définies dans la rubrique [params] de `config.toml`

??? note "layouts/partials/header.html" === "Contenu" {% raw %} <header class="header"> <div class="header__title"> <a href="{{ "/" | relLangURL }}" class="header__title__link" alt="Home"> {{ if $.Site.Params.logo }} <img src="{{ $.Site.BaseURL }}{{ $.Site.Params.logo }}" class="header__title__logo" alt="{{ $.Site.Title }}"> {{ else }} {{ $.Site.Title }} {{ end }} </a> </div> </header> {% endraw %} === "Explication" Ici des classes CSS sont appellées (header, header__title, etc.).
Elles doivent être définies dans le fichier assets/css/style.css

Le CSS

??? note "layouts/partials/styles.html" === "Contenu" ``` {% raw %} {{ $style := resources.Get "css/style.css" }} {{ $base := resources.Get "css/base.css" }} {{ $bundle := $style $base | resources.Concat "css/bundle.css" }} {{ $css := $bundle | resources.Minify }} {% endraw %} === "Explication" On appelle les fichiers style.css et base.css dans assets/css/ et on les minimise, après les avoir concaténés.

??? note "assets/css/style.css" ``` /* HEADER */

.header {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--divider);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

.header__title {
    align-items: center;
    display: flex;
    font-size: 1.1rem;
    justify-content: flex-start;
    margin: 1rem 4.5rem;
}

.header__title__link {
    color: var(--primary-dark);
}

.header__title__logo {
    position: absolute;
    top: 8px; left: 20px;
    height: 55%;
    width: 13%;
    max-width: 20%;
    vertical-align: middle;
    transition: all .4s ease-in-out;
    margin-bottom: 0px;
    margin-top: 10px; 
    display : inline-block;
    margin-left: 8%;

/* HERO */
.hero {
    align-content: center;
    background-attachment: fixed;
    background-position: 100% 20%;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    height: 90vh;
    justify-content: flex-start;
    width: 100%;
}

.hero__caption {
    align-items: flex-start;
    animation: focus 0.95s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 4.5rem;
}

.hero__caption > h1 {
    font-size: var(--title);
}

.hero__caption > h2 {
    font-size: var(--subheader);
    margin-top: 0.45rem;
}

```

??? note "assets/css/base.css" ``` :root { /* Font Sizes */ --title: 3.998rem; --subtitle: 2.827rem; --header: 1.999rem; --subheader: 1.414rem;

    /* Colors */
    --primary: #ffc107;
    --primary-dark: #ffa000;
    --primary-light: #ffecb3;
    --primary-text: #212121;
    --secondary-text: #333333;
    --accent: #536dfe;
    --divider: #bdbdbd;
    --white: #fdfdfd;

    /* Breakpoints */
    --sm: 576px;
    --md: 768px;
    --lg: 992px;
    --xl: 1200px;
}

a {
    color: var(--accent);
}

a:hover {
    color: var(--primary-dark);
}

body {
    color: var(--primary-text);
}

figcaption {
    font-size: 0.9rem;
    text-align: center;
}

hr {
    color: var(--divider);
    opacity: 0.30;
    width: 25%;
}

i {
    font-size: var(--subheader);
}

input,
textarea {
    border: 2px solid var(--divider);
}

input:focus,
textarea:focus {
    border: 2px solid var(--accent);
}

pre {
    border: 1px solid var(--divider);
    overflow: auto;
    margin-bottom: 1.75rem;
    padding: 1rem 1.75rem;
    text-align: left;
    width: 100%;
}

textarea {
    resize: none;
}
```

8.5 KiB Raw Blame History