Externaliser son CSS avec GitHub Pages
Hello hello ! Je vois de plus en plus de forums qui ont un css un peu trop conséquent. On custo à fond aujourd'hui et c'est génial, mais modifier son code directement dans le panneau d’administration peut vite devenir pénible. Entre les limites de l’éditeur, les sauvegardes qui plantent (et booom, tu perds tout ce que tu faisais, on coco le moment où ça te renvoie de façon random à l'accueil du PA hein), et l’absence de véritable historique des modifications, travailler depuis un fichier externe est souvent beaucoup plus confortable.
Et pour ça, une solution simple consiste à héberger son (ou ses) CSS sur GitHub. Tu peux ainsi modifier ta feuille de style directement depuis un repository, et garder un code mieux organisé. C'est notamment ce qu'on fait pour gérer l'amas de CSS sur Megaverse, et on va pas se mentir, c'est un gros game changer qui nous a bien aidé lors de notre dernière refonte.
Mais github peut rapidement PERDRE par sa complexité, j'ai mis un long moment à dompter la bête, et quand je m'en servais plus rarement, j'oubliais systématiquement comment ça marchait... alors je me dis qu'un tuto n'est jamais de trop !
Comment activer GitHub Pages ?
Depuis ton repository où tes fichiers sont créés et/ou uploadés :
2. Dans le menu latéral gauche, ouvre Pages.
3. Dans la section Source, sélectionne : Deploy from a branch et dans Branch, choisis la branche contenant ton CSS si besoin.
Dans la majorité des cas, il s’agira simplement de main
4. Clique sur Save, puis patiente quelques minutes.
Lorsque j’ai fait mes premiers essais, j’étais persuadée que ça n’avait pas fonctionné. En réalité, GitHub a simplement besoin de quelques minutes pour générer les fichiers nécessaires et "mouline" pour créer ta page.
En revenant quelques instants plus tard (toujours dans Settings > Pages), un message similaire à celui-ci apparaît :
C’est cette adresse qui nous intéresse !
Elle ressemble généralement à https://votre-pseudo.github.io/nom-du-repository/
Récupérer l’adresse de son CSS
Admettons que ton fichier CSS s’appelle stylesheet.css
et qu’il se trouve à la racine du repository (et non pas dans un sous-dossier), son URL sera alors généralement :
https://votre-pseudo.github.io/nom-du-repository/stylesheet.css
Tu peux la tester dans ton navigateur pour être sûr·e. Si le contenu de ton CSS s’affiche, c’est que tout fonctionne correctement !
Il ne reste plus qu’à utiliser cette URL sur le forum.
De mon côté, j'installe directement le CSS en haut de mon template overall_header , avec un code reprenant l'url (en reprenant notre exemple de plus haut) ainsi :
<link rel="stylesheet" href="https://votre-pseudo.github.io/nom-du-repository/stylesheet.css">
Une fois en place, toutes les modifications envoyées sur GitHub (en éditant ton fichier css) seront directement répercutées sur le forum une fois l'action "validée" (on peut contrôler son chargement via l'onglet "Actions" dans le repository).
Si les modifications n’apparaissent pas sur le forum
Forumactif et le navigateur peuvent parfois conserver une ancienne version du fichier en cache, c'est le "hic" de Github, et donc tes changements n'apparaîtront pas immédiatement. Pour changer ça, il suffit de faire un petit Ctrl + shift + R (windows) ou cmd + shift + r (mac) pour rafraichir sans cache (et le rappeler à tes membres également !)
Résultat : un CSS plus facile à maintenir, un historique de tes modifications et beaucoup moins de risques de perdre plusieurs heures de travail à cause d’une mauvaise manipulation dans le panneau d’administration. 😊
En espérant avoir été plutôt claire, et que ce petit tuto sera utile ! J'agrémenterai selon les commentaires si besoin. Je rappelle que je ne suis absolument pas pro, juste une petite rpgiste qui a envie d'aider comme elle peut 💜✨
