Aller au contenu principal

Jekyll - Installation

Votre Portfolio en mode Pro avec Jekyll & GitHub Pages

Notions théoriques​

Imaginez un charpentier travaillant avec des outils traditionnels pour construire une maison solide et durable. Jekyll est l'équivalent numérique pour les sites Web, en particulier pour les portfolios.

Site statique vs site dynamique

Les sites statiques sont des sites web où tout le contenu est fixe sans utiliser une base de données.

Les fichiers HTML, qui sont stockés sur le serveur, seront envoyés tels quels au navigateur Web.

Cela rend le site Web extrêmement rapide, car le serveur envoie simplement les fichiers au navigateur, sans avoir besoin de traitement côté serveur pour générer dynamiquement les pages à chaque requête.

Jekyll permet de construire des sites statiques, rapides, sécurisés et faciles à maintenir.

astuce

Avec Jekyll, on utilise des fichiers texte simples pour créer la structure du site, et on peut écrire le contenu en Markdown, un langage de balisage léger. Jekyll prend ensuite ces fichiers et les transforme en un site Web complet, prêt à être servi à vos visiteurs.

Installation​

Pour mettre en place Jekyll, il faut :

  1. d'abord télécharger RubyInstaller (AVEC DEVKIT) et installer Ruby depuis le site officiel https://www.ruby-lang.org/fr/
  2. puis installer Jekyll lui-même avec la commande gem install jekyll bundler.

  • Une fois Jekyll installé, on peut créer un nouveau projet en utilisant la commande jekyll new mon-portfolio.

  • Jekyll va générer une structure de dossiers et de fichiers qui constitue la base de votre site.

  • Vous pouvez ensuite personnaliser le contenu en éditant les fichiers Markdown et en ajustant les fichiers de configuration.

Test de mémorisation/compréhension​


Quel est l'avantage principal d'un site statique par rapport à un site dynamique ?


Quel langage de balisage Jekyll utilise-t-il principalement pour le contenu ?


Que doit-on installer en premier pour utiliser Jekyll ?


Que génère la commande `jekyll new mon-portfolio` ?


Où sont stockés le contenu et les pages de votre site Jekyll ?


TP pour publier le portfolio sur GitHub Pages​

Objectif du TP : Créer un dépôt Git pour votre portfolio Jekyll et publier votre site sur GitHub Pages.

  1. Déplacez vous dans votre dossier Documents.

  2. Création du projet Jekyll :

    • Exécutez la commande jekyll new mon-portfolio dans le terminal.

  3. Personnalisation de _config.yml :

    • Ouvrez le fichier _config.yml avec un éditeur de texte.
    • Modifiez les valeurs telles que title, email, description, url avec vos informations.
    title: Georges DUPOND, informaticien
    email: georges.dupond@ik.me
    description: >- # this means to ignore newlines until "baseurl:"
      Je suis passionné par l'informatique et actuellement en formation en BTS SIO. 
      Découvrez ici mon profil et mes projets.
    baseurl: "/portfolio2" # the subpath of your site, e.g. /blog
    url: "https://CompteUtilisateur.github.io/portfolio2"
    twitter_username: gdupond
    github_username:  CompteUtilisateur

  4. Ajout d'une page Contact :

    • Créez un fichier contact.markdown à la racine du projet.
    • Écrivez votre contenu en Markdown et ajoutez l'en-tête YAML nécessaire :
    ---
    layout: page
    title: Contact
    permalink: /contact/
    ---

    # Contact

    > Georges DUPOND
    > 3, place de l'église
    > 50890 MaVille

    Tél. : 06.78.90.12.34

    Email : [georges.dupond@ik.me](georges.dupond@ik.me)

  5. Démarrez le serveur Web avec la commande bundle exec jekyll serve

  6. Testez le site dans votre navigateur à l'adresse http://127.0.0.1:4000/portfolio2/

  7. Création et utilisation d'un dépôt Git :

    • Initialisez un dépôt Git avec git init.
    • Ajoutez vos fichiers avec git add . et validez-les avec git commit -m "First commit".
    • Créez un dépôt sur GitHub nommé portfolio2 et suivez les instructions pour pousser votre dépôt local : 
      git remote add origin https://github.com/CompteUtilisateur/portfolio2.git
      git push

  8. Publication sur GitHub Pages :

    • Rendez-vous dans les paramètres de votre dépôt GitHub.
    • Dans la section GitHub Pages, sélectionnez la branche main.
    • Cliquez sur "Save" et votre site sera publié à l'adresse indiquée : https://CompteUtilisateur.github.io/portfolio2/