Transcription
1. Intro: Bienvenue dans le cours où
je vous explique comment héberger votre site Web avec
GitHub Pages gratuitement, avec votre .com ou un
autre domaine. Mais il y a un petit hic. Vous ne pouvez héberger que des
sites Web statiques basés sur HTML, React, Angular ou des technologies
similaires. Cependant, vous pouvez également
faire des appels d'API pour afficher si des graphiques
boursiers, etc. En
gros, vous ne pouvez pas héberger sites Web
dynamiques qui
utilisent des bases de données comme MySQL ou des technologies telles que
PHP, WordPress, larval, Maintenant, avez-vous besoin d'
installer Git sur votre système
pour que cela fonctionne ? Et la réponse courte est non. Vous n'avez besoin que des fichiers statiques de votre
site Web ? Un domaine
totalement optionnel, URL de
votre site Web
ressemblera à ceci. Si vous n'avez pas de nom d'utilisateur de
domaine.. io, et il
ressemblera à ceci si vous en avez un. Et un compte GitHub, c'est tout. Mon nom est Shelby
sera présumé être développeur complet, un professeur de
productivité et
un ancien fondateur de startup. J'ai beaucoup d'autres
cours ici sur Skillshare. Assurez-vous de les consulter. Et vous pouvez également
visiter mon site web, shelter, we've point com
pour en savoir plus sur moi. Passons maintenant
directement au cours et
hébergeons votre site Web
sur les pages GitHub.
2. Git vs Github: Quelle est la différence
entre Git et
GitHub puisque le logiciel que vous téléchargez sur votre ordinateur pour suivre les
modifications de votre code, si vous développez un site Web, un logiciel ou une application, le
les dossiers que vous souhaitez qu'il suive sont
appelés dépôts Git. Github, en revanche, est un site Web que vous pouvez utiliser pour héberger ces poses ou
dossiers
sans armes sur leur site Web afin
de travailler avec d'autres développeurs sur
le même projet. Pour cette classe, nous n'avons pas
besoin d'installer Git. Nous n'avons besoin que d'un compte GitHub.
3. Inscription et création d'un repo sur Github: Très bien, donc pour héberger votre site Web sur les pages GitHub, vous devez avoir un compte
GitHub.com. Et pour cela, vous vous connectez
à GitHub.com, entrez votre adresse e-mail et cliquez sur S'inscrire à GitHub, ce que je vais faire
très rapidement ici. Et cliquez sur Sign up for GitHub. Très bien, il vous montre une animation
très cool qui dit : « Bienvenue à vous lever,
commençons l'aventure ». Et ton e-mail. L'e-mail est
automatiquement pris. Je vais donc cliquer sur Continuer. Nous devons maintenant créer
un mot de passe ici. Je vais donc créer un
mot de passe et cliquer sur Continuer. Maintenant, il est indiqué d'entrer un nom d'utilisateur Gardez donc à l'esprit que quel que soit le
nom d'utilisateur irrigué, entrez ici l'adresse de votre site Web GitHub
Pages. Ce que je veux dire par là,
c'est que, par exemple, si j'écris Skillshare GHP, accord, Skillshare GHP n'
est pas disponible. Je vais donc essayer
avec Skillshare GitHub. Très bien. Skillshare
GitHub est donc disponible. URL de mes pages GitHub sera donc Skillshare, GitHub, GitHub, io. accord, quel que soit le
nom d'utilisateur que vous mettez ici sera l'URL de vos
pages GitHub, d'accord ? Sauf, bien sûr, si vous enregistrez
un domaine .com ou un autre. Je vais donc cliquer
sur Continuer ici. Et il dit :
Voulez-vous recevoir des mises à jour
et des annonces de
produits par
e-mail par y pour
oui ou N pour non. Je vais donc taper N
et cliquer sur Continuer. Maintenant, il est dit que
pour vérifier votre compte, vous devez résoudre ce casse-tête. Cliquez sur Démarrer le puzzle ici. La galaxie spirale. Très bien, encore une
fois, et c'est fini. Cliquez donc sur Créer un compte ici. Très bien, tu as presque fini. Nous envoyons un code de lancement pour fermer le partage de compétences Leap point
sur bro, Don't mail.com. Je vais aller voir mon
proton mâle à Marks. Très bien, nous avons
reçu l'e-mail de GitHub contenant le code de lancement. Et voici le code de lancement. Je vais donc simplement copier ceci
à partir d' ici et le coller ici. bon, c'est ça. Je vais simplement cliquer sur Ignorer la personnalisation.
Oui, c'est ça. Très bien, nous avons fini de créer
notre compte GitHub.com. Nous devons maintenant créer
un référentiel dans lequel nous allons télécharger les fichiers de
notre site Web. Cliquez donc sur Créer un
référentiel ici. Très bien, donc lors de la création d'un dépôt pour héberger votre
site Web sur des pages GitHub, vous devez garder certains paramètres à garder à l'esprit. La première et la
plus importante chose que vous devez garder à l'esprit
ici est le nom du dépôt. Le nom du dépôt
sera donc votre nom d'utilisateur.github.io. Donc, mon nom d'utilisateur que j'ai créé ici est Skillshare get up, qui apparaît ici. Je vais donc simplement
écrire la même chose. Skillshare, github.github.io. Très bien, c'est donc disponible et vous devez
écrire une description ici, qui est encore une fois facultative. Mais je vais
écrire Skillshare, obtenir un site Web de démonstration de cours d'âge. Et je vais cliquer sur Créer un référentiel et m'
assurer que celui-ci est public et
non privé, ce qui est également une
chose importante à garder à l'esprit. Vous pouvez créer un fichier Lisez-moi, mais c'est totalement facultatif. Il ne nous reste plus qu'à cliquer
sur Créer un dépôt ici. Très bien, nous avons donc créé
avec succès notre dépôt Skillshare,
github.github.io. Et dans la leçon suivante, nous
téléchargerons les fichiers du site Web ici. Très bien, alors on
se voit dans le prochain.
4. Téléchargement de fichiers de sites Web: Très bien, nous devons maintenant télécharger les fichiers de
notre site Web sur GitHub.com. J'ai donc créé ce
petit site web ici, que je vais vous
montrer très rapidement. s'agit donc simplement d'un site Web statique qui indique que ce site Web est hébergé gratuitement à vie
sur GitHub Pages. Vous allez
héberger la taille de la poignée d'identification et obtenir de l'aide pour en savoir plus. Essayez ce
cours de Skillshare par tir. Très bien, un
peu de marketing. Et vous pouvez également passer des appels APA
à partir d'ici, comme ceci. Il s'agit donc d'un
appel d'API météo que je vais faire
à partir de là. Peut-être que vous écrivez le nom d'une ville, par
exemple San Jose, et que vous cliquez sur Rechercher. Il va vous montrer
le temps qu'il fait pour San Jose. Très bien, c'est un appel d'API que je fais
pour ouvrir l'API météo. Et cela est basé sur un thème Bootstrap
gratuit que Dieu ferme démarrer
bootstrap.com, ce site Web ici. Et c'est le thème
que j'ai utilisé. J'ai donc édité du code
et je l'ai fait ressembler à ceci. Et l'API que
j'ai créée ici. Nous allons donc télécharger
ce site Web sur GitHub. Revenons donc sur GitHub et cliquons sur télécharger un fichier
existant ici. Nous devons maintenant faire glisser les fichiers ici
pour les ajouter à votre dépôt. Donc, ce que nous allons faire ici c'est que nous allons simplement le
faire en plein écran. Et je suis là. C'est le dossier qui
contient tous les fichiers de mon site Web. Je vais donc
tout sélectionner et le faire glisser
vers cet emplacement sur GitHub.com. Très bien, comme vous pouvez le voir, les fichiers sont en cours de téléchargement. Je vais donc le
refaire en plein écran. Très bien, donc tout est
maintenant téléchargé. Nous devons maintenant faire
un commentaire ici. Vous devez écrire un message de
validation ici. Je vais donc
écrire la première version. Très bien, et cliquez
sur Commit Changes. D'accord, github précède
maintenant nos fichiers. Cela peut prendre quelques secondes. Ouaip, c'est fini. Très bien, tous les fichiers de notre site Web sont
maintenant téléchargés et nous sommes prêts à lancer notre site Web
GitHub Pages. Alors on se voit dans le prochain.
5. Lancement du site web github.io: Très bien, tous les fichiers de
notre site Web sont maintenant téléchargés sur GitHub. Et nous sommes prêts à lancer
notre site Web GitHub Pages. Pour ce faire, nous devons cliquer sur Paramètres
ici et accéder aux pages. Très bien, il indique que votre site est publié sur Skillshare
GitHub, github point IO. Donc, si vous cliquez ici, notre site Web est lancé. Ce site Web est hébergé gratuitement sur
GitHub, et vous pouvez également effectuer des appels d'
API à partir de là. Et comme je
vous l'ai montré sur mon site web local, qui était ce San Jose. Essayons autre
chose ici. Essayons Londres. Et cliquez sur « Rechercher ». Ouaip, ça marche. Nos appels d'API fonctionnent à partir de
ce site Web GitHub Pages. Comme je l'ai vu tout à l'heure, votre nom d'
utilisateur.github.io sera votre site Web GitHub Pages
comme vous le voyez ici est la parenté
github.github.io. Très bien, laissez-moi cliquer
sur ce bouton de retour ici. Très bien, nous avons
lancé notre site Web avec succès. Ça, c'est bien. Bien sûr, github.github.io. Et ça
restera toujours comme ça. Donc, si vous avez un
site Web statique ou un site Web d'entreprise, vous pouvez héberger des pages GitHub, comme je vous l'ai montré ici. Très bien, dans la leçon suivante, nous allons créer
un nom de domaine personnalisé pour notre site Web. Je ne veux donc pas que ça
ressemble à Skillshare,
github.github.io. Nous allons donc utiliser un domaine personnalisé pour notre site Web GitHub Pages. C'est ce que nous allons voir
dans la leçon suivante.
6. Configuration de domaine personnalisé: Très bien, nous avons donc
lancé avec succès notre site Web
à Skillshare, github dot github dot IO. Nous sommes maintenant prêts à
configurer notre domaine personnalisé. OK, donc je vais accéder à
mon compte GoDaddy ici, et j'ai acheté ce
domaine GitHub Pages point live pour ce cours. Et je vais simplement copier
ce nom de domaine à partir d'ici. Je vais le coller
ici et cliquer sur Enregistrer. Très bien, nous pouvons maintenant
voir que nous avons une erreur qui indique que la
vérification DNS a échoué parce que les enregistrements DNS
ne sont pas supprimés à l'intérieur de notre domaine. Alors qu'allons-nous faire ici ? Nous allons réduire
les enregistrements DNS. La première chose que nous allons
faire est de cliquer sur En savoir plus. Je vais donc faire un
clic droit sur En savoir plus et cliquer sur Ouvrir le
lien dans un nouvel onglet. Et rendez-vous sur cette page qui indique Gérer
votre domaine personnalisé. Faites défiler jusqu'à
ici, ce qui indique un enregistrement. Copiez maintenant l'un d'entre eux et accédez à votre compte GoDaddy ou tout autre
compte de fournisseur de domaine que vous possédez. Je vais simplement cliquer
sur ces trois points ici et cliquer sur Gérer le DNS. Le même processus s'applique donc à tous les fournisseurs de domaines. Vous n'avez donc pas
à vous inquiéter à ce sujet. Accédez simplement à la section Gérer le DNS au sein
de votre fournisseur de domaine. Et maintenant, nous devons mettre
à jour les enregistrements ici, est-à-dire les enregistrements DNS. Je vais donc simplement
cliquer sur Ajouter. Choisissez un type
de nom. Et la valeur sera l'adresse IP que
j'ai copiée depuis site
GitHub Pages et que j'ai
cliqué sur Ajouter un enregistrement. Très bien, l'enregistrement
est maintenant mis à jour. Nous devons
encore apporter un changement. Vous pouvez donc voir ici que nous avons des pages
GitHub en direct enregistrement CNAME. Nous devons mettre à jour
l'enregistrement CNAME. Il suffit donc de cliquer sur Modifier
et cette valeur
sera l'URL de votre site Web GitHub
Pages, ce qui est crucial.
GitHub.GitHub.io. Je l'ai donc copié et
je vais le coller ici et cliquer sur Enregistrer. Donc le type
va être le nom C, nom est www valeurs peuvent partager github.github.io et cliquez
simplement sur Enregistrer. Très bien, donc c'est mis à jour, mais ça ne marchera
pas tout de suite. Cela prend entre
quelques minutes et 24 heures. Nous devons donc attendre un peu ces changements se produisent. Très bien, essayons donc
d'ouvrir notre site web, GitHub Pages point live. Et dans le
paramètre spatial GitHub afin que vous
puissiez voir que votre site est prêt à être publié sur
GitHub Pages point live. Très bien, je
vais juste faire un clic droit ici et cliquer sur
Ouvrir le lien dans un nouvel onglet. Très bien, notre site Web est
en ligne sur GitHub Pages point live. Qu'est-ce que c'est cool ? Nous avons maintenant un domaine personnalisé pour notre site Web
GitHub Pages. Et nous pouvons également
accéder à ce site Web à partir de Skillshare github
dot github dot IO. Mais lorsque j'ai saisi
l'URL du site Web, elle change automatiquement
pour obtenir une durée de vie de base. Très bien, essayons donc de faire quelques appels d'API
depuis ce site Web. Je vais donc simplement
cliquer sur les appels APA et taper le nom de la ville pour voir si
cela fonctionne ou non. Je reste donc à Calcutta. Donc je vais juste écrire
Kolkata et cliquer sur Rechercher. Ça fonctionne les gars. Comme vous pouvez le constater,
tout fonctionne parfaitement et nous avons créé
avec succès notre site Web
GitHub Pages et configuré un domaine personnalisé. Qu'est-ce que c'est cool ? Maintenant, si nous étions bloqués quelque part, tu peux toujours revenir
et revoir ce cours. Très bien, je
te vois dans la prochaine leçon, qui sera la dernière
leçon de ce cours.
7. Conseils et avantages: Dans cette leçon, je vais
partager quelques conseils pour mieux gérer votre site Web
GitHub Pages. Donc, si vous souhaitez
apporter des modifications à votre site Web à l'avenir, comment allez-vous procéder ? Il existe maintenant deux façons
de le faire. Vous pouvez simplement vous
rendre dans votre dépôt GitHub et cliquer sur le fichier
que vous souhaitez modifier. Donc, si je veux modifier
ce fichier index.html, je vais simplement cliquer ici. Et cela m'amène à cette page de l'éditeur de code
index.html. Maintenant, vous pouvez cliquer
sur ce crayon. Je peux modifier ce fichier, ou vous pouvez également appuyer sur E sur
votre clavier, E pour l'édition. Donc je vais juste appuyer sur E. Et cela me permettra de
modifier ce fichier. Donc, par exemple, si je
retourne sur mon site Web et que je veux
juste supprimer ce truc
à vie ici. Donc je vais juste
retourner dans mon éditeur de code ici et chercher la vie. Oui, c'est ici. Je vais juste sélectionner cette option. Supprimer. Oui, c'est ça. Je vais donc simplement
valider les modifications. Je vais donc simplement écrire supprimé à vie et cliquer
sur Commit Changes. Très bien, donc notre
engagement a été pris. Maintenant, si je retourne mon site GitHub Pages et que je clique sur cette icône d'
actualisation ici. Et c'est toujours
pareil parce qu'il n'effectue pas les
modifications instantanément. Il faut un peu de temps pour
que les changements se produisent. Nous allons donc attendre un moment et cliquer à nouveau
sur Actualiser. Très bien. Maintenant, comme vous pouvez le voir,
les modifications qui sont mises à jour et cela n'
a guère pris une minute ou deux. Maintenant, je vais revenir sur GitHub
et cliquer sur mon dépôt. Vous pouvez également télécharger
un fichier mis à jour ici. Je vais donc simplement revenir dans
mon dossier où j'ai créé ce site Web et modifier
ce fichier index.html. Je vais donc commencer par Sublime Text. Et d'accord, alors ouvrez les pages. Je vais juste changer
le titre des pages GitHub pour héberger votre site web
avec une grille de Vegas. Et faites défiler vers le bas. Et je vais juste
ajouter un smiley ici. Ouaip, c'est ça. Et
c'est à peu près tout. Je vais simplement cliquer sur
Save Command S pour mon cas. Et je vais juste
quitter le mode plein écran. Et je peux simplement cliquer
dessus et le faire glisser jusqu'ici. Très bien. Je vais peut-être écrire la version 2 et cliquer sur Commit Changes. Très bien, comme vous pouvez le voir, il affiche la version 2
à côté de notre fichier index.html. Maintenant, si je retourne sur mon site GitHub Pages
et que je clique sur Actualiser. Très bien, encore
une fois, la
mise à jour des modifications prendra quelques instants. Nous allons donc attendre un moment
et appuyer à nouveau sur Actualiser. Appuyons sur Actualiser. Très bien, nos modifications sont mises à jour. Maintenant, le titre indique, héberger votre site Web
avec GitHub Pages. Et notre smiley est également
ajouté ici. C'est ainsi que vous pouvez apporter des modifications à votre site Web
GitHub Pages. Maintenant, je vais revenir
à mon dépôt GitHub. Maintenant, au cas où vous
voudriez consulter les versions précédentes ou les modifications
que vous avez apportées jusqu'à présent. Vous pouvez simplement cliquer sur cette icône de montre
qui indique « Commits ». Il vous montrera tous les
commentaires précédents qui ont été faits. Je peux simplement cliquer sur ce
View come and doodles ici. Et cela me montrera quelle ligne
a été supprimée un fond rougeâtre
et quelles lignes ont été ajoutées avec ce fond
vert. Ok ? Si vous revenez en arrière, vous pouvez également consulter les commentaires précédents
et voir les modifications. Voyons maintenant
quelques avantages et inconvénients de l'utilisation de
pages GitHub pour héberger votre site Web. Les avantages sont que c'est gratuit. Vous n'avez pas à dépenser un centime
pour héberger votre site Web ici. Vous pouvez configurer votre domaine
personnalisé pour donner à l' URL de
votre site Web un aspect
professionnel et soigné. Il vous fournit un certificat
SSL gratuit. Il s'éclaircit rapidement. Votre site Web
se charge en un clin d'œil. Il est très facile d'apporter des modifications à votre
site Web, comme je vous l'ai déjà montré ici. Vous pouvez également passer des appels APA, mais vous ne pouvez héberger que des
sites Web statiques sur GitHub Pages.
8. Projet de classe et conclusion: J'espère que tu aimes le cours. Il est maintenant temps pour vous d'
héberger votre propre site Web sur GitHub Pages et de partager des
captures d'écran avec la classe. J'ai hâte de les
découvrir si vous êtes confronté à
des défis, directement dans la section
discussion sur Skillshare. Et je vais t'aider. Vous pouvez également
revenir et revoir cette leçon ici
sur Skillshare. J'espère que tu as apprécié le cours. Consultez mes autres
cours ici sur Skillshare. Merci beaucoup d'avoir
suivi ce cours.
Shatadip Majumder, Productivity Coach
