Comment créer un répertoire open source sur les pages GitHub

En boucle

Vient ensuite le code liquide. Dans l'exemple suivant, j'ai utilisé la structure de liste et je l'ai associée à la boucle de liquide:

 % for repo dans site.github.public_repositories limite: 28% % if repo.fork! = true% 
 repo.name 
 % endif% % endfor% 

Prenons un moment pour expliquer ce qui se passe. Nous passons en boucle sur chaque repo site.github.public_repositories. site.github est l'endroit où toutes les métadonnées pour les dépôts GitHub sont stockées, en partie comme tous les référentiels publics.

Ensuite, pour les besoins de cette démo, j’ai limité la boucle avec limite: 28, donc la page de démonstration n'est pas trop longue.

Ensuite, je vérifie si c'est un repo forké. Si repo.fork n'est pas vrai, nous allons continuer avec la sortie. Si vous aimez contribuer à d'autres projets sur GitHub, comme moi, alors vous avez tendance à avoir quelques repos à la fourche. Cette vérification, si vous le souhaitez, les empêchera d'apparaître dans votre portefeuille..

Enfin, pour chaque repo, nous sortons les valeurs repo.homepage et repo.name dans une ancre.

Le voir en action

Maintenant, vous devez appliquer ces modifications et les pousser. soit à maîtriser ou gh-pages (selon la configuration que vous avez choisie). Ensuite, pour afficher votre site de liste de projets de base: 

• si c'est un repo personnalisé avec gh-pages, allez à nomutilisateur.github.io/nom-de-la-repo 
• si c'est un repo appelé nomutilisateur.github.io, alors vous pouvez simplement aller à cette URL

Ce ne sera pas encore une sortie très excitante. Voici à quoi ressemble la démo de base en utilisant mon propre compte GitHub:

Il est temps d'ajouter du style et des détails à nos projets!

Devenir créatif

Vous pouvez effectuer toutes sortes de vérifications et de filtrages avec les métadonnées GitHub. Certaines des valeurs de données ont été documentées, mais si vous souhaitez des exemples plus détaillés, vous pouvez explorer leur API. Tout d’abord, nous devrions ajouter un fichier CSS pour pouvoir styliser la page..

Grâce à Jekyll, nous pouvons utiliser un fichier SCSS pour personnaliser directement notre portefeuille. Créez un fichier styles.scss dans un nouveau répertoire css et ajoutez un commentaire avant-propos en haut du fichier:

--- # Modes ---

Ce commentaire fonctionne de la même manière que dans le fichier index.html. Jekyll reconnaît le fichier et gère le prétraitement pour nous. Vous pouvez styler les choses comme vous le souhaitez, mais après un peu de travail sur Flexbox et l'ajout de Google Fonts, voici ce que j'ai:

Regardez le SCSS onglet sur la démo ci-dessus pour voir comment j'ai stylé les choses.

Plus de méta

Essayons maintenant d’apporter des informations supplémentaires sur chaque référentiel. Tout d'abord, ajoutons une description:

 
repo.name
 
repo.description
 

repo.description apportera à travers la description qui apparaît au-dessus de votre référentiel sur GitHub.

Pourquoi ne pas montrer le nombre d'étoiles et de fourchettes que nous avons également sur chaque référentiel? Nous pouvons y arriver avec repo.stargazers_count et repo.forks_count ainsi:

 
repo.name
 
repo.description
  

Comme cela est montré, vous pouvez exposer beaucoup de données de vos référentiels GitHub. Une partie de ceci est d'essai et d'erreur; il suffit d'essayer différentes valeurs et de vérifier les résultats. Jekyll ne devrait pas générer d'erreur (la plupart du temps), vous pourrez ainsi voir si le résultat fonctionne ou non sur la page en direct..

Dans mon exemple, j'ai ajouté des icônes et des couleurs à chaque élément pour refléter la langue principale dans laquelle ils ont été écrits. J'ai réalisé cela en ajoutant une classe à l'aide de repo.language. J'ai ensuite pu styliser chaque article en fonction de la langue. Voir l'exemple suivant:

 … 
 

Dans l'exemple ci-dessus, j'utilise des liquides downcase filtre pour supprimer les caractères majuscules. Vous verrez également que j'ai ajouté une icône sous la forme d'un sprite SVG. Encore une fois, j'utilise repo.language comme identifiant pour chacune de mes icônes. Si vous voulez en savoir plus sur les icônes de sprite SVG, jetez un coup d'œil au tutoriel que j'ai écrit il y a quelque temps:

Conclusion

Bien sûr, votre propre page de projets n'a pas à ressembler à cela. Vous pouvez être aussi créatif que vous le souhaitez! Par exemple, voici mon site personnel de projets open source: https://daviddarnes.github.io. J'ai utilisé pas mal de fonctionnalités et astuces dans le mien, alors si vous voulez en choisir un, vous pouvez voir le code sur GitHub. 

Devoirs

Il y a un ou deux détails que nous n'avons pas abordés, et quelques fonctionnalités que nous pourrions ajouter. 

• Par exemple, dans notre démo, il manque encore des icônes SVG pour certaines langues. 
• Les pensions avec des titres longs sans espaces sortent de leurs conteneurs; cela peut être corrigé avec CSS.
• Vous voudrez peut-être utiliser la page de documentation sur les métadonnées du référentiel comme guide et essayer certains des éléments plus détaillés de la documentation pour les développeurs.. 
• Enfin, si vous connaissez bien Jekyll et GitHub Pages, vous pouvez utiliser le joyau github-metadata avec le joyau GitHub Pages pour développer votre portefeuille GitHub localement..

Faites-nous savoir dans les commentaires comment vous vous en sortez!