Publica tu sitio web con GitHub Pages en 20 minutos

1. Intro: Salut. Je m'appelle Aga. Je suis aussi concepteur de codage et professeur. J' adore les dinosaures, les vieux claviers, couleur rose, les plantes et Internet. Dans ces cours, nous allons apprendre à publier facilement votre site Web sur le World Wide Web. C' est génial d'avoir votre site Web en ligne car vous pouvez facilement partager le lien avec vos amis, famille ou peut-être un futur employeur. Nous allons utiliser les pages GitHub pour rendre votre site web prêt et en direct sur Internet. Qu' est-ce qui est si génial dans ces cours ? Tout d'abord, ils sont doux et courts. Le second, vous allez apprendre GitHub Pages, qui est gratuit. Troisièmement, vous aurez votre site Web sur le web pour que tout le monde puisse le voir, le voir, l'envoyer à d'autres personnes. C' est difficile ? Tu demandes. Non, ce n'est pas le cas. Y a-t-il des prérequis ou des choses que je dois avoir ? Seul le site que vous avez codé. Mais que se passe-t-il si je n'ai pas déjà codé mon site Web ? Pas de soucis, j'ai préparé plusieurs cours sur HTML et CSS pour les débutants. Alors vous rendre disponible sur le web par une publication de votre site Web avec ma petite aide dans ce cours. Apprentissage et publication heureux. se voit dans les prochains cours. 2. Ce que vous devez préparer: Ce que vous devez préparer. Tout d'abord, le site que vous avez codé, la deuxième chose, l'application de bureau GitHub que vous pouvez télécharger gratuitement, et le troisième, votre navigateur Web préféré. Si vous n'avez pas encore codé votre site Web, ne vous inquiétez pas, j'ai préparé plusieurs cours sur l'apprentissage du HTML et du CSS à partir de zéro. Grâce à eux, vous pourrez coder le site depuis le début jusqu'à la fin afin que votre site soit prêt à être publié. Vous pouvez consulter le code de votre propre portefeuille ou booster votre image de marque personnelle. 3. Enregistrer un compte GitHub: Leçon numéro un. La première chose que nous devons faire est de créer un compte GitHub. Nous le faisons sur GitHub.com et la configuration de votre compte peut être gratuite et c'est ce que nous faisons. Bien sûr, si vous voulez améliorer votre plan, il y a un moyen ouvert. Mais pour nos besoins, le compte gratuit est totalement suffisant. Nous devons trouver le nom d'utilisateur. Ce point est super important car une partie de ce nom d'utilisateur va être dans l'adresse de notre site Web. Vous devez penser, quel est le but de votre site Web ? Allez-vous l'envoyer à votre futur employeur ? Si oui, c'est peut-être mieux d'avoir votre prénom et votre nom au lieu de surnom. Tout dépend de ce que vous allez faire avec cette adresse et avec qui allez-vous la partager. Mon nom d'utilisateur serait awwwesome-website, et ceci est disponible. Le créateur d'adresse par les pages GitHub pour mon site Web sera celui-ci, awwwesome-website.github.io. Il est important de choisir le bon nom d'utilisateur. J' ai awwwesome-website, je dois remplir email et mot de passe, puis je dois vérifier mon compte. Je vous donne une minute pour finir et nous reviendrons pour les prochaines étapes. 4. Qu'est-ce que Git et GitHub ?: Leçon numéro 2. Donc vous avez enregistré votre compte sur GitHub, mais il y a une question qui vous vient à l'esprit et c'est ce qu'est Git ? Dites-nous plus à ce sujet. Bien que nos cours soient axés sur la publication du site, pas sur le GitHub et Git eux-mêmes, je vais vous dire brièvement de quoi il s'agit. Donc Git est un système de contrôle de version. Cela signifie qu'il présente l'historique des modifications dans vos fichiers. Versioning signifie garder une trace de toutes les modifications qui se produisent dans les fichiers et leur référentiel. Qu' est-ce que le dépôt ? Vous pouvez le considérer comme un dossier, la collection de fichiers plus anciens. Lorsque nous pensons au système de contrôle de version, nous pouvons jeter un oeil aux outils que nous utilisons dans notre vie quotidienne. Par exemple, vous pouvez imaginer écrire un texte dans Google Docs et Google Docs enregistrer l'historique de toutes vos modifications. Je ne savais pas si tu en avais entendu parler. Vous pouvez passer en revue ce qui se passait, vous pouvez facilement revenir à la version précédente, vous pouvez également nommer cette version. Git joue donc ce rôle aussi bien pour le code et tous les fichiers qui construisent le site Web, les applications, tout ce qui est lié au développement des outils. C' est Git. Mais qu'est-ce que GitHub ? C' est la même chose ? En fait, non parce que GitHub est le fournisseur de services. GitHub fournit donc le service Git. C' est une solution que nous pouvons utiliser et en partie c'est gratuit. Bien sûr, si vous souhaitez avoir plus de fonctionnalités, vous devez le mettre à niveau vers le compte payant. Git est largement utilisé dans le monde informatique. Nous allons utiliser seulement quelques fonctionnalités de celui-ci. C' est pourquoi je ne veux pas développer plus sur certains sujets, mais si vous avez des questions, n' hésitez pas à me le faire savoir dans les commentaires. Je serai heureux de préparer de nouvelles classes pour vous centrées sur les commandes Git uniquement. Il y a quelques mots que je vais utiliser qui sont GitHub Desktop qui est le logiciel qui nous aide à connecter nos fichiers localement sur notre ordinateur avec les repos distants sur les serveurs GitHub. Je vais parler de commit, je vais mentionner le repo, dont vous avez déjà entendu parler. Je vais aussi mentionner git push, mais c'est quelque chose que vous pouvez le prendre pour acquis. Encore une fois, ne vous inquiétez pas des détails, notre objectif est de publier notre site Web, pas d'explorer tous les recoins de GitHub et système de contrôle des versions. 5. Qu'est-ce que GitHub Desktop et les pages GitHub ?: Leçon numéro 3. GitHub Desktop est l'application gratuite qui vous permet de connecter des référentiels locaux, sorte que vos fichiers locaux avec le distant qui est hébergé sur les serveurs GitHub. Il est pratique d'utiliser GitHub Desktop parce que nous n'avons pas besoin d'apprendre les commandes Git ou d'utiliser le terminal, ce qui pourrait être terrifiant pour certaines personnes. GitHub Pages nous allons héberger le site Web que nous avons créé. Cela signifie que nous pouvons publier le site Web qui est actuellement dans le dépôt distant sur un GitHub. Pour le faire vivre dans le monde entier, signifie que tout est gratuit, et en quelques clics. Pour être honnête, je pense que c'est méthode très accessible pour publier votre site Web sur le web. Si vous avez envie de creuser plus dans GitHub Pages et par exemple, utilisez votre domaine personnalisé que vous avez déjà acheté, vous pouvez aller sur le site GitHub Pages pour en savoir plus. Nous allons vérifier la configuration de base. Configurer le dépôt GitHub avec le nom approprié, puis vérifier notre adresse, qui est votre nom d'utilisateur.github.io, pour voir notre site Web prêt et en ligne. 6. Créer le premier référentiel: Leçon numéro 4. Mon compte est vérifié, donc maintenant je peux continuer. Dans l'étape suivante, nous allons créer notre premier dépôt. Vous pouvez imaginer comme ceci est un dossier sur notre ordinateur, et ce dossier est surveillé par Git. Il vérifie s'il y a de nouveaux changements avec notre modification, tout, ce qui se passe dans ce dossier, dans ce dépôt est sur le radar. Maintenant, je peux cliquer sur « Créer un référentiel » à partir de cette page d'accueil ou je peux aller à mon compte, cliquer sur « Référentiels », et cliquer sur « Nouveau » bouton. Il est maintenant temps de taper le nom du référentiel et c'est très important parce que nous devons d'abord écrire le nom d'utilisateur. Donc, mon nom d'utilisateur est awwwesome-website et la partie suivante qui est that.github.io. Fondamentalement, vous pouvez nommer le dépôt tout ce que vous voulez, mais pour le rendre disponible pour les pages GitHub pour le publier en ligne, nous devons écrire le nom d'utilisateur et ensuite github.io parce que cela va être l'adresse de notre site Web. La deuxième chose est la description. Nous pouvons écrire que c'est mon site web personnel. C' est facultatif pour que vous puissiez le laisser vide si vous le souhaitez. Nous devons rendre notre dépôt public afin qu'il soit disponible pour tout le monde, et nous pouvons initialiser la création du dépôt avec le fichier README. Le fichier README est juste un fichier qui indique ce qui est réellement à l'intérieur. Ainsi, nous pouvons ajouter quelques informations sur les technologies, si le projet est plus compliqué, par exemple, si vous travaillez sur le développement d'une application mobile ou d'un logiciel sérieux, généralement les développeurs fournissent leurs informations sur la façon de compiler le projets. Mais ce sont des informations très techniques. README peut être vide, donc ne vous inquiétez pas pour l'instant. Je pense que dans notre but, c'est juste bon de savoir ce qu'est le fichier README, mais nous pouvons l'avoir vide. Il est maintenant temps de cliquer sur « Créer un référentiel » et c'est presque prêt. Oui, c'est le cas. Nous avons donc créé notre dépôt. C' est notre premier, très excité pour ça. Il est presque vide. Je dis que c'est presque vide car il a un fichier qui est README, mais il n'y a pas de fichiers connectés à notre site Web donc nous n'avons pas d'index, html ou aucun style ou image, donc nous devons mettre nos fichiers dans un dépôt distant et faire cela, nous allons utiliser le bureau GitHub. Maintenant, vous pouvez ouvrir desktop.github.com et télécharger l'application. Dans l'étape suivante, je vais vous montrer comment connecter notre référentiel distant que nous avons créé sur GitHub avec nos fichiers locaux. 7. Configurer le bureau GitHub et le premier engagement: Leçon numéro 5. Mon application est installée. C' est GitHub Desktop. Vous le lancez simplement en double-cliquant sur l'icône de GitHub Desktop, ou vous pouvez le trouver avec Spotlight sur Mac ou en trouvant les fichiers sur Windows. Pour l'instant, je dois me connecter à mon application de bureau GitHub. Je peux cliquer sur « Clone a Repository from the Internet ». C' est exactement ce que nous voulons faire. Je fais marquer GitHub.com, et nous devons nous connecter avec nos identifiants que nous avons utilisés pour l'inscription GitHub. Pour moi, mon nom d'utilisateur est awwwesome-website, et le mot de passe. Maintenant, je suis connecté. Vous pouvez voir que nous avons actuellement un dépôt, qui est celui que je viens de créer. Je peux cliquer dessus. J' ai un bouton bleu en bas, qui dit clone ce repo, c'est assez long. Je veux le cloner du repo distant vers mon ordinateur. Je clique juste dessus. C' est quelque chose que nous laissons, et c'est l'adresse par défaut. C' est le chemin local dans notre ordinateur où nous aimerions que notre repo soit sauvegardé. Nous pouvons choisir s'il sera sur un bureau ou un sous-dossier, ce qui est plus facile pour vous et où vous voulez conserver ces fichiers. Pour moi, j'ai déjà choisi le chemin et je clique sur « Clone ». Mon repo est cloné avec succès. Ne vous inquiétez pas et ne soyez pas terrifiés par tous ces noms et tables. Je vais te montrer ce dont on a vraiment besoin parce qu' on n'apprend pas Git dans ces cours. Notre objectif est de publier notre site web. Laissez-moi vous montrer le dossier avec mon repo. Il s'agit d'un dossier appelé site Web. Ici, j'ai les fichiers de mon site Web qui sont déjà codés. Nous pouvons mettre ici votre site web, votre index.html, vos images, CSS, tout ce que vous avez créé. Ici, j'ai le dossier nommé exactement comme mon repo sur GitHub. Il n'a que le fichier README, mais nous voulons mettre notre site Web ici. Ce que je fais est que je viens de marquer tous ces fichiers qui construisent mon site Web en fait et glissent vers le dossier. Mon repo a plus de fichiers maintenant. Je vais juste vous montrer rapidement le site que j'ai codé pour vous montrer que cela fonctionne. C' est le site que j'ai créé. Si vous souhaitez avoir quelque chose de similaire, je vous recommande fortement d'assister à mes cours. Ils sont intitulés Code votre propre portefeuille, et dans les trois heures, vous pouvez coder ce site Web. Mais revenons au dossier. Les dossiers sont ici. Laissez-moi vérifier notre bureau GitHub, il est mis à jour avec ces nouveaux fichiers et ils sont marqués en vert. Cela signifie que ces choses sont nouvelles dans notre dépôt. En fait, chaque fichier est nouveau. Chaque ligne de code aurait été marquée en vert. Ce que je dois faire, je dois marquer tous ces fichiers et les valider. Que signifie réellement commit ? Commit enregistre nos modifications dans le référentiel local, ce qui signifie qu'elles sont sûres. Même si nous faisons quelque chose en attendant, nous n'avons pas besoin de nous inquiéter parce qu'ils sont en engagement. Ils sont presque sauvegardés dans notre dépôt à distance aussi. Laisse-moi les commettre. À chaque commit, nous écrivons le résumé de ce qui se passe dans ces changements. Ici, nous pouvons taper, par exemple, première version de mon site, et je peux m'engager à maîtriser. Master est une branche par défaut. Je ne veux pas approfondir les détails, mais vous devez me croire que maître est une branche par défaut pour chaque repo, et je clique sur « Commit ». Tous ces nouveaux changements, tous ces nouveaux fichiers vont être engagés dans notre dépôt. Je vois que la liste est vide parce que rien n'a changé. Toutes les modifications précédentes sont enregistrées, donc mon dépôt est à jour. n'y a pas de changements locaux comme vous pouvez le voir ici. La seule chose que nous devons faire est, nous devons pousser tous les changements au repo distant, au repo que nous avons créé sur GitHub. Je clique sur « Push origin » sur le bouton bleu, et tous les objets, tous les fichiers sont poussés et nous sommes prêts. Vérifions ce qui se passe sur GitHub.com, sur mon compte. Je suis sur GitHub.com et voici mon repo. Si vous avez déjà fermé ce site Web, vous pouvez facilement y accéder à vos référentiels, ouvrir le référentiel que vous venez de créer. Vous pouvez voir que nous avons ce fichier README et nous avons le premier commit d'Aga, et ceci est le résumé, première version de mon site Web. Nous pouvons voir ici tous ces fichiers. Nous pouvons voir aussi que la poussée a été faite il y a une minute. 8. Appliquer les modifications et visualiser le site Web publié: Leçon numéro 6. Maintenant, nous sommes heureux que nous avons tout engagé, mais que se passe-t-il si nous voulons changer quelque chose sur un site Web ? Imaginons la situation que je voudrais changer le titre de mon site Web avant de le vérifier en ligne. J' ouvre le bureau GitHub. Je peux voir l'histoire. Je peux par exemple aller à ce dossier. Je peux ouvrir celui-ci dans Atom. C' est l'éditeur de codage. Imaginons qu'ici je veux écrire je suis Aga Doe, maintenant c'est Jane, mais Aga. Je retourne au bureau Github et je peux voir qu'il y a un changement. Je passe à l'onglet Changements, et Jane est en rouge. Ça veut dire qu'il a disparu, et en vert je vois Aga. bureau Github voit mes modifications. Il sait instantanément ce qu'il se passe dans mes dossiers. Par exemple, ici il y a un détenteur de place, il y a un indice. Je peux écrire la mise à jour index.html, mais je peux aussi écrire en changeant le nom de l'auteur. Je clique sur « Commit to master ». La même chose, nous avons engagé les fichiers, mais pour les rendre disponibles sur le dépôt distant, nous devons cliquer sur « Push origin ». Vérifions si mon commit est enregistré sur GitHub.com. Oui, c'est le cas. Si je clique sur le nom de ce commit, je vois que Jane a disparu et Aga est ajouté. Je vous ai dit qu'en fait, ce sera l'URL, l'adresse de notre site Web. Copions ceci, collez-le dans le navigateur Web et voyons ce que nous pouvons voir. Notre site web est la vie et il est prêt. C'est pas cool ? Je l'ai fait en fait très peu de temps. Je peux voir qu'il y a Aga, donc mon site est mis à jour. Je peux copier ce lien et l'envoyer à tous ceux que je veux. C' est tellement cool. C' est tellement excitant. Imaginons la situation que je voudrais changer certaines choses sur le site à nouveau. Je suis dans Atom et par exemple je veux écrire Je suis génial Aga. Je sauve celui-là. Bien sûr, si je rafraîchis cela, je ne verrai pas les changements car les changements ne sont pas validés et ne sont pas poussés vers notre repo distant. Ces modifications sont effectuées uniquement localement. Ce que je dois faire, tu te souviens ? Nous devons vérifier les changements, je peux voir que cette rubrique est mise à jour. J' ai besoin d'ajouter à nouveau la description de mon commit, en changeant à nouveau le titre, et je le commet à master. Mes modifications locales sont enregistrées. Je suis bon d'aller les publier dans le dépôt distant. Il semble qu'ils soient engagés et poussés. Laissez-moi rafraîchir le site Web. Ici, nous avons bonjour, je suis Aga Doe, et maintenant nous devrions avoir, je suis génial Aga. Je peux voir que mon titre est mis à jour. Bien que c'est trop long, ça ne me dérange pas. Je voulais juste vous montrer qu'en fait nous pouvons faire les changements et vous pouvez les voir instantanément. Parfois, votre cache dans le navigateur Web peut être plein, il est donc bon d'ouvrir vos outils de développement en cliquant avec le bouton droit de la souris sur « Inspecter ». Ici, nous allons avoir le cache vide disponible et le rechargement dur. Il effacera le cache et rechargera le site Web. Si vous avez des problèmes avec voir les changements, vous pouvez le faire. C' est ça. Notre site Web est en ligne. On peut le changer. Vous pouvez envoyer un lien à tout le monde. Je pense que c'est génial parce que ça n'a pas pris beaucoup de temps pour que ça marche. qui est important, c'est que c'est gratuit. Vous pouvez facilement ajouter le contenu. Vous pouvez également avoir un contrôle sur vos modifications sur un site Web. 9. Exercice: La dernière leçon. Après avoir terminé mes cours, vos devoirs sont super simples. Coller le lien vers notre section projet. J' adorerais voir vos pages et je suis super curieux de savoir comment tout s'est passé. Il existe de nombreux autres outils que vous pouvez utiliser pour connecter GitHub à votre référentiel local. Donc, je recommandais le bureau GitHub, mais il y a l'arborescence des sources. Vous pouvez également utiliser la ligne commune, qui est alors un autre niveau d'avancement. Je garde les doigts croisés pour tous vos commentaires et tous vos sites Web publiés. Vous pouvez me trouver sur Instagram, sur Twitter, ou vous pouvez simplement envoyer un lien en utilisant votre email. 10. Bonus : bêtisier: Alors faites votre vente. Tout d'abord, apprendre tout le processus avec cela, parce que ce sera un grand cadeau. Non.