Git 3 : Création d'un site web

Objectifs

Créer un site web statique avec Git et Gitlab Pages de l’université de Lille.

Création d’un site web en éditant des pages html

Création d’un dépôt

Normalement votre login est de la forme prenom.nom et un dépôt nomé projet permet de créer un site web accessible à l’adresse prenom.nom.gitlabpages.univ-lille.fr/projet/. Sauf si le projet est nommé prenom.nom.gitlabpages.univ-lille.fr, comme le domaine (la partie avant le premier /), alors le site sera accessible à la racine, c.-à-d. à l’adresse prenom.nom.gitlabpages.univ-lille.fr/.

Le grand problème avec nos login est que le caractère . empêche l’utilisation de https pour accéder au dépôt ! Donc en gros c’est inutilisable. La solution pour cela est de créer un groupe (dont le nom n’a pas de caractère .) et d’y ajouter le dépôt. Le site sera alors accessible à l’adresse https://groupe.gitlabpages.univ-lille.fr/projet/ ou directement à l’adresse https://groupe.gitlabpages.univ-lille.fr/ si le projet est nommé groupe.gitlabpages.univ-lille.fr.

Exemple :

On va créer un site web nommé apropos dans le groupe math-info-lesnuls qui va contenir une seule page « À propos » accessible à l’adresse math-info-lesnuls.gitlabpages.univ-lille.fr/apropos.

Créer un groupe nommé math-info-lesnuls (sans caractère .) sur https://gitlab.univ-lille.fr.
Créer un dépôt nommé apropos dans le groupe math-info-lesnuls : bouton New project > Create blank project > Project name : apropos, Visibility Level : Public, Initialize repository with a README : No > Create project.
Une page avec des instructions s’affiche. On suit les instructions :
- Git global setup : si on ne l’a pas encore fait, c’est le moment.
- Create a new repository : pour créer un dépôt sur votre ordinateur qui sera synchronisé avec ce dépôt. Exécuter les instructions dans un terminal, dans le dossier où vous voulez mettre le dossier apropos.

Créer un fichier index.html dans le dossier public avec le contenu suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Info pour les nuls</title>
</head>
<body>
    <h1>Info pour les nuls</h1>
    <p>Bienvenue sur « Info pour les nuls ».</p>
</body>
</html>

Ajouter un fichier .gitlab-ci.yml à la racine du dépôt, avec le contenu suivant :

pages :
    script :
        - echo "Publication du site web"
    artifacts :
        paths :
            - public

Faire git add, git commit et git push. Lepage web est accessible à l’adresse math-info-lesnuls.gitlabpages.univ-lille.fr/apropos.

Si l’adresse affiché contient des chiffres et lettres barbares, il faut aller dans Deploy > Pages et décocher Use unique domain, puis Save changes.

Remarque : On peut faire tout ça sur le wab, sans utiliser Git.

Cas plus général

Le fichier .gitlab-ci.yml permet de définir des étapes de construction du site web. Dans la section script on peut mettre des commandes pour construire le site web dans le dossier public.

Par exemple, on peut utiliser le script suivant pour copier tous les fichiers (sauf ce qui commence par .) dans le dossier public, puis convertir les fichiers markdown en html (avec pandoc), et à la fin renommer les README.md en index.html :

pages :
    image : alpine
    script :
        # installer pandoc
        - apk add pandoc
        # déplacer les fichiers (visibles) dans le dossier 'public'
        - mkdir .public
        - mv * .public
        - mv .public public
        # convertir les fichiers markdown en html
        - find public -name "*.md" -exec sh -c 'pandoc --from gfm --to html --standalone --metadata title="titre" "${0}" -o "${0%.md}.html"' {} \;
        # renommer les README.html en index.html
        - find public -name "README.html" -exec sh -c 'mv "${0}" "${0%README.html}index.html"' {} \;
    artifacts :
        paths :
            - public

Création d’un site web en utilisant un générateur de site web statique

Nous allons utiliser le générateur de site web statique Hugo pour créer un blog. Hugo est un générateur de site web statique qui permet de créer des sites web en utilisant des fichiers markdown.

Créer un dépôt nommé math-info-lesnuls.gitlabpages.univ-lille.fr dans le groupe math-info-lesnuls : bouton New project > Create blank project > Project name : math-info-lesnuls.gitlabpages.univ-lille.fr, Visibility Level : Public > Create project.

Suivre les instructions, comme dans le premier exemple, pour répliquer le dépôt sur votre ordinateur (par exemple dans un dossier math-info-lesnuls) :

> git clone git@gitlab-ssh.univ-lille.fr:math-info-lesnuls/math-info-lesnuls.gitlabpages.univ-lille.fr.git math-info-lesnuls
> cd math-info-lesnuls
> git switch --create main
> git push --set-upstream origin main

Télécharger et installer Hugo.
Créer un nouveau site web avec Hugo dans le dossier du dépôt de math-info-lesnuls.gitlabpages.univ-lille.fr :
```
> hugo new site .
```
Si le dossier n’est pas vide (contient le README.md par exemple) il faut rajouter --force :
```
> hugo new site --force .
```
Choisir un thème pour le site web à l’adresse https://themes.gohugo.io/. Par exemple pour le thème PaperMod, décompresser l’archive .zip dans le répertoire themes/PaperMode du site web.

Éditer le fichier hugo.toml pour ajouter le thème, changer le titre, changer l’adresse du site web, rajouter des menus. Ou le remplacer par hugo.yaml :

baseURL : https://math-info-lesnuls.gitlabpages.univ-lille.fr/
languageCode : fr-fr
title : Info pour les nuls
theme : PaperMod
menu :
    main :
        - name : Exposés
          url : /posts/
        - name : À propos
          url : /apropos/

Créer votre premier post (exécuter la commande dans le dossier du site web) :
```
> hugo new posts/mon-premier-post.md
```

Éditer le fichier content/posts/mon-premier-post.md pour ajouter le contenu suivant :

---
title : "Mon premier post"
date : 2024-02-13
---
Bienvenue sur mon premier post.

Lancer le serveur web de développement :
```
hugo server
```
Ouvrir un navigateur web à l’adresse http://localhost:1313/.
Rajouter d’autre postes éventuellement.
Arrêter le serveur web de développement avec Ctrl+C.

Créer un .gitlab-ci.yml à la racine du dépôt avec le contenu suivant :

image : alpine

pages :
    script :
        - apk add --no-cache --repository=https://dl-cdn.alpinelinux.org/alpine/edge/community hugo
        - hugo
    artifacts :
        paths :
            - public

Créer un fichier .gitignore :
```
.gitignore
.hugo_build.lock
public
```

Ajouter le site web au dépôt Git :

git add .
git commit -m "Première version du blog"
git push

Vérifier dans Deploy > Pages que Use unique domain est décoché.

Le site web est accessible à l’adresse math-info-lesnuls.gitlabpages.univ-lille.fr.

Objectifs#

Création d’un site web en éditant des pages html#

Création d’un dépôt#

Cas plus général#

Création d’un site web en utilisant un générateur de site web statique#

Objectifs

Création d’un site web en éditant des pages html

Création d’un dépôt

Cas plus général

Création d’un site web en utilisant un générateur de site web statique