Boostez vos opportunités professionnelles avec un portfolio GitHub gratuit

Cet article va vous permettre de créer un portfolio en un rien de temps grâce à votre compte GitHub. Les entreprises sont friandes des développeurs qui contribuent et se montrent actifs dans la communauté. GitHub est donc un bon moyen de faire sa propre publicité, et de trouver un job plus rapidement. Dans cet article, vous allez apprendre à créer un portfolio rapidement… et avec classe.

Pour réaliser votre portfolio, je vous invite d’abord à lire entièrement l’article, puis à récupérer les liens et les commandes à la fin de l’article.

L’astuce pour créer un portfolio élégant avec GitHub

GitHub a lancé un projet Jekyll / Ruby permettant de créer une page Web de type CV. Ce type de page est interprétable par GitHub Pages (hébergeur de site gratuit). Avec GitHub API, vous pouvez mettre à jour automatiquement votre page Web sans rien toucher.

Pour ceux qui ne connaissent pas Jekyll : ce service basé sur Ruby permet de convertir du contenu Markdown en site de type blog. Jekyll est une solution très pratique et écologique, générant des pages très légères. De plus, la modification de pages ne nécessite pas d’outil spécifique. Un éditeur de texte simple suffit.

Pré-requis pour se créer un portfolio GitHub

Pour ce tutoriel, vous avez besoin d’un compte GitHub (avec si possible des projets déjà créés ou des contributions à votre actif). Si ce n’est pas le cas, vous pouvez déjà mettre en place le système. Par la suite, il sera alimenté au fur et à mesure de vos contributions.

Afin de personnaliser votre portfolio, je vous invite à réaliser vos modifications en local sur votre ordinateur. Pour cela, Jekyll a besoin de Ruby, RubyGems, GCC et Make. Vous trouverez tous les modules d’installation sur cette page de Jekyll.

Vous devez aussi avoir installé Git, un outil qui permet de versionner le code. En effet, vous en aurez besoin pour récupérer le code GitHub et envoyer les mises à jour.

Créer votre portfolio GitHub

Présentation des dossiers et des fichiers

Vous pouvez ouvrir les fichiers YAML avec Sublime Text, PHPStorm, Visual Studio Code et même avec un bloc-notes (même si c’est plus compliqué).

Fichier _config.yml

Par défaut, le portfolio se présente en deux colonnes. Il y a une barre latérale avec vos informations de base. Vous pouvez changer de layout (mode de présentation) en choisissant parmi ces deux valeurs possibles :

• sidebar
• stacked

L’attribut style peut prendre une de ces valeurs :

• light
• dark

L’attribut projects est particulièrement intéressant. Celui-ci fonctionne de deux manières possibles : automatique ou manuel. Par défaut, votre portfolio contiendra au maximum vos 9 derniers projets publics.

Vous pouvez trier les projets par date d’envoi de code, ou bien par nombre d’étoiles reçues grâce à l’attribut sort_by :

• pushed
• stars

La propriété limit indique le nombre maximum de projets à afficher.

L’attribut exclude est important. En effet, si vous avez plus le profil d’un contributeur que d’un créateur, il est intéressant de mettre la valeur false à la sous-propriété forks. Car, par défaut, les forks sont exclus du portfolio.

Si vous avez des profils (intéressants professionnellement) sur les réseaux sociaux, je vous encourage à dé-commenter et modifier les lignes correspondantes. Pour que cela fonctionne, vous devez aussi supprimer le # sur l’attribut social_media.

Concernant les centres d’intérêts, le projet GitHub propose par défaut CSS / Web design / Sass. Pour le moment, ce n’est pas automatique. Vous devez manuellement modifier la partie topics. Vous retrouverez les liens facilement sur GitHub.

Création de pages supplémentaires

Vous pouvez créer d’autres pages à la racine du dossier. Les pages peuvent être de type Markdown ou Html. Ces pages sont interrogeables de cette manière : <nom utilisateur>.github.io/<nouvelle page>.

Cependant, il faut ajouter ces lignes dans l’en-tête du fichier :

Création d’une zone de blog

Le modèle de base contient une zone de blog, mais celle-ci est désactivée. En effet, il faut avoir publié au moins un article pour voir cette rubrique. Pour cela, rendez-vous dans le dossier _posts. Vous y trouverez un premier article hello-world. Pour créer des articles, vous devez respecter cette norme :

Le fichier doit obligatoirement contenir l’en-tête suivante :

Vous pouvez aussi dupliquer l’article existant et vous en servir comme modèle. Pour que celui-ci apparaisse, vous devez passer la valeur de l’attribut published à true. Actualisez votre page d’accueil et tout en bas, vous verrez apparaître une nouvelle rubrique.

Modification du style et des modèles du portfolio

Toute la partie intelligence, code, style ainsi que le mécanisme se trouve dans le répertoire _includes. Tout est bien organisé en sous-catégories : l’en-tête, le bas de page, les projets…

Pour les layouts (templates) globaux, vous devez vous rendre dans le répertoire _layouts.

Et si vous désirez rajouter du style CSS, il suffit d’éditer le fichier assets/styles.css.

Bien entendu, si vous avez des questions, les commentaires sont à vous.

Conclusion

Maintenant que vous avez lu toutes les étapes, vous pouvez retrouver le récapitulatif des actions à effectuer ainsi que des commandes en remplissant le formulaire ci-dessous. Si vous êtes satisfait·es de notre article, un petit café de soutien et / ou un partage nous encouragera à continuer d’écrire.

ATTENTION : Notre site évolue et ne propose plus d’envoi automatique pour le moment. Vous devez donc adresser vos réponses à l’adresse contact@les-enovateurs.com. Merci !

Désormais, vous êtes prêt·es à envoyer votre portfolio sur toutes les plateformes en ligne. Nous vous souhaitons de trouver un job en or grâce à cette technique !

🗯️ Utilisez-vous d’autres services Web / outils pour rendre votre profil attractif ? Dites-le nous en commentaire.

Pour agrémenter votre profil GitHub, je vous invite à lire notre article spécial pour devenir un·e meilleur·e développeur·se grâce aux projets Open Source.