course hugo from scratch until first web deploy

docs/cours/scripting/syntax.md

@@ -62,7 +62,7 @@ ma_commande 2>&1 |tee $LOG
 
 ### wc
 
-Compteur
+Compteur (de lignes, de mots...)
 ```
 wc -l myfile.txt  # donne le nombre de lignes du fichier
 ```

docs/divers/devops/hugo/hugo_from_scratch.md

@@ -1,45 +1,48 @@
 # Construire un site statique avec Hugo
 
-## Création du projet sur Gitlab
+La création d'un site avec Hugo se fait en plusieurs temps :   
+  1. [Installation d'Hugo](install_hugo.md)  
+  2. [Préparation de l'environnement de travail](#preparer-lenvironnement-de-travail)  
+  3. [Création du site en local](#creation-du-site-web-hugo-en-local)  
+  4. [Déploiement local](#deploiement-local)  
+  5. [Déploiement en ligne avec Gitlab Pages](#deploiement-en-ligne-avec-gitlab-pages)  
 
-### Création d'un nouveau projet
 
-![New blank Project](img/blank-project.png)
+## Préparer l'environnement de travail
 
-### Configuration du déploiement sur Gitlab Pages
+!!! important "**Dans ce tutoriel, vous devez remplacer  <name-of-project\>  par le nom de votre site, ex: info2000**"
 
-#### Création du fichier de déploiement `.gitlab-ci.yml`
+### Installer les dépendances 
+```
+sudo apt install git 
+```
 
-![New file](img/gitlab-new-file.png)
+### Créer le dossier du projet
+    
+```
+mkdir <name-of-project>
+```
 
-Name the file `.gitlab-ci.yml` and fill it with the following content:
+### Initialisez le versioning
 
-  ```
+```
-  # All available Hugo versions are listed here: https://gitlab.com/pages/hugo/container_registry
+cd <name-of-project>
-  image: registry.gitlab.com/pages/hugo/hugo_extended:latest
+git init
+```
 
-  variables:
+!!! tip "Pro tip"
-    GIT_SUBMODULE_STRATEGY: recursive
+    À partir de maintenant, vous pouvez utilisez git pour gérer les versions successives du code.  
+    Après chaque changement significatif, utilisez la commande `git add` pour ajouter les changements,
+    et `git commit` pour les valider.  
+    Utilisez une [*CheatSheet*](https://rogerdudler.github.io/git-guide/) pour vous aider à mémoriser les commandes. 
 
-  test:
+### Création du README
-    script:
-    - hugo
-    except:
-    - master
 
-  pages:
+```
-    script:
+echo "#<name-of-project>" > README.md
-    - hugo
+```
-    artifacts:
+Vous pouvez maintenant modifier ce fichier, qui doit présenter le projet et le fonctionnement du site internet, 
-      paths:
+en utilisant le format [Markdown](https://docs.roadiz.io/fr/latest/user/write-in-markdown/)
-      - public
-    only:
-    - master
-  ```
-
-#### Fais un *commit* sur les changements
-
-![Click on commit button](img/gitlab-commit-gitlab-ci.png)
 
 ## Création du site web Hugo en local
 
@@ -66,7 +69,7 @@ Ajouter les éléments suivants à votre `config.toml`:
         favicon = "favicon.ico"
         logo = "my-logo.png"
     ```
-
+and place pictures in `static` folder.
 
 
 ### Création de la home page
@@ -99,42 +102,62 @@ Dans le dossier `layouts` on créé l'arborescence suivante:
     │   ├── baseof.html
     ├── partials
     |   ├── head.html
-    |   ├── header.hmtl
+    |   ├── header.html
-    |   ├── footer.html
+    |   ├── hero.html
+    |   ├── styles.html
     └── index.html
     ```
 
 
-!!! note "**layouts/index.html**"   
+??? note "**layouts/index.html**"   
     === "Contenu"
         ```
-        {% raw %} {{define main}} {% endraw %}
+        {% raw %} 
+        {{define "main"}}
+        {{ partial "hero.html" }}        
         {% raw %} {{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 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/default/baseof.html**"
+??? 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 %}
         <!DOCTYPE html>
         <html>
-            {% raw %}{{- partial "head.html" . -}}{% endraw %}
+            {{- partial "head.html" . -}}
 
             <body>
-                {% raw %}{{- partial "header.html" . -}}{% endraw %}
+                {{- partial "header.html" . -}}
-                {% raw %}{{- block "main" . }}{{- end }}{% endraw %}
+                {{- block "main" . }}{{- end }}
-                {% raw %}{{- partial "footer.html" . -}}{% endraw %}
+                {{- 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**"
+??? note "**layouts/partials/head.html**"
     === "Contenu"
         ```
         {% raw %}
@@ -147,7 +170,8 @@ Dans le dossier `layouts` on créé l'arborescence suivante:
             <meta name="description" content="{{ $.Site.Params.description }}" />
 
             {{ hugo.Generator }}
-
+            <!-- CSS -->
+            {{ partial "styles.html" . }}
         </head>
         {% endraw %}
         ```
@@ -157,32 +181,299 @@ Dans le dossier `layouts` on créé l'arborescence suivante:
         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**"
+??? note "**layouts/partials/header.html**"
     === "Contenu"
         ```
-        header
+        {% 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"
-        This is why.
+        Ici des classes CSS sont appellées (`header`, `header__title`, etc.).   
+        Elles doivent être définies dans le fichier `assets/css/style.css`
 
-!!! note "**layouts/partials/footer.html**"
+
+#### Le CSS
+
+??? note "**layouts/partials/styles.html**"
     === "Contenu"
         ```
-        footer
+        {% 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 }}
+        <link rel="stylesheet" href="{{ $css.Permalink }}">
+        {% 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;
+    }
+    ```
+
+## Déploiement local
+
+Le déploiement local du site est très simple, il suffit d'utiliser la commande `hugo server`:   
+```
+makayabou@domani:~/dev/garagenum/team/webapps/hugo_from_start$ hugo server
+Start building sites … 
+
+                   | EN  
+-------------------+-----
+  Pages            |  0  
+  Paginator pages  |  0  
+  Non-page files   |  0  
+  Static files     |  0  
+  Processed images |  0  
+  Aliases          |  0  
+  Sitemaps         |  1  
+  Cleaned          |  0  
+
+Built in 1 ms
+Watching for changes in /home/makayabou/dev/garagenum/team/webapps/hugo_from_start/{archetypes,assets,content,data,layouts,static}
+Watching for config changes in /home/makayabou/dev/garagenum/team/webapps/hugo_from_start/config.toml
+Environment: "development"
+Serving pages from memory
+Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
+Web Server is available at http://localhost:1313/team/webapps/hugo_from_start/ (bind address 127.0.0.1)
+Press Ctrl+C to stop
+```
+
+## Déploiement en ligne avec Gitlab Pages
+
+### Création du projet sur Gitlab
+
+Connectez-vous à [gitlab.com](https://gitlab.com)
+
+![New Project](img/gitlab-new-project.png)
+
+![Use blank Template](img/blank-project.png)
+
+![Set path and description for project](img/gitlab-project-desc.png)
+
+Vous êtes redirigés vers la page d'accueil de votre projet, qui vous propose des instructions pour manipuler le projet en ligne de commandes depuis votre ordinateur.  
+Exécutez les instructions `Git global setup` seulement. Les autres instructions seront à réaliser plus loin dans ce tutoriel.
+
+![Gitlab instructions for CLI project management](img/gitlab-project-cli.png)
+
+### Création du fichier de déploiement
+
+En local, à la racine du projet hugo, on crée un fichier `gitlab-ci.yml`
+
+??? note "**gitlab-ci.yml**"
+    === "Contenu"
+        ```
+        # All available Hugo versions are listed here: https://gitlab.com/pages/hugo/container_registry
+        image: registry.gitlab.com/pages/hugo/hugo_extended:latest
+
+        variables:
+          GIT_SUBMODULE_STRATEGY: recursive
+
+        test:
+          script:
+            - hugo
+          except:
+            - master
+
+        pages:
+          script:
+            - hugo
+          artifacts:
+            paths:
+              - public
+          only:
+          - master
         ```
     === "Explication"
-        This is why.
+        Ce fichier `.yaml` (**attention aux indentations de 2 ++space++ **), définit des tâches qui sont exécutées automatiquement par Gitlab à chaque nouveau commit.  
+        
+        Deux tâches sont exécutées:  
+          - la tâche `test`, qui exécute hugo sur toutes les branches sauf `master`  
+          - la tâche `pages`, qui exécute hugo sur la branche master, et propose au téléchargement (les `artifacts`) le contenu du dossier `public` créé par le déploiement automatique de Gitlab.  
+
+### Liaison entre le projet local et le projet sur Gitlab
+
+#### Vérification de l'état du projet
+
+Assurez-vous à ce stade d'avoir exécuté `git add` et `git commit` pour tous les fichiers créés.  
+Vous pouvez vous en assurer avec la commande `git status`:  
+```
+makayabou@domani:~/dev/garagenum/team/webapps/hugo_from_start$ git status
+Sur la branche master
+Votre branche est à jour avec 'origin/master'.
+
+rien à valider, la copie de travail est propre
+```
+
+#### Liaison entre la branche locale et la branche master
+
+!!! important "Remplacer tous les éléments entre <\>"
 
 
 ```
+git remote add origin git@gitlab.com:<username>/<projectpath>.git
+git push --set-upstream origin master
 ```
-```
+**Après 2 minutes, votre site est désormais déployé à `https://<username>.gitlab.io/<projectpath>`**
-```
+
-```
-```
-```
-```
-```
 ```
 ```
 ```