Ce référentiel vous donne le code dont vous aurez besoin pour lancer un site Web personnel qui présente votre travail en tant que développeur de logiciels. Et lorsque vous gérez le code dans un référentiel GitHub, il rendra automatiquement une page Web avec les informations de profil du propriétaire, y compris une photo, une biographie et des référentiels.
Votre site Web personnel attend cependant d'être personnalisé. Il comprend un espace pour mettre en évidence vos domaines d'intérêt spécifiques pour le développement de logiciels, comme les langues ou les industries. Et il est à pied pour publier votre prochain excellent article de blog.
Tout est possible en utilisant la combinaison de Jekyll (pour la création de votre site Web), des pages GitHub (pour héberger votre site Web) et de l'API de GitHub (pour remplir automatiquement votre site Web avec du contenu).
github/personal-website Vous allez faire votre propre copie du référentiel de démarrage du site Web personnel afin que vous ayez votre propre projet à personnaliser. Une "fourche" est une copie d'un référentiel. Sélectionnez donc "Fork" au sommet du référentiel github/personal-website .
Une fois que vous avez trouvé une maison pour votre référentiel à fourche, c'est le vôtre. Vous êtes le propriétaire, donc vous êtes prêt à publier, si vous le souhaitez.
Si vous souhaitez gérer votre site Web dans un environnement de développement Web local, vous utiliserez Ruby.
Une fois que vous avez trouvé une maison pour votre référentiel fourchu, clonez-le .
Jekyll est un joyau de rubis qui peut être installé sur la plupart des systèmes.
gem install jekyll bundler
cd personal-website
bundle install
bundle exec jekyll serve
Lorsque vous hébergez le code de votre site Web personnel sur GitHub, vous obtenez la prise en charge de l'hébergement gratuit via les pages GitHub.
L'approche la plus rapide consiste à renommer votre référentiel username.github.io , où username est votre nom d'utilisateur GitHub (ou nom d'organisation). Ensuite, la prochaine fois que vous appuyez sur les modifications de la branche master de votre référentiel, ils seront accessibles sur le Web sur votre adresse username.github.io .
Si vous souhaitez utiliser un domaine personnalisé , vous voudrez l'ajouter aux paramètres "Domain personnalisé" de votre référentiel sur github.com. Puis enregistrez et / ou configurez votre domaine avec un fournisseur DNS.
C'est votre site Web et vous contrôlez le code source. Vous pouvez donc tout personnaliser, si vous le souhaitez. Mais nous avons fourni une poignée de personnalisations rapides à considérer lorsque vous éteignez votre site Web.
La plupart des personnalisations peuvent être effectuées en quelques secondes, en révisant le fichier _config.yml de votre référentiel. N'oubliez pas de redémarrer votre serveur local chaque fois que vous enregistrez de nouvelles modifications afin que votre site Web alimenté par Jekyll se reconstruit correctement:
jekyll serve Par défaut, votre site Web s'affiche dans une disposition à deux colonnes sur des appareils à écran plus grand, avec votre photo, votre nom et vos informations de base affichées dans une «barre latérale» alignée gauche. Mais vous pouvez rapidement passer à une disposition "empilée" en une seule colonne en modifiant la ligne dans votre fichier _config.yml qui lit layout: sidebar à layout: stacked .
Par défaut, votre site Web apparaît avec un fond blanc et gris "léger", avec du texte sombre. Mais vous pouvez rapidement passer à un fond "sombre" avec du texte blanc en modifiant la ligne dans votre fichier _config.yml qui lit style: light to style: dark .
Votre site Web est présenté préconfiguré avec trois sujets (par exemple, "conception Web" et "SASS") qui apparaissent dans une section intitulée "Mes intérêts". Ceux-ci sont également stockés dans le fichier _config.yml de votre référentiel, où vous pouvez définir le nom de chaque sujet et deux autres détails facultatifs:
web_url : l'adresse Web que vous souhaitez sur votre sujet pour créer un lien vers (par exemple https://github.com/topics/sass ).image_url : l'adresse Web d'une image (idéalement carrée) que vous souhaitez apparaître avec votre sujet. Pour ajouter une page à votre site Web (par exemple, CV détaillé):
.html ou .md à la racine de votre référentiel.http://yoursite.dev/filename ). ---
layout: default
---
Pour ajouter un article de blog à votre site Web:
.md dans votre référentiel /_posts/ répertoire. YEAR-MONTH-DAY-title.MARKUP
---
title: "The title of my blog post"
---
Votre site Web est livré avec un article de blog d'espace réservé que vous pouvez référencer. Notamment, son avantage déclare published comme false , de sorte qu'il n'apparaît pas sur votre site Web.
Bien que vous puissiez également définir une layout dans le front, votre site Web est préconfiguré pour attribuer la mise en page post à tous les messages de votre /_posts/ répertoire. Vous n'avez donc pas à déclarer cela dans vos messages, si vous ne le souhaitez pas.
Les conventions de Jekyll pour la création et la gestion des articles de blog sont très flexibles. Vous pouvez en savoir plus dans la documentation de Jekyll pour les "publications".
Pour vous donner une base solide pour démarrer votre site Web personnel, votre référentiel comprend une poignée de fichiers .html dynamiques - dynamiques qui sont réutilisés sur votre site Web. Ils sont tous stockés dans le répertoire /_includes/ .
Il y a les suspects habituels, comme header.html et footer.html . Mais il y en a peu de plus qui valent le point:
interests.html : Une liste de rubriques et dynamique de «Mes intérêts», qui est remplie des sujets que vous énumérez dans votre _config.yml .masthead.html : Une collection de votre avatar, nom, biographie et autres métadonnées qui s'affiche en bonne place sur toutes vos pages Web pour vous aider à identifier le site Web.post-card.html : une présentation compacte et résumé d'un article de blog, réutilisée pour afficher une liste de vos derniers articles de blog.projects.html : une liste de titres et dynamiques de "Mes projets", qui est remplie d'une liste de vos nouveaux référentiels GitHub.repo-card.html : une présentation compacte et résumé d'un référentiel, réutilisé pour afficher une liste de vos référentiels GitHub.thoughts.html : Une liste de rubriques et dynamique de "Mes pensées", qui est remplie d'une liste de vos derniers articles de blog.topic-card.html : une présentation compacte et résumé d'un sujet (défini dans votre _config.yml ), réutilisée pour afficher une liste de vos intérêts.Votre référentiel est livré avec trois mises en page:
index.html pour afficher les listes de vos projets, intérêts et (éventuellement) vos articles de blog./_posts/ répertoire.La convention de Jekyll pour définir les dispositions est très flexible. Vous pouvez en savoir plus sur la personnalisation de vos dispositions dans les documents de "dispositions" Jekyll.
Votre site Web est préconfiguré pour utiliser un framework CSS très flexible appelé "Primer", aux côtés de tous les styles personnalisés que vous écrivez dans votre feuille de style SASS /assets/styles.scss . Il est actuellement référencé dans votre fichier styles.scss , en utilisant le CSS IMPORT AT-RULE:
@import url('https://unpkg.com/primer/build/build.css');
Bien sûr, vous êtes bien sûr le supprimer ou le remplacer par un autre cadre. Gardez à l'esprit que le HTML que votre site Web est venu préemballé avec des références sur plusieurs «classes d'utilité» d'amorce pour définir des choses comme les largeurs de colonne, les marges et les couleurs d'arrière-plan.
Le thème est disponible en open source en vertu des termes de la licence MIT.