Déployer un contenu html sur gitlab [maj]

Résumé

Par rapport à Github le déploiement de contenus html sur Gitlab demande quelques manipulations supplémentaires. Les éléments qui suivent donnent la marche à suivre, sous forme de pas à pas. Ces opérations se font sans aucune ligne de codes.

Note

Une version je l’espère plus aboutie se trouve dans ce support de formation [Lien]

Prérequis:

Créer un compte sur [Gitlab]
Avoir une version d’une IDE compatible avec [Quarto] (Rstudio, Vscode après installation de l’extension).

Générer sur Gitlab un projet pour déployer du contenu html

En haut à droite cliquer sur New project
Cliquer sur Create from template
Sélectionner le template Pages/Plain HTML en cliquant sur Use template
Paramétrer et créer le projet:
- Donner un nom au projet qui s’ajoutera au nom de domaine
- Vous pour modifier le nom de domaine (voir la fenêtre ouverte dans l’image)
- Vérifier que le projet est de type public (visibility levels) si vous le souhaitez

Générer le template de déploiement d’une page html

1. Ouvrir la page pipelines et lancer le job — 1. Ouvrir la page **pipelines** et lancer le job

2. Exécuter le job associé à Pages/Plain HTML — 2. Exécuter le job associé à *Pages/Plain HTML*

3. Déployer la page associer au template

Dans la liste de navigation à gauche sélectionner Build et cliquer sur Pipeline. Cliquer en haut à gauche sur le bouton Run pipeline
Cliquer de nouveau sur le bouton Run pipeline
Cliquer sur pages.
Une page résumant les opérations et indiquant que tout s’est bien déroulé s’affiche
Dans la liste de navigation à gauche, aller sur Deploy et cliquer sur pages.
- Vous pouvez décocher use unique domain pour réduire la longueur du nom de domaine.
- Cliquer sur le lien qui a été généré.

En retournant sur le projet (ici tuto_assistools) Vous avez tous les fichiers qui vous permettrons de créer un projet avec Quarto et déployer le notebook ou le site sur gitlab.

Important

Ne pas supprimer ou modifier le fichier `gitlab-ci.yml lorsque, comme moi, vous n’y comprenez strictement rien.
Vous pouvez surpprimer le répertoire public ou les fichiers qu’il contient, mais je conseille de faire ceci sur le projet en local.

Vous pouver maintenant récupérer l’adresse du projet en cliquant sur le bouton clone pour créer votre projet de notebook ou site avec Quarto.

Avec Quarto

Créer un projet en mode VERSION CONTROL et utiliser le lien récupéré sur gitlab (bouton clone).
Même pour un simple notebook (une page html) il vous faudra un fichier de configuration _quarto.yml:
- Soit on le génère à partir d’un fichier texte.
- Soit on récupère un _quarto.yml existant.
Dans le fichier _quarto.yml, il vous faudra changer le répertoire de destination des fichiers d’affichage du notebook ou du site, qui doit s’appeler public.
- Par défaut Quarto génère un répertoire de destination appelé _site. Pour changer le répertoire: output_dir: public.

A minima pour un notebook, votre fichier _quarto.yml devra comporter les élèments suivants:

project:
  type: website
  output-dir: public

Vous pouvez supprimer les fichiers se trouvant dans le répertoire public (page html test).
Le nom du fichier .qmd du notebook ou de la page d’accueil du site doivent être nommés index.qmd.
Une fois la compilation de la page ou du site effectuée, on peut mettre à jour la page par defaut générée sur gitlab: git add . + renseigner le commit + push.

gitignore

Rappel: il est fortement déconseillé de synchroniser les dépôts sans ajouter une exception sur les bases de données. On fait cela simplement dans le fichier .gitignore, en ajoutant par exemple une exception automatique par type de fichier. Si on veut exclure les fichiers de type csv, on ajout au fichier .gitignore:

*.csv

Une fois synchronisé:

--- title: "Déployer un contenu html sur gitlab [maj]" categories: - Gitlab - Quarto author: - name: "Marc Thévenin" affiliations: - name: "Ined" date: 03/01/2024 image: img/gitlab_logo.png format: html: default abstract: | Par rapport à Github le déploiement de contenus html sur Gitlab demande quelques manipulations supplémentaires. Les éléments qui suivent donnent la marche à suivre, sous forme de pas à pas. Ces opérations se font sans aucune ligne de codes. --- ::: callout-note Une version je l'espère plus aboutie se trouve dans ce support de formation [[Lien]](https://mthevenin.gitlab.io/support_quarto/023-git3.html#gitlab) ::: Prérequis: - Créer un compte sur [[Gitlab]](https://gitlab.com/) - Avoir une version d'une IDE compatible avec [[Quarto]](https://quarto.org/docs/get-started/) (Rstudio, Vscode après installation de l'extension). ## Générer sur Gitlab un projet pour déployer du contenu html <br> ::: {layout="[25,25,25,25]" layout-valign="bottom"} ::: {.box_img} ![1. Créer un nouveau projet](img/img1.png){group="g1"} ::: ::: {.box_img} ![2. Projet à partir d'un template](img/img2.png){group="g1"} ::: ::: {.box_img} ![3. Sélectionner le template html](img/img2b.png){group="g1"} ::: ::: {.box_img} ![4. Paramétrer et créer le projet](img/img3.png){group="g1"} ::: ::: 1. En haut à droite cliquer sur **New project** {{< fa solid turn-down >}} 2. Cliquer sur **Create from template** {{< fa solid turn-down >}} 3. Sélectionner le template **Pages/Plain HTML** en cliquant sur **Use template** {{< fa solid turn-down >}} 4. Paramétrer et créer le projet: * Donner un nom au projet qui s'ajoutera au nom de domaine * Vous pour modifier le nom de domaine (voir la fenêtre ouverte dans l'image) * Vérifier que le projet est de type **public** (visibility levels) si vous le souhaitez ## Générer le template de déploiement d'une page html <br> ::: {layout="[33,33,33]" layout-valign="bottom"} ::: {.box_img} ![1. Ouvrir la page **pipelines** et lancer le job](img/img4.png){group="g2"} ::: ::: {.box_img} ![2. Exécuter le job associé à *Pages/Plain HTML* ](img/img5.png){group="g2"} ::: ::: {.box_img} ![3. Déployer la page associer au template ](img/img6.png){group="g2"} ::: ::: ::: {layout="[33,33,33]" layout-valign="bottom"} ::: {.box_img} ![4. Résumé du job](img/img7.png){group="g2"} ::: ::: {.box_img} ![5. Visualiser la page test (1)](img/img8.png){group="g2"} ::: ::: {.box_img} ![6. Visualiser la page test (2)](img/img9.png){group="g2"} ::: ::: 1. Dans la liste de navigation à gauche sélectionner **Build** et cliquer sur **Pipeline**. Cliquer en haut à gauche sur le bouton **Run pipeline** {{< fa solid turn-down >}} 2. Cliquer de nouveau sur le bouton **Run pipeline** {{< fa solid turn-down >}} 3. Cliquer sur **pages**. 4. Une page résumant les opérations et indiquant que tout s'est bien déroulé s'affiche {{< fa solid turn-down >}} 5. Dans la liste de navigation à gauche, aller sur **Deploy** et cliquer sur **pages**. * Vous pouvez décocher **use unique domain** pour réduire la longueur du nom de domaine. * Cliquer sur le lien qui a été généré. En retournant sur le projet (ici **tuto_assistools**) Vous avez tous les fichiers qui vous permettrons de créer un projet avec Quarto et déployer le notebook ou le site sur gitlab. ::: callout-important * Ne pas supprimer ou modifier le fichier **`gitlab-ci.yml** lorsque, comme moi, vous n'y comprenez strictement rien. * Vous pouvez surpprimer le répertoire **public** ou les fichiers qu'il contient, mais je conseille de faire ceci sur le projet en local. ::: ::: {.center} ::: {.column width="60%"} ::: {.box_img} ![](img/img10.png){width=70%} ::: ::: ::: <br> Vous pouver maintenant récupérer l'adresse du projet en cliquant sur le bouton **clone** pour créer votre projet de notebook ou site avec Quarto. ## Avec Quarto * Créer un projet en mode **VERSION CONTROL** et utiliser le lien récupéré sur gitlab (bouton clone). * Même pour un simple notebook (une page html) il vous faudra un fichier de configuration **`_quarto.yml`**: - Soit on le génère à partir d'un fichier texte. - Soit on récupère un `_quarto.yml` existant. * Dans le fichier `_quarto.yml`, il vous faudra changer le répertoire de destination des fichiers d'affichage du notebook ou du site, qui doit s'appeler **`public`**. * Par défaut Quarto génère un répertoire de destination appelé `_site`. Pour changer le répertoire: **`output_dir: public`**. A minima pour un notebook, votre fichier `_quarto.yml` devra comporter les élèments suivants: ```{.yaml} project: type: website output-dir: public ``` * Vous pouvez supprimer les fichiers se trouvant dans le répertoire **public** (page html test). * Le nom du fichier `.qmd` du notebook ou de la page d'accueil du site doivent être nommés **`index.qmd`**. * Une fois la compilation de la page ou du site effectuée, on peut mettre à jour la page par defaut générée sur gitlab: `git add .` + renseigner le `commit` + `push`. ::: callout-warning ## gitignore Rappel: il est fortement déconseillé de synchroniser les dépôts sans ajouter une exception sur les bases de données. On fait cela simplement dans le fichier `.gitignore`, en ajoutant par exemple une exception automatique par type de fichier. Si on veut exclure les fichiers de type **csv**, on ajout au fichier .gitignore: ```{.mf} *.csv ``` ::: Une fois synchronisé: - [[Le projet **tuto_assistools** sur gitlab | Ancienne version]](https://gitlab.com/marc6945542/tuto_assistools) - [[La page html déployée | Ancienne version]](https://marc6945542.gitlab.io/tuto_assistools/index.html)