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Ă© (c'est d'ailleurs parce que j'ai vu beaucoup de personnes voulant passer par cette plateforme larguĂ©es), 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 !
Important Ă faire avant la manipulation pour que tout fonctionne :
Créer ton repository (logique) en public et pas privé
Y ajouter un fichier (uploading ou creating file, dans l'encart bleu d'accueil d'un repository vierge)
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 đâš