Comment faire un portfolio
Tu peux réaliser ton portfolio pour valoriser tes compétences techniques, de design ou ta curiosité.
C'est un moyen de regrouper au même endroit ce que tu produis en ligne: tes articles, tes projets web... Ça peut être aussi un challenge front en le codant.
Voici un repo qui recense de nombreux portfolios pour t'inspirer pour te lancer.
On conseille aussi le guide de Josh W Comeau Building an effective portfolio, qui est vraiment hyper complet pour construire intelligemment son site !
Faire son site avec un générateur de site statique#
Qu'est-ce qu'un générateur de site statique ?#
Les générateurs de sites statiques te permettent de rapidement créer un site grâce à un moteur de template intégré. Le moteur de template se charge de transformer la page en HTML.
Pour ce qui est du markup (langage de balisage), plusieurs sont possibles selon les générateurs, mais tous comprennent le format MarkDown (.md).
Le site étant statique, tu peux facilement (et gratuitement) le déployer grâce à GitHub Pages, GitLab Pages ou Netlify.
Un peu de configuration est requise, mais sinon tu n'as qu'à te préoccuper d'écrire ton contenu et de styliser ton site.
Les plus connus ont une bonne documentation pour t'aider à créer ton site, le configurer et après le déployer. Ils ont aussi une communauté active pour demander de l'aide !
Des générateurs de sites statiques en Ruby#
Comme un peu de configuration est nécessaire, c'est plus pratique de connaître le langage utilisé par le générateur. On liste des générateurs de sites statiques en Ruby, mais bien sûr il y en a dans d'autres langages. Tu peux trouver une liste exhaustive de générateurs de sites statiques ici.
Jekyll
Un des générateurs de site statique le plus connu et populaire. Le moteur de template en Liquid, créé par Shopify.
Middleman
Second sur le podium, Middleman donne l'option de plusieurs moteurs de template (dont liquid, erb et haml). Le CSS est en sass.
Nanoc
Moins populaire que les deux précédents, Nanoc tient tout de même la troisième place sur le podium. Comme Middleman, il y a plusieurs moteurs de template (dont erb et haml).
Bridgetown
Bridgetown a une communauté moins importante que les trois précédents, mais elle est tout de même active et le projet est maintenu. Il laisse le choix entre erb ou liquid en moteur de template.Un exemple de blog qui utilise Jekyll pour se faire une idée de ce qui est possible.
Éditer son site avec un headless CMS#
Les CMS (Content Management System ou Système de gestion de contenu) comme Wordpress ou Squarespace sont bien connus maintenant.
Les headless CMS sont des services qui te permettent d'ajouter une interface web d'administration afin de gérer les contenus de ton site.
C'est un peu la cerise sur le cupcake (🧁🍒) si tu ne veux pas modifier tes fichiers de ton éditeur de texte mais en ligne.
"Headless" fait référence à l'idée que ces services gèrent uniquement le contenu, te laissant le choix en tant que développeuse ou développeur de déterminer comment tu vas construire ton site et l'héberger.
Il y a deux types d'headless CMS:
- ceux basés sur une API (API Driven), où on récupère le contenu par une API
- ceux basés sur git (git-based), où les fichiers sont enregistrés dans un dépôt git et du coup en arrière-plan chaque modification crée un commit dans le repo
Comme on l'a listé au-dessus, voici deux headless CMS qui ont un support avancé pour Jekyll, tous les deux git-based:
Tu peux trouver une liste de nombreux headless CMS ici et une liste de headless CMS avec des plans gratuits pour développeuses ou développeurs ici.
Si tu veux commencer avec un template, on a sélectionné deux headless CMS en open-source, git-based, qui en fournissent:
Ressource pour cette page
La combinaison d'un générateur de site statique et d'un headless CMS fait partie d'une nouvelle architecture de code, la JAMstack. Si tu veux en savoir plus, tu peux lire le chapitre 4 du livre Modern Web Development on the JAMstack.