Apprendre à connaître les pages GitHub pages de projet statiques, rapide

Parlons de GitHub Pages; ce qu’ils sont et comment vous pouvez utiliser le service en quelques minutes pour déployer des pages statiques gratuitement. Commençons!


Ce que c'est

Selon GitHub, les pages GitHub sont:

… Des pages Web publiques hébergées librement et facilement publiées sur notre site.

Qu'est-ce que cela signifie pour vous? Cela signifie un hébergement gratuit et fiable de contenu statique. En général, cela a été créé par GitHub pour soutenir les projets open-source hébergés sur GitHub en leur donnant un emplacement pour offrir de la documentation, des démonstrations ou toute autre expérience interactive donnée pour compléter le code dans le référentiel..


Cependant, les pages GitHub peuvent être utilisées pour divers projets et prennent déjà en charge Jekyll (un puissant générateur de sites statiques basé sur Ruby). Alors, apprenons à l'utiliser!


Avant de commencer

Vous devrez créer un compte GitHub avant de pouvoir commencer à utiliser les pages GitHub. Pour tirer le meilleur parti de GitHub, il est vivement recommandé de configurer vos clés SSH. En gros, les instructions sur ce lien vous permettent de connecter en toute sécurité votre ordinateur à votre compte GitHub et à tous vos référentiels sur GitHub. Une fois que vous avez créé un compte GitHub et enregistré vos clés, vous pouvez facilement télécharger l'application GitHub pour Mac ou GitHub pour Windows, tous deux officiellement pris en charge par GitHub..

Back up - Qu'est-ce que GitHub est dans le monde?

GitHub est un endroit où les gens stockent leur code. Git est un puissant système de contrôle de version qui permet aux développeurs de suivre les modifications apportées au code par incréments, appelés commet, et suivre différents chemins d'un projet particulier en utilisant branches.


Il y a beaucoup de fonctionnalités de Git, et plus de pouvoir est enfermé dans GitHub, mais pour le moment, nous allons rester concentrés sur les Pages GitHub. Si vous souhaitez en savoir plus sur GitHub, consultez Git for Designers, ainsi que Git & GitHub: Un guide pour débutant, qui inclut des informations supplémentaires sur les clés SSH, ainsi que certaines fonctionnalités de base de Git qui vont au-delà de la portée de Cet article.


Différentes façons d'utiliser les pages GitHub

GitHub Pages peut être utilisé de différentes manières. Nous allons commencer par l'un des moyens les plus rapides.

Générateur de page automatique de GitHub

Le générateur de page automatique permet aux utilisateurs de créer leur page à l'aide de Markdown, un langage de balisage lisible par l'homme conçu pour aider les créateurs de contenu à produire facilement des documents avec un ensemble cohérent de directives de balisage..

Alors, comment utilisez-vous le générateur de page automatique? Tout d'abord, vous voudrez créer un référentiel. Si vous souhaitez que le référentiel pointe vers your-username.github.com, créez un référentiel correspondant à ce nom. Par exemple, mon dépôt personnel est nommé jcutrell.github.com. Pour accéder au générateur de site statique, accédez aux paramètres de ce référentiel (accessible à une URL qui suit le format https://github.com/username/projectname/settings). Cela montrera un éditeur, qui est alimenté par un éditeur de texte enrichi Markdown. Vous pouvez copier automatiquement le fichier Lisezmoi.md standard ou modifier votre contenu à votre guise. En outre, le générateur automatique dispose également d’un espace pour le suivi de Google Analytics..

Une fois que vous avez ajouté tout le contenu pertinent, vous pouvez passer au sélecteur de disposition. Avec plusieurs thèmes à choisir, il s'agit d'une excellente option pour offrir immédiatement aux utilisateurs une page de renvoi sèche et sans effort, basée sur votre fichier Lisez-moi, vous demandant simplement de conserver votre documentation à jour (ce que vous devriez déjà être en train de faire). Vous pouvez également extraire ces pages de leur origine, les modifier localement, puis les remonter..

Si vous souhaitez utiliser l'application GitHub pour contrôler votre référentiel GitHub, voici comment procéder..

Tout d'abord, vous voudrez installer l'application à partir de mac.github.com ou windows.github.com, et suivez les instructions d'installation simples.


Ensuite, choisissez un référentiel que vous voulez cloner sur votre ordinateur en sélectionnant votre nom d’utilisateur GitHub à gauche et en cliquant sur Cloner à l'ordinateur.


Ensuite, configurez l’emplacement et le nom avec lesquels vous souhaitez cloner le référentiel..


Ensuite, choisissez l’onglet branches sur la gauche et sélectionnez le gh-pages branche créée par le générateur. Vous pouvez ensuite effectuer vos modifications localement à l'emplacement que vous avez spécifié précédemment..

Une fois que vous êtes prêt à pousser certains changements pour être en direct, allez à la changements onglet et créer un commit avec le formulaire en haut à gauche.


Enfin, sélectionnez le branches onglet et cliquez publier à droite de la branche gh-pages. Cela va pousser toutes vos modifications engagées dans GitHub.


Si vous souhaitez utiliser la ligne de commande pour contrôler votre référentiel GitHub, voici comment procéder..

 git clone [email protected]: nom d'utilisateur / nom du projet.git git checkout gh-pages

Si vous avez généré une page utilisateur (au lieu d’un seul projet), la branche principale est la branche de pages GitHub. Il suffit de cloner votre projet utilisateur pour le modifier localement.

 git clone [email protected]: nomutilisateur / nomutilisateur.github.com.git git checkout master # cela devrait déjà être extrait par défaut

Cependant, le générateur automatique peut ne pas être la solution à votre problème. Peut-être avez-vous déjà construit votre site statiquement et cherchez-vous simplement à le déployer quelque part.

Construisez-le manuellement

Cette deuxième option est aussi simple que cela puisse paraître. Pour que les pages GitHub fonctionnent avec du contenu local arbitraire, créez d'abord le référentiel sur GitHub..

Si vous avez décidé d'utiliser l'application GitHub, voici comment créer vos propres pages de manuel.

Sélectionnez le Mes dépôts dossier, puis cliquez sur la flèche du référentiel avec lequel vous souhaitez créer des pages GitHub. Si vous ne disposez actuellement d'aucun référentiel avec lequel démarrer, vous pouvez en créer un depuis l'application..


Si vous créez des pages GitHub en utilisant nomutilisateur.github.com, la branche maîtresse est la branche de pages, vous pouvez donc aller de l'avant et ouvrir le projet dans un dossier local, en sautant la création du gh-pages branche. Si vous créez des pages GitHub pour un projet, vous souhaiterez créer une nouvelle branche appelée gh-pages; cliquez sur le bouton situé à droite du référentiel, puis cliquez simplement sur le bouton + situé à droite de la branche actuelle.


Cela vous permettra d'entrer le nouveau nom de la succursale..


Par défaut, la nouvelle branche aura tous les fichiers de votre projet actuel. Vous voudrez donc supprimer tous les fichiers du projet pendant que gh-pages la branche est sélectionnée. (Pour être sûr, assurez-vous que l'indicateur "branche actuelle" indique que vous êtes sur la branche gh-pages, sauf si vous créez des pages pour nomutilisateur.github.com.)


Ensuite, vous pouvez créer un site statique directement dans votre dossier de projet..

Une fois que vous avez créé le site statique dans le dossier du projet, vous revenez à l’application GitHub et accédez au changements onglet à gauche. Cela montrera toutes les modifications que vous avez apportées, y compris la suppression des fichiers originaux. Créez un commit en remplissant le formulaire en haut à gauche. Une fois que vous avez fait cela, vous pouvez revenir à l’onglet branches et publier la branche gh-pages (ou la branche principale, si vous créez des pages pour nomutilisateur.github.com). C'est l'étape qui envoie votre code à GitHub et lance le site statique sur le serveur..

Vous pouvez également facilement cloner le référentiel via la ligne de commande. en sélectionnant l'URL en haut de la page du projet et en exécutant la commande suivante.

 git clone [email protected]: nom d'utilisateur / nom du projet.git

Ensuite, vous devrez créer une nouvelle branche appelée gh-pages; cette branche doit également être complètement vide. Exécutez ces commandes:

 git checkout --orphan gh-pages Git rm -rf. git commit -am "pages initiales commit"

(Pour plus d'informations, consultez la documentation officielle).

Cela fera descendre le projet dans un dossier appelé nom du projet (quel que soit votre projet) dans votre répertoire de travail actuel, et aura également automatiquement GitHub en tant que origine distante. En gros, cela signifie que vous pouvez créer des fichiers et y apporter des modifications, puis suivre les commandes suivantes pour suivre ces fichiers et modifications et les transmettre à GitHub..

 git status # récupère et renvoie l'état actuel du référentiel; cela montrera les nouveaux fichiers et les modifications non suivies git add. # ceci ajoute tous les nouveaux fichiers créés git commit -am "Voici mon commit initial" # cela crée un commit sur votre branche courante (par défaut, la branche principale) git push origin gh-pages #cela repousse la branche gh-pages à GitHub.

Ce processus sera répété à travers toutes les itérations de votre site à mesure que vous apportez des modifications. Cela fonctionne très bien, mais que se passe-t-il si vous souhaitez héberger un blog statique? Jekyll, la plate-forme de blogs statiques la plus populaire, est supportée par défaut par les pages GitHub. (Jekyll a été construit par un membre de l'équipe de GitHub.)

Utiliser Jekyll avec les pages GitHub

Pour utiliser Jekyll avec GitHub Pages, vous devez d’abord créer un site Jekyll localement. Vous pouvez compiler localement ou autoriser GitHub à compiler pour vous. Pour commencer, vous pouvez suivre ce guide sur Octopress, un framework qui résume certaines des fonctions de base de Jekyll..

Vous pouvez également créer un site Jekyll brut. Tout d'abord, vous devez installer le joyau Jekyll. En règle générale, cela signifie exécuter la commande suivante:

 gem installer jekyll

Si vous avez installé RubyGems, cela devrait tirer la dernière version stable.

Jetez un coup d’œil au guide d’utilisation, ainsi qu’à ce guide sur NetTuts. Vous devrez créer la structure de fichier de base avant que Jekyll puisse générer un site. Pour être opérationnel rapidement, jetez un coup d'œil à la base Jekyll de Daniel McGraw, qui définit la structure de fichier nécessaire à la génération d'un site par Jekyll. J'ai également pris quelques instants pour créer un script réutilisable appelé jekyll_structure. Suivez les instructions d'installation. si cela ne fonctionne pas pour vous, créez simplement la structure suivante manuellement.


.
| - .gitignore
| - LISEZMOI
| - _config.yml
| - _layouts
| | - layout.html
| '- post.html
| - _posts
| '- 1985-10-26-Test-Post.md
'- index.html

La configuration principale de Jekyll sera placée dans le _config.yml fichier. _layouts tiendra les dispositions qui seront utilisées sur la génération.

Une fois que vous avez créé des publications et des pages, puis les avez modifiées, vous pouvez simplement les ajouter à votre référentiel git et les valider, comme expliqué précédemment:

 git add. git commit -am "Ajout d'un nouveau message" git push origin gh-pages # ou git push origin master pour les pages username.github.com

Remarque: il est beaucoup des frameworks plus faciles à utiliser comme Octopress ou Jekyll Bootstrap pour générer automatiquement des posts et des pages pour Jekyll, avec des commandes similaires rake new_post ["Le nom du message va ici"] au lieu de créer manuellement vos fichiers de publication ou de page.


Autres choses importantes à noter

Il est important de se rappeler que les référentiels définis comme privés sur GitHub créeront des pages publiques. GitHub a créé cette fonctionnalité pour que les projets publient facilement de la documentation; ceci est centré sur l'idée d'ouverture. Les sites statiques hébergés sur GitHub ne seront bientôt pas cachés de personne.

Ne vous limitez pas à la conception ou à la structure prédéfinie dans les pages générées automatiquement par GitHub. Celles-ci sont facilement modifiables en tirant simplement le référentiel sur votre machine locale, en apportant des modifications et en les soumettant..

Plus vous en saurez sur Git et GitHub, plus vous serez à l'aise avec GitHub Pages. Jetez un coup d'œil à ce post sur Treehouse, ainsi qu'à ce tutoriel Tutsplus de Jeffrey Way sur GitHub for Designers.

Si vous souhaitez rediriger votre propre domaine vers un domaine GitHub Pages, consultez ce guide sur la page d'aide de GitHub pour commencer. Qui sait? Peut-être pouvez-vous vous débarrasser de votre fournisseur d'hébergement personnel et passer à l'état statique!


Conclusion

L'utilisation de GitHub Pages est extrêmement pratique, notamment lorsqu'elle est associée à d'autres outils tels que Jekyll. L'apprentissage des outils dont dépend GitHub Pages vous aidera à devenir un développeur et un concepteur frontal de meilleure qualité et plus précieux, et constitue un excellent moyen de présenter vos projets. De plus, GitHub fournit ce service gratuitement à tout le monde, le coût de démarrage est donc limité à la valeur du temps que vous passez à apprendre. Qu'est-ce que tu attends? Plonger!