Configuration de Jekyll pour les pages GitHub en 60 secondes

Jekyll peut être utilisé avec GitHub Pages pour créer des sites Web statiques simples, adaptés aux blogs. Cette vidéo vous montrera comment configurer la structure de fichier à plat Jekyll en 60 secondes!

Une fois que vous êtes tous installés et que vous avez besoin d’inspiration, découvrez les thèmes disponibles sur le marché de Jekyll sur le marché Envato..

Si vous préférez une explication écrite, voici le processus complet décrit en étapes claires:

Nouveau projet

Commencez par créer un dossier sur votre système pour un nouveau référentiel. Pour ce faire, utilisez le terminal pour accéder à l'emplacement de votre nouveau dossier, puis entrez: mkdir mysite. Notre nouveau dossier s'appelle «mysite», mais vous pouvez le nommer comme vous voulez..  

Changer de répertoire dans ce nouveau dossier en entrant cd mon site-une fois là créez un fichier de configuration en entrant la commande vim _config.yml. Votre fenêtre de terminal vous montrera le contenu de ce fichier, alors appuyez sur je entrer mode d'insertion, puis ajoutez le contenu suivant:

titre: Mon site

Frappé Esc partir mode d'insertion, puis entrez :X enregistrer les modifications apportées.

Créer un index

Ensuite, nous devons créer le document index, alors entrez vim index.md et un peu comme vous l'avez fait auparavant, ajoutez le contenu suivant:

--- titre: Bonjour layout: default --- Bonjour!

Ajouter un dossier de présentations

Maintenant, créez un nouveau dossier en entrant mkdir _layouts et passer à ce répertoire avec cd _layouts. Donnez-lui un modèle de document vim default.html et ajoutez le contenu suivant:

 contenu 

Initialiser Nouveau Repo

Nous devons maintenant initialiser le dossier en tant que nouveau référentiel et valider les modifications. Commencez donc par revenir à la racine de notre projet avec CD… . Puis entrez git init, suivi par git add --all && git commit --all. 

Pousser vers GitHub

Basculez vers GitHub via le navigateur et créez un nouveau dépôt. 

On vous donnera quelques options à ce stade, alors prenez les commandes où vous voyez pousser un référentiel existant à partir de la ligne de commande. Les commandes vont lire quelque chose comme:

git remote ajouter l'origine [email protected]: votre_nom_utilisateur / mysite.git git push -u origine master

Collez ces commandes dans le terminal pour envoyer votre dépôt local à GitHub..

Paramètres GitHub

Enfin, dans le repo GitHub Réglages, opte pour utiliser la branche master pour Pages GitHub, puis frappé sauvegarder.

Jekyll est tout installé et votre site Web est prêt à être construit!

Structure du fichier Jekyll, expliquée

• _config.yml fonctionne comme fichier de configuration Jekyll. C’est ce que GitHub Pages lit pour les paramètres du site tels que les variables globales, et plus encore..
• index.md est le document d'index racine du site Web GitHub Pages.
• _layouts / default.html est le fichier de modèle par défaut sur lequel index.md sera basé..

Ressources utiles

Pour plus d'informations sur la création de sites Web statiques à l'aide de Jekyll, consultez les ressources suivantes concernant Envato Tuts.+!

• 

  Comment configurer un thème Jekyll

  Dans ce tutoriel, nous allons dès le début configurer un thème Jekyll, en commençant par quelques conseils d'installation de base, en passant par la procédure…
• 

  Nouveau cours: Construire des sites Web statiques avec Jekyll

  Dans notre nouveau cours, vous apprendrez tout sur le générateur de sites statiques Jekyll et construirez un site Web complet à partir de rien en moins de deux heures. Rejoignez Guy Routledge…
• 

  La ligne de commande pour la conception Web: Comprendre les bases

  Dans ce didacticiel, vous apprendrez les bases du travail avec un terminal ou une invite de commande, notamment comment l'ouvrir, comment exécuter des commandes, comment le répéter…