Références

• Slides de la présentation
• Article Protocols, not platfoms
• Article Local-First Software

Inscription

Pour faciliter la notation, veuillez remplir ce document avec votre nom, votre nom de compte sur le forgejo, votre mail (universitaire), et le nom de votre groupe.

Prise en main du site

Votre site est contruit avec Hugo. Pour éditer le contenu, on edite les fichiers .md (Markdown) qui se trouvent dans le dossier content. Une description succinte du format markdown se trouve dans les pages de la première version du site.

Git

Git est un logiciel de gestion de version et de collaboration. Git c’est pas si mal.

Installation

Sur Windows

• Ouvrir powershell

• Taper les commandes suivantes :

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
iwr -useb get.scoop.sh | iex
scoop install git hugo-extended

• Vérifiez l’installation de git en tapant git

• Vérifiez l’installation de hugo en tapant hugo

Sur MacOS

Option 1 : En passant par le gestionnaire de paquet “Homebrew”

• Ouvrir le terminal

• Tapez

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

• À la fin de l’installation brew vous indique qu’il y a d’autres commandes à taper pour pouvoir utiliser le logiciel

Il vous faut copier-coller ces lignes entourées de rouge dans votre terminal pour continuer

• Une fois l’installation de brew terminée installez git

brew install git

• Puis hugo

brew install hugo

Option 2 : En téléchargeant directement git et hugo

• Vous pouvez téléchargez un installeur ici : https://sourceforge.net/projects/git-osx-installer/

• Suivre les instructions pour installer Git

• Ouvrir un terminal et vérifier l’installation en tapant git

• Téléchargez Hugo ici : https://github.com/gohugoio/hugo/releases/download/v0.118.2/hugo_extended_0.118.2_darwin-universal.tar.gz

• Décompressez l’archive et mettez l’exécutable dans le dépot git dans lequel vous allez travailler (étape suivante).

Travailler sur le site en local (sur son ordinateur)

A. Copier le site

1. Choisissez un emplacement sur votre ordinateur pour placer le site (dans vos documents par exemple)

2. Créez un dossier qui accueillera ce site. Il est préférable de ne pas utiliser d’accent ni d’espace pour nommer le dossier. Vous pouvez par exemple l’appeler : site-ecologie-du-numerique

3. Placer vous avec votre terminal dans ce dossier. Pour ça vous avez deux options :

• faire un clic droit sur votre dossier et choisir « aller au terminal » ou « ouvrir un terminal au dossier »
• si aucune de ces propositions ne s’affiche en faisant le clic droit, vous pouvez ouvrir un terminal et reconstituer la chaîne de dossiers qui vous amène jusqu’à celui que vous avez créé. Pour connaître la chaîne, vous pouvez regarder en haut de votre fenêtre lorsque vous vous trouvez à l’intérieur du dossier vide que vous avez créé.

Maintenant que je connais la chaîne, je vais pouvoir la reconstituer en ligne de commande pour accéder à l’intérieur de mon dossier. Pour rentrer dans un dossier, vous pouvez faire la commande cd pour en sortir cd ..

Voilà par exemple comment je rentre dans mon dossier :

4. Copiez votre site qui se trouve pour le moment sur l’instance git de Myxonautes (dans le serveur situé à Reims). Pour ça, vous pouvez aller chercher l’url qui se trouve sur le dépôt de votre site dans l’instance en ligne.

Vous pouver ensuite retourner sur votre terminal et faire la commande git clone suivit de l’url copié. Dans notre exmple, cela donne :

Le site va se cloner dans un nouveau dossier qui a le nom du dépôt, vous pouvez vous déplacer dedans avec cd <nom-du-dossier>. Vous pouvez connaitre le nom de ce dossier avec la commande ls.

B. Visualiser le site

Pour voir les effets des changements du code sur le graphisme du site sans avoir à les publier en ligne, je peux visualiser le site sur mon ordianateur. Pour ça, je rentre dans le dossier, comme expliqué précédement, soit avec le clic droit soit en ligne de commande. Une fois que je suis dans le dossier copié je tape dans le terminal la commande hugo server

On peut alors consulter une version locale du site sur http://localhost:1313/.

Lorsqu’on fait des modifications sur les fichiers et qu’on pense bien à les enregister, le site se met à jour automatiquement. Si ce n’est pas le cas, c’est que votre navigateur a posé un cache. Pour enlever le cache, vous pouvez appuyer sur les touches Ctrl + Shift + R en même temps lorsque vous êtes sur la page.

Collaborer avec les membres du projet

Récupérer sur mon ordinateur les modifications partagées par les membres du projet

Afin d’être à jour sur mon ordinateur et de commencer à travailler sur la dernière version du projet, je peux “tirer” (pull en anglais) les modifications partagées par les membres du dépôt en faisant la commande git pull dans mon terminal lorsque je suis dans le dossier du site. Je peux maintenant commencer à travailler en modifiant les fichier.

Partager mes modifications

Une fois qu’une modification nous satisfait, on peut la valider en tapant dans notre terminal :

git add <le-fichier-modifié>

puis

git commit -m "Description de la modification"

git add sert à annoncer quelles modifications nous voulons valider. git commit crée un “point de sauvegarde” dans notre historique de modifications, associé à un commentaire qui décrit le changement.

Ensuite, on peut envoyer notre modification sur leur serveur pour la partager avec les autres et la publier sur le site.

git push

Les conflits

Lorsque deux personnes travaillent en parallèle, celle qui push en dernier est stoppée. Elle ne peut pas push car le dépôt a changé. Elle peut alors faire la commande git pull et ensuite git merge. Si les modifications concernent des fichiers différents, le merge permet de toutes les prendre en compte en les agrégeant. Le terminal nous emène dans une autre fenêtre que l’on quitte directement en faisant echap puis en écrivant :wq.

On peut alors faire la commande git commit -m"description de l'agrégation des modifications" puis git push.

Si par contre les modifications concernent la même zone d’un fichier, il y a alors un conflit. Pour le résoudre, on ouvre le fichier dans lequel vont s’afficher les deux versions de la même zone.

On pourra alors choisir la version que l’on souhaite garder en suprimant l’autre ou alors suprimer les deux et en écrire une nouvelle qui permette un compromis.

Lorsqu’on est satisfait, on peut faire la commande git commit -m"description de l'agrégation des modifications" et un git push.

Pour mieux comprendre, voici une vidéo qui montre la résolution d’un conflit entre César (le terminal de gauche) et Jeanne (celui de droite).

Déinstallation

Windows

Si vous voulez supprimer les logiciels installés :

scoop uninstall git
scoop uninstall hugo-extended
scoop uninstall scoop

MacOS

brew remove git
brew remove hugo
NONINTERACTIVE=1 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/uninstall.sh)"

STRUCTURATION DES DOSSIERS DU SITE

Un site généré avec Hugo, un générateur de site statique populaire, suit une structure de répertoire standard qui est définie par Hugo lui-même. Voici une structure de base typique d’un site Hugo :

1. Répertoire Racine (Nom du Projet) :

• Le nom de ce répertoire est généralement le nom de votre projet ou site Web.

2. Répertoire “archetypes” :

• Ce répertoire contient des modèles de contenu prédéfinis que vous pouvez utiliser lors de la création de nouveaux articles ou de nouvelles pages.
• Ces modèles peuvent définir des métadonnées initiales pour vos contenus.

3. Répertoire “content” :

• C’est ici que vous placez le contenu réel de votre site, comme les articles de blog, les pages, etc.
• Vous organisez généralement vos contenus dans des sous-répertoires pour les structurer en fonction de votre site.

4. Répertoire “data” :

• Vous pouvez stocker des fichiers de données structurées (par exemple, des fichiers JSON ou YAML) dans ce répertoire.
• Les données peuvent être utilisées pour alimenter des modèles ou des éléments dynamiques de votre site.

5. Répertoire “layouts” :

• Les modèles de mise en page (layouts) de votre site sont stockés ici.
• Hugo utilise ces modèles pour générer les pages finales de votre site en fonction de votre contenu.

6. Répertoire “static” :

• Les fichiers statiques, tels que les images, les fichiers CSS, JavaScript, etc., sont stockés ici.
• Ces fichiers sont copiés tels quels dans le site généré.

7. Répertoire “themes” (si un thème est utilisé) :

• Si vous utilisez un thème Hugo, il sera généralement installé dans ce répertoire.
• Le thème peut contenir des modèles de mise en page, des fichiers CSS, des configurations, etc.

8. Fichier de Configuration (ex. : config.toml, config.yaml, config.json, etc.) :

• Ce fichier contient des informations de configuration pour votre site Hugo, telles que les paramètres de base, les liens vers les thèmes, les paramètres de génération, etc.

9. Fichiers spécifiques au contenu :

• Dans le répertoire “content”, chaque page ou article de blog est généralement stocké dans un fichier distinct.
• Ces fichiers contiennent des métadonnées (comme le titre et la date) et le contenu réel de la page, généralement rédigé au format Markdown.

La structure de votre site Hugo peut varier en fonction de votre projet, notamment si vous utilisez des thèmes personnalisés ou si vous avez des besoins particuliers en matière d’organisation de contenu. Cependant, cette structure de base vous aidera à organiser efficacement vos fichiers source et à générer votre site statique avec Hugo.