Comment créer un CV en ligne alimenté par Jekyll et GitHub Pages

CV de Homer comme remplisseur - Joel Glovier

La semaine dernière, j'ai effectué des recherches sur quelques sujets intéressants relatifs aux sites Web statiques hébergés par des options simples. Tout au long de ce voyage pour en savoir plus, j'ai découvert Jekyll, un générateur de site statique qui fonctionne sans problème avec la fonctionnalité GitHub Pages proposée par l'immense service de référentiel.

Bien que je n’aie pas de plan concret pour ces deux choses, j’ai commencé à parcourir les thèmes de GitHub for Jekyll, afin de voir ce que les autres ont proposé et d’avoir une idée de la quantité de personnalisation proposée par Jekyll.

J'ai rapidement trouvé un modèle de CV simple pour Jekyll construit par Joel Glovier. Immédiatement, une ampoule s'est allumée dans mon esprit alors que je venais de commencer à mettre à jour et à peaufiner mon CV. Au lieu de jongler avec les fichiers .docx et .pdf dans les e-mails, Google Docs ou Dropbox, je pouvais facilement héberger une version en ligne sur mon profil GitHub, améliorant ainsi l'accessibilité pour moi et les recruteurs, tout en soulignant mon expérience avec le service de prise en pension.

Le processus n’a pas été très simple, j’ai donc décidé de faire la chronique de mon parcours pour que les autres puissent s’en sortir plus facilement. En tant que tel, creusons.

Mise en place de Jekyll et de ses prérequis

Tout d’abord, vous devez installer Jekyll et ses divers prérequis, dont le plus important est Ruby. La section de documentation du site officiel est assez bien écrite, mais vu que je suis sous Windows, j'avais besoin d'une aide spécifique. Ceux qui exécutent Windows 10 avec les mises à jour Creators ou Anniversary peuvent utiliser le nouveau shell Bash. Ceux avec des versions plus anciennes peuvent consulter ce guide.

Une fois que vous avez tout configuré, il est temps d’archiver et de cloner le référentiel de curriculum vitae de Joel Glovier sur votre ordinateur local. Pour ce faire, je recommande d'installer GitHub Desktop, qui inclut également le shell Git.

Personnaliser le modèle

Une fois le référentiel installé sur votre ordinateur, il est temps de commencer à personnaliser les fichiers les plus importants, en commençant par le fichier _config.yml. Cela inclut les détails de configuration de tout site Jekyll. Dans le cas de ce modèle, vous pouvez l’utiliser pour afficher ou masquer diverses sections, ainsi que pour modifier les métadonnées telles que le titre de votre site.

Cela fait, vous pouvez accéder au dossier _data pour compléter les sections avec vos propres informations. Les fichiers ont des noms explicites et sont au format .yml. Vous pouvez les éditer en utilisant Notepad / Notepad ++ ou d'autres éditeurs (j'utilise Atom).

Pour une personnalisation supplémentaire, vous pouvez aller dans _layouts et éditer resume.html pour modifier l’ordre des sections, par exemple.

Une modification importante avec laquelle j'ai eu du mal à remplacer a été de remplacer le nombre limité d'icônes qui apparaissent en face de l'intitulé de votre travail. Joel n'a ajouté que quelques icônes qui, bien qu'assez bonnes, n'étaient pas pertinentes pour moi. J'ai passé un certain temps à essayer d'ajouter une nouvelle icône .svg pour Medium, car je souhaite publier mon travail ici. En fin de compte, les choses ne se sont pas déroulées, alors j’ai choisi d’ajouter la bibliothèque très pratique de font-awesome.

En tant que tel, je suis allé à _includes et ajouté dans head.html le lien de script pour font-awesome. Ensuite, dans le même dossier, j'ai modifié icon-links.html pour spécifier, au lieu des icônes svg, celles intégrées à font-awesome.

Pour effectuer le changement de couleur au survol de la souris et éliminer la couleur de lien par défaut des icônes, je me suis également rendu dans le dossier _sass pour modifier _resume.css. Ici, j'ai commenté .icon-link et à l'intérieur de .icon-link-item j'ai ajouté:

Dernier point mais non le moindre, il semble qu'il y ait un petit problème concernant la section Education du modèle. Comme je l'ai spécifié dans un numéro envoyé à Joel, une balise de paragraphe ne comporte pas la spécification de style nécessaire, ce qui a pour effet d'ajouter le résumé au nom du degré.

Tout mettre en place sur GitHub et hébergement sur Pages

Une fois que vous avez tout personnalisé, il est temps de le placer sur GitHub et de laisser la fonctionnalité Pages l’héberger automatiquement pour que le monde entier puisse la visualiser.

Comme indiqué sur le site officiel, vous devez créer un nouveau référentiel intitulé .github.io. Dans mon cas, c'est andreidbr.github.io. Cloner ce repo localement. C'est là que mon manque d'expérience actuel a été montré, car je viens de copier les fichiers et les dossiers du dossier local resume-template. Notez que vous ne devez pas copier le dossier .git ou le fichier CNAME. Commettez les nouveaux fichiers et votre nouveau site Web sera disponible à l'adresse indiquée dans le nom du référentiel. Dans mon cas, le CV est en direct sur https://andreidbr.github.io/.

Si vous souhaitez utiliser un nom personnalisé pour une adresse externe, créez un fichier nommé CNAME et écrivez l'adresse à laquelle vous souhaitez que le site apparaisse.

À emporter

Après cette expérience, je peux dire que Jekyll est un générateur de site statique assez astucieux qui peut être aussi complexe ou aussi simple que vous le souhaitez. En commençant par le modèle, j'ai réussi à apprendre des choses très utiles et à obtenir un CV en ligne. J'ai également découvert GitHub et sa fonctionnalité Pages. J'espère donc que cet article aidera les autres qui souhaitent faire de même.