Procédure de développement local du site web

À qui s’adresse cette page?

Vous êtes un développeur web qui participe à des modifications au site web version 2025. Vous voulez faire par exemple des modifications au HTML ou au CSS ou Javascript de ce site web.

Où se trouve le site web?

Au moment d’écrire ces lignes, le site web de Terre des jeunes est en processus de refonte.

Le site pré-2025 se trouve:

Le site post-2025 se trouve:

Vous voulez proposer un changement à cette page de documentation?

Proposez votre changement au https://github.com/tdjeunes/website-content/blob/master/docs/jekyll_pages/_posts/2025-03-30-site.md.

Prérequis

Avant de commencer:

(1) ayez une compréhension de base des outils Git, GitHub, Jekyll, et Docker.

(2) installez git sur votre ordinateur en ligne de commande.

(3) vous pouvez optionnellement utiliser GitHub Desktop si vous préférez une interface visuelle. (Les instructions dans cette page sont généralement pour la ligne de commande, donc si vous utilisez GitHub Desktop, vous aurez des adaptations à faire.)

(4) notez que ces instructions ont été testés sur mac OS et Linux. Si vous utilisez Windows, il est possible que vous deviez installer des logiciels tels Putty, Cygwin, ou autre. (Les instructions dans cette page sont pour Linux, donc si vous utilisez Windows, vous aurez des adaptations à faire.)

(5) comprenez le principe d’une branche git

(6) comprenez le principe d’une demande de changement, aussi appelé Pull Request, Merge Request, PR, ou MR. (Nous utiliserons le terme PR dans ce document).

(6.1) avoir un compte gratuit GitHub

(7) d’avoir accès en écriture au https://github.com/alberto56/tdj-comm. Notez que vous aurez accès en écriture à toutes les branches sauf main. Si vous voulez faire un changement à main, vous devez ouvrir une nouvelle branche, et ouvrir une PR.

(8) installez sur votre ordinateur Docker ou Jekyll (seulement un des deux est nécessaire).

Si vous installez Docker, vous devriez pouvoir rouler cette commande:

docker run --rm msoap/ascii-art cowsay 'Salut'

et vous devriez voir une vache qui dit “Salut”. Si vous n’arrivez pas installer Docker, vous pouvez installer Jekyll.

Si vous installez Jekyll, vous devriez pouvoir rouler cette commande:

jekyll

(9) assurez-vous d’avoir accès au https://github.com/users/alberto56/projects/16/views/1

Étape 1: installez une version locale du site sur la branche main

1.1. Si vous avez le code sur votre ordinateur, passez à l’étape 2, sinon passez à l’étape 1.2.

1.2. Clonez le site sur votre ordinateur

git clone git@github.com:alberto56/tdj-comm.git
cd tdj-comm

(À noter qu’il est possible que dans votre cas vous utilisiez “https://github.com/alberto56/tdj-comm.git” plutôt que “git@github.com:alberto56/tdj-comm.git”. Si ça marche, c’est OK.)

Étape 2: assurez-vous d’avoir le bon répertoire

Roulez la commande suivante:

cat .git/config

Vous devriez voir quelque chose qui inclut:

[remote "origin"]
  url = git@github.com:alberto56/tdj-comm.git

ou encore

[remote "origin"]
  url = https://github.com/alberto56/tdj-comm.git

Si vous utilisez GitHub Desktop, vous pouvez aussi choisir les “Repository Settings” pour le répertoire actuel et vous devriez voir quelque chose comme:

Primary remote repository (origin): git@github.com:alberto56/tdj-comm.git

ou encore:

Primary remote repository (origin): https://github.com/alberto56/tdj-comm.git

(L’important est que voyiez “alberto56/tdj-comm”. Si vous voyez autre chose, comme par exemple, “CECI-EST-MON-NOM-DUTILISATEUR-GITHUB/tdj-comm”, c’est que vous utiliesz un “fork” du répertoire principal. Cette façon de faire n’est pas recommandée ou supportée par cette documentation; si vous utilisez cette technique, assurez-vous de bien comprendre les concepts de synchronisation de branches entre forks GitHub.)

Étape 3: assurez-vous d’être sur la branche main

git branch

ceci devrait vous donner:

main

Sinon revenez sur la branche main en faisant:

git checkout main

Étape 4: assurez-vous que votre code soit à jour avec le code remote

Allez au https://github.com/alberto56/tdj-comm et vous verrez quelque chose comme:

Dans cet exemple, la dernière version du code sur le remote est:

4b0378f

Ensuite rouler ceci localement:

git log -n1

Vous devriez voir quelque chose comme:

commit 4b0378fa826df26ae08d2ca3a143c7c06de56fb3 (HEAD -> main, github/main)

Le numéro local du commit, dans cet exemple, commence par 4b0378f, donc on peut dire que c’est synchronisé avec le répertoire remote.

Étape 5: assurez-vous que votre code est clean

Votre code local ne devrait avoir aucun changement. Faites ceci:

git status

Vous devriez voir:

On branch main
Your branch is up to date with 'github/main'.

nothing to commit, working tree clean

Étape 6: choisissez une tâche sur laquelle travailler

Allez au https://github.com/users/alberto56/projects/16/views/1 et trouvez une tâche sur laquelle vous voulez travailler.

Assignez-vous à cette tâche et assurez-vous que cette tâche soit dans la colonne “En cours”.

Notez le numéro de cette tâche, par exemple #71.

Étape 7: faites une branche localement

git checkout -b 71

(Dans votre cas la branche sera probablement autre chose que 71, c’est un exemple pour fins d’illustration.)

Étape 8: lancez votre serveur Jekyll

Si vous utilisez Docker, faites:

docker network create tdj_comm
docker compose up

Si vous utilisez Jekyll, faites:

jekyll serve --watch --force_polling --verbose

Étape 9: voyez le site localement

Allez à une de ces addresses:

  • http://0.0.0.0:4000
  • http://127.0.0.1:4000
  • http://localhost:4000

Vous devriez voir une version locale du site

Étape 10: faites vos changements

Faites votre développement localement: changez le HTML, CSS, Liquid (langage de Jekyll), Javascript, images, etc.

Étape 11: ajoutez vos nouveaux documents et committez vos changements

git status
git add .
git commit -am 'mes changements'

Étape 12: poussez vos changements à GitHub

Assurez-vous que tous vos changements locaux soient commités:

git status

Devrait vous donner:

On branch 71
nothing to commit, working tree clean

(Dans votre cas la branche sera probablement autre chose que 71, c’est un exemple pour fins d’illustration.)

Maintenant poussez votre branche à GitHub:

git push origin 71

Ceci devrait vous donner quelque chose comme:

Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 10 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 299 bytes | 299.00 KiB/s, done.
Total 3 (delta 1), reused 0 (delta 0), pack-reused 0 (from 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
remote:
remote: Create a pull request for 'bla' on GitHub by visiting:
remote:      https://github.com/alberto56/tdj-comm/pull/new/71
remote:
To github.com:alberto56/tdj-comm.git
* [new branch]      71 -> 71

Étape 13: ouvrez une MR sur GitHub

Allez à:

https://github.com/alberto56/tdj-comm/pull/new/71

Appuez sur “Create Pull Request”

Étape 14: préparez votre PR pour révision

  • Allez à https://github.com/alberto56/tdj-comm/pulls
  • Trouvez votre PR
  • Cliquez dessus

Pour préparer votre PR pour révision:

14.1. Il est normal que ça dit “Merging is blocked”. Ceci veut dire que la PR doit être révisée.

14.2. Il doit y avoir un crochet vert et non un x rouge vis-à-vis des tests. Donc ça doit dire “All checks have passed”. Si c’est un x rouge, c’est que vos changements ont introduit une erreur de structure HTML ou autre erreur. Corrigez les erreurs.

14.3. Votre titre doit inclure le numéro de votre tâche, par exemple “#71”

14.4. Votre titre doit être une phrase claire expliquant vos changements, par exemple:

  • #71 Ajouter une section Pays sur la page d’accueil
  • #12345 changer la date du copyright pour que ce soit toujours l’année en cours

Voici des exemples à ne pas suivre

  • #12345 changement à la page d’accueil – ceci est mauvais car ce n’est pas clair quel changement.

  • changer la date du copyright pour que ce soit toujours l’année en cours – ceci est mauvais car ça en fait pas référence à une tâche

    14.5. aller à l’onglet Files Changed et assurez-vous que tous vos changements sont là, et que seuls vos changements sont là.

    14.6. dans l’onglet principal, conversation, il ne doit pas y avoir des conflits avec la branche main.

    14.7. changez le nom de votre PR pour y ajouter le mot “[PRET]” devant, par exemple:

  • [PRET] #71 Ajouter une section Pays sur la page d’accueil

Étape 15: Recommencez avec une autre tâche

Retournez à l’étape 3.

En cas de conflits inconnus

Si vous avez quelque chose comme

CONFLICT (content): Merge conflict in docs/index.html Auto-merging docs/jekyll_blogposts/_posts/2023-01-16-debut_des_activites_relatives_aux_projets_de_jardins_potager.md CONFLICT (add/add): Merge conflict in docs/jekyll_blogposts/_posts/2023-01-16-debut_des_activites_relatives_aux_projets_de_jardins_potager.md Auto-merging docs/jekyll_blogposts/_posts/2023-02-22-la_fete_continue.m

Faites

git reset –hard git clean -df

Et retournez a l’etape 2

Bonnes pratiques

BONNE PRATIQUE #1: utilisez toujours le même style d’espacement et de formattage.

Par exemple, si vous utilisez deux espaces pour l’indentation:

<div bla-bla>
  <div bla-bla>
    salut
  </div>
</div>

Vous ne devriez pas changer ça pour utiliser 4 espaces:

<div bla-bla>
    <div bla-bla>
        salut
    </div>
</div>

ou encore modifier la structure de formattage:

<div bla-bla>
    <div bla-bla>
        salut</div>
</div>

Ces deux derniers codes sont valides, mais causeront potentiellement des conflits avec d’autres branches

BONNE PRATIQUE #2: il est mieux de faire plusieurs petites PR plutôt qu’une PR qui fait plusieurs choses

Disons que vous faites une PR pour ajouter des drapeaux des pays, et qu’en même temps vous voulez enlever un bouton “Voir tous les membres”, il peut être tentant de faire ça dans la même PR, toutefois il est toujours mieux de faire plusieurs petits PR qui font une chose chaque,

  • #71 ajouter les drapeaux des pays et retirer le bouton “Tous les membres”

Ceci est OK, mais plus on tente de faire de changements dans une seule PR, plus il y a des risques d’erreurs et de conflits. Il est préférable d’ouvrir une nouvelle tâche pour retirer le bouton “tous les membres” (disons que c’est la tâche #12345) et de faire:

  • #71 ajouter les drapeaux des pays
  • #12345 retirer le bouton “Tous les membres”

Car il n’y a pas de lien entre ces deux tâches