Personnalisez votre profil Github

On a tous un jour travaillé notre CV afin de nous présenter sous le meilleur jour auprès des recruteurs. Mais pour les développeurs, un profil Github peut être un allié de choix, dans le but de montrer ses compétences techniques, les technologies que l’on utilise et notre manière de travailler.

J’ai déjà vu des profils Github esthétiques, avec une présentation soignée, résumant les activités de la personne, mais je ne m’étais jusque-là jamais posé la question de savoir comment était réalisé cette page de présentation. Ces pages de présentation font un bel effet aux visiteurs, et j’ai voulu jouer le jeu et rendre mon profil plus sympa. Découvrons comment !

Readme.md, vous connaissez ?

Le readme (littéralement “Lisez-moi”) d’un projet, c’est, en théorie, un document qui présente le projet, les outils nécessaires à son installation et bien d’autres informations. Si le Markdown ne vous dit rien, allez ici.

Si sur Github les bibliothèques et packages de tout acabit ont fréquemment des readme exhaustifs, dans des organisations plus grandes, on trouve souvent un fichier minimaliste, voire vide. Il revient alors au développeur de se débrouiller pour démarrer le projet, comprendre ses dépendances afin de l’utiliser pleinement.

Maintenant que vous comprenez mieux ce qu’est le readme d’un projet, construisons le vôtre !

Il était un repo

Voici la page permettant de créer un nouveau repository sur Github.

Les étapes à suivre pour créer votre profil personnalisable sont les suivantes :

Créez un repository du même nom que celui de votre pseudo Github.
Réglez la visibilité du dépôt à “Public”.
Cochez l’option “Add a README file”.
Un clic sur le bouton “Create a repository” et votre profil sera prêt à changer de peau.

La métamorphose

Pour commencer la mue de votre profil, ouvrez le repository fraîchement créé et cliquez sur le bouton “Edit README” en haut à droite de la page.

Votre README apparaît presque vide, un contenu succinct avec quelques exemples est auto-généré lors de la création du repository.

Écrivez maintenant !

Si le Markdown vous est familier, vous êtes en terrain connu, les balises restent les mêmes :

les dièses avant un texte le transforment en titre (# h1, ## h2 etc.)
les éléments d’une liste doivent être précédés d’un saut de ligne, et doivent débuter par un tiret et un espace
les liens ont la structure suivante ![texte](lien)
les images utilisent la structure suivante ![alt](chemin “titre”)

Pour plus de détails, vous pouvez consulter l’article que j’ai fait sur le sujet l’année dernière ici.

Certains éléments reviennent fréquemment sur les profils Github déjà personnalisés, sous la forme d’icônes colorées comportant du texte. Il s’agit de badges, qui ne sont pas de simples icônes contrairement à ce que leur apparence pourrait nous laisser penser.

Les badges

On va utiliser ici un site web, qui propose également son outil sous forme de package npm afin de générer des badges tels que ceux-ci :

Les badges présentés ici sont des badges statiques, le badge est récupéré au chargement de la page par un appel à l’API de shields.io. Les badges statiques prennent jusqu’à 3 paramètres :

le label
le message
la couleur

L’URL qui se cache derrière le premier badge a la structure suivante https://img.shields.io/badge/Ludovic%20Déan-DevEnDevenir-yellow. On voit que les paramètres sont séparés par un tiret et les espaces remplacés par %20. Voici l’aspect de mon profil après ajout de badges.

Profil Github personnalisé avec des badges.

Vous remarquerez que le logo des technologies avec lesquelles j’ai travaillé apparaissent dans mes badges. Ceci est dû à l’ajout d’un paramètre logo dans l’URL, auquel on passe le nom de la technologie visée. À moins que vous cherchiez le logo d’un langage comme le WhiteSpace, vous devriez trouver votre bonheur.

Pour nous, l’utilisation de Shields.io s’arrêtera là, mais l’outil recèle bien des facettes, notamment les badges dynamiques JSON. Je vous laisse creuser, pour revenir maintenant à notre profil.

Aller plus loin

Mon profil est plus coloré avec les badges, certes, mais on pourrait peut-être faire mieux ?

Oui, c’est possible ! Pour faire mieux, on peut utiliser des widgets créés par des développeurs, permettant de mettre en valeur toutes sortes de données, provenant de Github (statistiques de l’utilisateur) comme de sources externes. Une recherche sur votre moteur de recherche préféré avec les mots-clés “widgets readme github” vous permettra de trouver LE widget qui est fait pour vous. Du widget qui affiche le dernier post de votre blog au nombre de visiteurs sur votre profil, les possibilités sont très larges et c’est à vous de voir à quel point vous voulez personnaliser votre readme.

Profil Github personnalisé avec des widgets.

Pour ma part, j’ai utilisé différents widgets, permettant d’afficher certains projets, certaines statistiques de mon profil sous un format plus agréable. J’ai utilisé les ressources des projets Github suivants :

Conclusion

J’avais déjà lu des articles à ce sujet, en restant dans l’idée que l’opération me prendrait du temps, mais l’expérience m’a montré que le temps nécessaire à rendre attrayant son profil Github était assez faible. A vue d’oeil, j’ai dû y passer deux heures grand maximum.

Vous avez maintenant toutes les clés pour “pimper” votre profil Github, à vous de jouer !

Cet article vous a plu ? Contactez-moi sur LinkedIn 😉 !