Vous venez de vous lancer dans le code où vous êtes déjà bien avancé dans le développement de vos projets.
Vous souhaitez mettre en avant votre profil ainsi que vos développements dans le cadre d'une candidature pour un projet, une école ou encore un poste. Plus généralement, vous souhaitez créer votre première page statique visible de tous.
Dans cet article, vous allez poser les fondations de votre premier CV en ligne, page qui pourra ensuite évoluer au gré de vos envies.
Pour un aperçu du résultat, c'est par ici 🎯
📚 À cette occasion, vous utiliserez :
- Un soupçon de HTML
- la magie de Boostrap
- les bases de Git
- GitHub et GitHub Pages
Les prérequis
Cet article s'adresse à tous et précisément aux personnes qui débutent. Ne vous laissez donc pas impressionner par les points donnés ci-dessus 💪
Pour autant, si vous souhaitez consolider certaines notions, comme l'utilisation des bases de Git et GitHub, je vous recommande cette vidéo de Thibault qui vous donnera les clés pour démarrer avec Git et GitHub :
📌 Ressource utile : Débuter avec Git & GitHub
Pour ceux qui souhaiteraient aller plus loin, je propose un "bac à sable" sur mon GitHub :
🏖 Pour aller plus loin : Sandbox Git & GitHub
Pour le reste, je me charge de vous guider 👩✈️
Création du dépôt Git
1. Créez un dépôt (repository) distant sur GitHub
Connectez-vous sur votre compte GitHub et créez un nouveau dépôt public nommé my_username.github.io,my_username correspondant à votre nom d'utilisateur sur GitHub.
Pour que GitHub Pages fonctionne, le nom de votre dépôt public doit correspondre exactement à cette nomenclature.
2. Publiez votre premier « Hello World »
Directement depuis l'interface graphique de GitHub, ajoutez un fichier index.html et insérez le code HTML suivant <h1>Hello World !</h1>
Allez en bas de page pour "enregistrer" votre première contribution (dans le jargon de Git, on dit faire un commit).
GitHub nous suggère un message de commit, il décrit parfaitement votre action, gardez-le en l'état et commitez ce nouveau fichier grâce au bouton vert.
À ce moment précis, GitHub Pages va prendre le relais et effectuer le build et le déploiement de votre page index.html. Pour visualiser ce processus, cliquez sur l'onglet "Actions". Cette page vous renseigne sur l'ensemble des processus en cours ou terminés avec leur statut (en cours, succès, échec).
Une fois le processus terminé avec succès, rendez-vous sur https://my_username.github.io
🎉 FÉLICITATIONS, votre code a été déployé.
Maintenant, il est temps d'étoffer cette page index.html
3. Récupérez votre dépôt en local
En local, ouvrez un terminal et placez-vous à l'endroit où vous souhaitez cloner votre dépôt distant.
git clone https://github.com/my_username/my_username.github.io cd my_username.github.io
Visualisez votre tout premier commit avec la commande git log :
git log
4. Mise en forme avec Bootstrap
Pour poursuivre le travail, vous allez vous baser sur l'un des thèmes gratuitement proposé ici par Bootstrap.
Précisément, nous allons télécharger les ressources du thème resume 📥
Ici prenez bien le temps d'observer le descriptif du thème, de vous rendre sur cette autre page pour comprendre son comportement et les possibilités offertes. Ensuite, n'hésitez pas à faire de même avec les ressources téléchargées, c’est-à-dire l'ensemble du code et les éléments graphiques.
Décompressez l'archive, copiez son contenu, à savoir le fichier index.html et les répertoires assets, css et js, puis copiez-les dans le dossier my_username.github.io précédemment créé.
👉 Un fichier index.html existe déjà, votre système d'exploitation devrait vous en alerter. Il s'agit de celui comprenant notre "Hello World", Pas de souci, vous pouvez l'écraser au profit de ce nouveau fichier.
Dans votre terminal, placez-vous dans ce dossier et effectuer ces commandes :
git add --all git commit -m "init Boostrap theme" git push -u origin main
Ces commandes permettent :
- D'intégrer les nouveaux éléments du thème au dépôt local.
- De les regrouper sous le commit "init Boostrap theme".
- De les transmettre à votre dépôt distant hébergé sur votre compte GitHub.
Sur votre compte GitHub, replacez-vous dans l'onglet "Actions" afin de visualiser le build et le déploiement en cours. Une fois terminé, rendez-vous sur https://my_username.github.io
🎉 FÉLICITATIONS, votre thème a été déployé.
Aller plus loin
Maintenant que les fondations de votre thème sont posées et le mécanisme pour le mettre à jour est acquis, de nouveaux horizons s'offrent à vous. Voici quelques suggestions pour aller encore plus loin :
📌 Familiarisez-vous avec la structure du HTML : commencer par remplacer les informations d'exemples par vos propres informations. Ce moment clé vous donnera l'opportunité de mieux comprendre la structure du code.
📌 Poursuivez en modifiant le rendu de ce thème, formatage du texte, couleurs, etc. Ici, CSS et Bootstrap seront vos alliés.
📌 Une fois cette page mise à jour selon vos envies et fort de l'expérience acquise, vous êtes prêt pour la compléter avec de nouveaux éléments : nouvelles sections, nouvelles photos, nouvelles animations, etc. tout est possible ! Ici, cela sera HTML, CSS, Bootstrap mais aussi JavaScript qui pourront vous être utiles.
📌 Vous avez un nom de domaine ? Pourquoi ne pas l'utiliser pour mettre en place une redirection vers votre création ?
📌 Passez à la vitesse supérieure ! Si de nouveaux besoins apparaissent, comme la mise en place de formulaire, la création d'articles, la gestion d'utilisateurs... Vous aurez alors besoin d'un nouveau système d'hébergement ainsi que d'un back-office.
À ce moment précis, vous aurez la possibilité de vous lancer dans de nouveaux choix techniques comme celui de votre langage de back-end, Python par exemple et couplé à un framework comme Django.
💡 Si tel est le cas, sachez que Docstring propose tant dans son contenu gratuit que payant de nombreuses ressources pour vous aider à poursuivre le développement ce nouveau projet.
Quant à moi, j'espère que vous avez pris plaisir à construire cette première page statique et que cela vous donnera une pagaille d'idées pour de nouvelles améliorations, applications et évolutions.
