Transcription
1. Introduction: Hé, les gars, je m'appelle Paris. Je suis un développeur Web de pile complète basé à New York, et je travaille comme instructeur professionnel de développement Web depuis 2016. Aujourd'hui, je vais vous guider dans un processus très simple qui va vous montrer comment
déployer des sites web statiques. Alors quelle page est que vous avez offert en HTML, CSS et JavaScript. Je vais vous montrer un moyen rapide et facile de les mettre en ligne pour que tous ceux qui ont un
navigateur Web et avec votre fille puissent y accéder publiquement. Si vous trouvez ce cours utile et que vous appréciez ce que je fais, veuillez laisser un commentaire. Si vous avez des questions ou des commentaires, faites-les partager afin que moi ou le reste de la communauté puissions vous aider. Nous pouvons tous apprendre ensemble. Je vous encourage vraiment à poster votre travail afin que les futurs étudiants puissent voir ce qui est possible après avoir suivi ce cours. Et enfin, si vous voulez rester au courant de tous les cours que je publierai à l'avenir, suivez-moi sur mon profil d'instructeur
2. Aperçu du cours: D' accord, les gars. Avant de plonger, je veux juste te montrer ce qu'on va faire aujourd'hui. On n'écrira pas vraiment de code. J' ai déjà écrit du code. Si nous regardons mon éditeur de texte, j'ai un fichier HTML qui a juste un bouton et j'ai un fichier CSS et j'ai un
fichier javascript qui. Eh bien, quand je clique dessus, il apparaît une boîte d'alerte. Eso comme vous pouvez le voir ici en regardant la barre d'adresse. Ce sont ces pages Web en cours de chargement à partir de mon système de fichiers local et ce que nous allons faire aujourd'hui est de comprendre OK, comment pouvons-nous passer du développement local à avoir la même chose sur un vraiment votre l pour que quelqu'un avec un navigateur Web et cette année, Earl peut visiter cette page Web et voir toutes les mêmes fonctionnalités
3. Configuration initiale: D' accord, donc la première chose qu'on va faire est de visiter. Obtenez hub dot com et nous allons créer un compte. Évidemment, si vous avez déjà un compte, vous n'avez pas à le faire. Vous pouvez simplement utiliser ce compte. Mais si vous n'avez pas de compte, si vous êtes nouveau pour obtenir Hub, il suffit de visiter la page d'accueil. Cliquez sur le bouton d'inscription qui va déclencher le flux d'inscription, et il va vous demander votre nom d'utilisateur. Votre email. Votre mot de passe. Au fur et à mesure que vous continuez, il va vous demander de choisir le type de compte que vous souhaitez être ce
compte payant ou gratuit . Um, je vais suggérer pour l'instant, juste pour aller avec le compte gratuit, ça va signifier que tout votre code que vous poussez pour obtenir le hubby va être public. Cependant, dans notre cas d'aujourd'hui pour ce que nous essayons de faire, ce n'est pas du tout un problème. Si vous choisissez
Teoh, payez, payez, oubliez le hub dans le futur. Vous pouvez toujours effectuer cette modification ultérieurement pour avoir des référentiels privés et rendre votre code non accessible publiquement. Mais pour aujourd'hui, juste pour que les choses commencent rapidement pourquoi ne pas aller de l'avant et créer un
compte gratuit si tu n'en as pas déjà un, la deuxième chose que je vais te demander de faire après toi, fiston. Afriat Hub est visitez le point de bureau Get hub dot com et nous allons juste télécharger, euh, l'application de bureau native. Oublie, hein ? Ça va nous rendre la vie un peu plus facile en termes de communication avec get hub, nous n'allons pas avoir à utiliser la ligne de commande pour utiliser get Nous n'allons pas avoir à ouvrir une fenêtre de
terminal pour beaucoup de gens qui vont rendre les choses un peu un peu plus convivial. Um, et ça va juste faire ça un peu plus d'une expérience d'apprentissage rapide. Si vous vouliez à l'avenir plonger plus profondément dans get et l'utiliser sur le terminal, par tous les moyens aller pour elle. Mais pour le moment, nous allons juste utiliser pour obtenir le client de bureau Hub et rendre les choses aussi simples que possible version que nous pouvons simplement lancer nos pages Web et les rendre publiques, et nous pouvons aller à partir de là
4. Contrôle de version explication: Bon, maintenant que nous avons nos comptes get have et que nous avons téléchargé le
client get have desktop , nous allons parler du contrôle de version. On va parler de get et on va parler de get, hein ? Nous allons entrer un peu en détail sur ce qu'ils sont réellement,
comment ils sont différents et comment ils jouent leur rôle dans ce que nous essayons de faire en ce
moment , qui est le lancement, sont nos premiers sites Web pour qu'ils soient accessibles au public. Le contrôle de version est donc ce concept de suivi des modifications apportées à un projet au fil du temps. Ah, bon système de contrôle de version vous fournira un moyen de prendre des instantanés de votre base de code pendant que vous apportez des modifications. Et puis vous pouvez aller de l'avant et inspecter comment votre code a regardé chaque instantané. Et s'il a un riche ensemble de fonctionnalités, un système de contrôle de version devrait également vous permettre de voyager dans le temps, si vous voulez, entre les instantanés afin que vous puissiez retourner les versions précédentes de Teoh de votre base de code indépendamment de ce qu'il ressemble à l'heure actuelle, tant que vous avez pris les mesures appropriées pour faire ces instantanés dans le passé. Donc, ceci ici est juste un petit diagramme, une petite représentation visuelle de la façon dont
un projet peut ressembler au fil du temps et comment le
contrôle de version fonctionne réellement pour créer des instantanés d'un projet au fur et à mesure qu'il change au fil du temps. Donc si on regarde par ici, euh, la boîte verte indique tout le projet. Vous pouvez penser à cela comme le répertoire où vivent tous mes fichiers de code. Donc, pour construire html, voir, en tant que sites Web de script de travail, vous pourriez deviner que j'aurais un fichier html point d'index dans le répertoire racine de mes projets. Mon dossier de projet s'appelle mon projet, et j'ai un fichier ici. Ça s'appelle l'étude de l'index. Elle, Mel et moi avons juste dans chaque étiquette qui dit, Salut là. Je vais prendre un instantané de mon projet en ce moment, et je vais dire que cet instantané est instantané un, et je vais donner à cet instantané un message sur. Je vais juste dire que les messages ajoutent le premier fichier html. Après avoir pris cet instantané, je vais apporter quelques modifications à ma base de code sur. Je vais ajouter un fichier CSS point principal. Ce fichier CSS point principal va juste modifier la couleur des balises H un. Et une fois que j'ai ce fichier ajouté et que j'ai tout le contenu de ce fichier comme
je le veux, je vais prendre un autre instantané. Je vais dire que cet instantané a une idée de deux est le deuxième instantané, et je vais lui donner un message qui dit, J'ai ajouté le premier fichier CSS Puis après cela,
une fois que j'ai ce premier instantané dans le deuxième instantané dans mon , je vais changer ma base de code à nouveau. Et je vais en fait simplement modifier mon fichier html de point d'index afin que les balises H one soient maintenant des balises p. Et une fois que j'ai ceci comme je le veux une fois que tout le code a été modifié et que je pense que les choses allaient bien, je vais aller de l'avant et prendre un autre instantané. Ça va être l'instantané numéro trois. Le message pour cela va être que j'ai édité le fichier HTML. Donc, si vous pensez à tous ces instantanés, vous savez, à la fin de tous ces changements, mon code ressemblera à lui dans le troisième instantané. C' est la version actuelle sur laquelle je travaille. Cependant, la chose qui est si puissante sur le contrôle de version est même si mes balises H one air maintenant les
balises p et j'ai maintenant un fichier CSS point principal, je peux toujours revenir en arrière et référencer à quoi ressemblait mon code au premier instantané ce que mon ressemblait au deuxième instantané. Et je peux aussi basculer entre ces trois instantanés tant que j'ai pris le temps dans le passé de les prendre. Et c'est en un mot. Qu' est-ce que le contrôle de version et pourquoi il est si puissant. Vous pouvez imaginer que si vous avez,
vous savez,
fait du développement Web depuis vous savez, un certain temps que ces fichiers n'ont pas seulement trois lignes en eux. Ils peuvent être des dizaines ou des centaines de lignes. Ils pourraient changer toutes les quelques heures tous les quelques jours, et il pourrait être vraiment, vraiment difficile de savoir ou de se souvenir à quoi vous pourriez ressembler dans le passé. C' est pourquoi le contrôle de version est si utile et pourquoi il est si puissant. Donc maintenant pour obtenir est le système de contrôle de version le plus largement utilisé de loin il est en fait un programme de ligne de
commande, ce qui
signifie que vous avez Teoh savoir comment utiliser le terminal ou une autre
interface de ligne de commande . Afin d'utiliser le programme get brut. Cependant, il ya beaucoup d'applications de bureau obtenir Hub bureau étant l'un d'entre eux, celui que nous venons de télécharger qui nous permettent d'utiliser la puissance de get dans une certaine mesure sans avoir besoin de plonger dans la ligne de commande. Il y a donc quelques phrases clés que nous voulons vous familiariser avec. Eso que lorsque nous parlons d'obtenir et d'utiliser get étaient sur la même page. Le 1er 1 est commit. Commit est juste un autre mot pour l'un de ces instantanés que nous prenons chaque fois que nous faisons une modification à notre code que nous voulons enregistrer dans notre historique get, nous allons prendre un commit, et ce commit va avoir une idée unique. Et il va aussi avoir un message des changements que nous avons fait un dépôt. Beaucoup de gens les appellent repos. Le référentiel est juste une collection de commits pour un projet donné. Donc, si vous regardez tous les commits d'un projet, vous pouvez obtenir l'historique entier, et ceux-ci sont tous stockés à l'intérieur d'un référentiel. Ah, dépôt
local est une copie d'un dépôt qui existe sur votre machine, votre ordinateur, votre ordinateur portable, votre bureau, votre bureau, quoi que ce soit. Un référentiel distant est une copie d'un référentiel qui existe sur un serveur distant maintenant activé. Il est donc très important de distinguer entre se lever et se lever, bien qu'ils aient tous les deux obtenu en nom. Get Hub est en fait une entreprise, alors que get est un programme. Get est un projet open source qui a été créé par Linus Torvalds. Get Hub est une société privée qui facture ses services et tente de rendre le monde du développement
logiciel beaucoup plus facile. Il s'agit d'une plate-forme SAS basée sur le cloud pour héberger des dépôts get distants, et dans notre cas, il va être extrêmement utile pour fournir des fonctionnalités pour servir les
pages Web incluses dans les référentiels que nous hébergeons sur get et ce sera à travers un appelée Get Hug Pages. Ça fait aussi beaucoup plus de choses, et on pourra y entrer plus tard. Mais pour l'instant, nous nous soucions seulement de ces deux choses. Get Hub Desktop est l'application de bureau native que nous venons de télécharger, et cela va nous rendre facile pour nous de couler notre référentiel local sur notre ordinateur avec le référentiel distant que nous créons sur Get.
5. Créer et cloner un répertoire GitHub: Bon, maintenant que nous avons un peu une compréhension de ce que c'est et de ce que c'est obtenir Hub et comment ils jouent ensemble, nous allons aller de l'avant et créer notre premier dépôt de hub get. Donc nous allons chercher espoir point com dans la barre de talent en haut. Oui, il y a cette icône plus. On va cliquer sur le fait qu'il y aura une liste déroulante avec la nouvelle option de dépôt. On va cliquer dessus, et ça va nous amener à la page où on pourra créer un nouveau dépôt. Nous allons donc d'abord sélectionner un nom pour ce dépôt. Je vais appeler ça Bonjour, World Website. Euh, assurez-vous que vous n'avez pas d'espace dans le nom. Je vais laisser la description vide, et je vais la laisser comme dépôt public. Je vais juste cliquer sur le bouton de l'écran et lancer les choses. Donc maintenant, il a créé mon dépôt sur get, hein ? Mais nous n'avons pas encore de code. Évidemment, nous venons de le créer, et cela nous donne quelques options sur la façon dont nous pourrions ajouter du code à partir d'un dépôt existant en utilisant des commandes de ligne de commande. Cependant,
aujourd'hui, nous allons utiliser le client de bureau get hub. Donc, au lieu d'utiliser ces options, nous allons cliquer sur ce bouton ici. Et cela va nous demander si nous pouvons ouvrir le il a des applications de bureau. Je vais cliquer dessus. Et une fois que nous aurons ouvert
ça, ça va nous donner quelques informations dès le début. C' est le U. R L. Pour le dépôt, le dépôt distant que nous venons de créer sur Get up. Le deuxième bit d'informations est le chemin d'accès du fichier local à l'endroit où cette version locale du référentiel va vivre sur nos ordinateurs. Donc, comme vous pouvez le voir, get Hub Desktop client crée ce répertoire get hub dans mon dossier Documents et il
va juste stocker ce projet dans le répertoire Hello World Website dans ce
répertoire get of . Donc tout ça a l'air génial. Je suis dans un clone de clic et maintenant vous pouvez voir que ce dépôt hello world a été ajouté à mon répertoire local get hub dépôts et tout est lié
6. Commencer les changements locaux et pousser à GitHub: d' accord. Donc, dans notre dernière section, nous avons créé notre premier référentiel get home, et nous avons cloné ce référentiel sur nos ordinateurs afin que nous ayons une instance locale de ce référentiel
distant. Donc si nous pensons à ces deux dépôts, ce ne
sont que des copies de la même chose, ils peuvent devenir désynchronisés. Mais vraiment, nous voulons les garder synchronisés. Et c'est ce que ce get up application de bureau nous aide à faire. Donc, lorsque nous apportons des modifications sur notre ordinateur local, nous allons les plonger dans le dépôt distant afin que tout le code puisse être le même dans les deux endroits. Donc la première chose que je vais faire en ce moment est ouvrir le Finder, et je vais juste vous montrer ce bureau Get Hub. Est-ce vraiment dans vos documents ? Holder, si vous travaillez sur un Mac, Je ne suis pas sûr de comment cela fonctionne sur les fenêtres, Mais si vous travaillez sur un Mac dans votre dossier Documents, il va créer un répertoire get hub pour vous. Et tous les référentiels que vous créez ou gérez avec votre application de bureau get up vont être stockés dans ce répertoire get Hub, vous pouvez changer l'emplacement par défaut. Mais c'est là qu'il stockera des choses pour vous et où il cherchera des référentiels si vous ne modifiez pas cette option par défaut. Comme vous pouvez le voir ici, puisque nous venons de cloner le dépôt du site Hello World sur nos machines locales, nous avons ce répertoire hello world juste ici. Et c'est là que tout notre code source va aller pour que nous puissions valider ces modifications puis les envoyer au dépôt distant. Donc, j'ai vraiment du code de démarrage ici, et vous pouvez télécharger le même manteau de démarrage ci-dessous à partir du lien. Je vais juste copier et coller ça ici pour qu'on puisse se lever et fonctionner très rapidement. Et quand je fais cela, si nous revenons à l'application de bureau get hub, nous pouvons voir qu'il a ces trois fichiers que je viens d'ajouter. Et il est dit que ces nouveaux fichiers aériens qui n'ont pas encore été suivis, c'est ce que signifie ce
plus vert pour que je puisse regarder tous les fichiers. Tout ce qui est nouveau va être en vert, et tout est assez beau. J' ai juste un fichier JavaScript. Je n'ai pas indexé le fichier html point et je suis resté au fichier CSS. Donc je vais commettre ceci et ce sera mon premier commit. Et la convention pour votre premier commit est juste de le nommer le premier commit, et je pourrais lui donner une petite description ici. En cela, ils ajoutent l'index html, je veux dire, pas CSS et ont besoin de fichiers Js dot. Et une fois que j'ai ajouté ce message et la petite description, je vais juste cliquer sur ce bouton, engager à maîtriser, et c'est tout. J' ai créé un de ces instantanés dont nous avons parlé plus tôt. Cette version de mon code a été solidifiée qu'elle est maintenant dans l'histoire pour cela. Obtenir le dépôt. Maintenant, rappelez-vous, c'est tout sur mon dépôt git local. Aucun de ces changements n'a encore été reflété. Obtenez hub dot com. Nous venons ici et nous rafraîchissons la page. Nous pouvons voir que cela ressemble toujours exactement à ce qu'il faisait avant. Donc nous avons Teoh pousser ces changements pour obtenir hub dot com. Et nous pouvons le faire juste en publiant cette branche ici. Cliquez sur ce bouton pour me demander de me connecter. Évidemment des hauts. Paris et mon mot de passe ne sont pas super. Une fois que j'ai signé, il sait qui je suis. Et ça pourrait faire cette connexion. Et il peut couler ce code de sorte que lorsque je rafraîchis cette page, tout mon code est maintenant ici sur get hub dot com.
7. Permettre les pages GitHub pour votre référentiel: Bon, Donc maintenant que nous avons le code goudron de notre dépôt local Toe un dépôt de hub à distance , tout ce que nous avons à faire pour permettre à notre site Web d'être accessible au public est d'aller à l'onglet Paramètres , faites défiler vers le bas à la section étiquetée obtenir des pages accrochées, changer ceci aucun. Option déroulante pour la branche principale et cliquez sur ce bouton Enregistrer. Une fois que nous aurons fait ça, nous pourrons faire défiler vers le bas. La page va se rafraîchir, et elle va en fait nous donner un vous, comte que nous pouvons visiter pour accéder à notre site Web. Donc, si nous cliquons dessus, nous allons probablement obtenir un 40 pour bien, en fait pas. Donc, il a mis à jour pour moi assez rapidement. Parfois, ils peuvent prendre quelques minutes pour même quelques heures, mais comme vous pouvez le voir ici, j'ai cette fille publique que n'importe qui peut rendre visite. Et voici ma page web. Je peux cliquer dessus. Mon script de travail fonctionne. Mon CSS fonctionne et c'était vraiment si simple. Ici, tout ce que nous avons fait était de changer une option sur un dépôt et ça marche juste. C' est pourquoi nous utilisons get hub et get up age. Aujourd'hui, car cela prend vraiment beaucoup de mal de tête sur le déploiement de sites Web de pages statiques. Et ça rend la vie super simple à nouveau. Je vais juste cliquer sur ce bouton. C' est si satisfaisant, super boulot.
8. Faire des changements après que vous avez déployé: D' accord. Nous venons donc de voir à quel point il est facile d'écrire du code sur nos ordinateurs locaux. Pousser vers le haut pour obtenir hub, cliquer un commutateur pour activer obtenir ses pages, puis avoir un site Web face au public qui
fonctionne pleinement avec un vraiment comte que d'autres personnes peuvent visiter sur leurs navigateurs Web. Comment allons-nous maintenant apporter des modifications au code et maintenir les choses en état aujourd'hui alors que nous
continuons de nous développer ? Eh bien, c'est vraiment juste un simple comme les choses étaient en premier lieu. Je vais ouvrir mon éditeur de texte et je vais le faire très simple. Je vais changer la couleur de ce bouton de rose. C' est toi, vert. Je vais venir ici pour monter le bureau. Je vois qu'il y a une ligne qui a été changée. Je vais en faire un commit donc à nouveau, vous ne pouvez pas pousser de modifications à moins qu'il ne soit enveloppé dans un commit ou à moins que vous preniez un de ces instantanés. Donc je vais faire un autre engagement. Le message ici va être changé la couleur du bouton. Je n'ai pas besoin d'ajouter une description, mais vous pouvez toujours le faire. Et puis je vais cliquer sur ce bouton pour valider. Une fois que je fais ça, je peux voir que j'ai ce petit air ici et ce petit avec un étroit par ici . Cela m'indique que mon référentiel local et mon référentiel distant ne sont pas synchronisés
en ce sens que j'ai réellement un commit qui est en avance sur mon référentiel local, puis mon référentiel distant. Donc, je vais cliquer sur ce bouton origine poussé, et ça va juste couler tout pour moi. Si je reviens pour obtenir le hub de la page pour mon dépôt et que je rafraîchis, je peux voir que le dernier commit est maintenant changé la couleur du bouton au lieu du premier commit. Je peux également voir quels fichiers ont été affectés par cela. Commit. Donc, le fichier CSS juste ici Ceci a été changé du rose au vert. Super. Revenez ici sur mon site de vie chaque rafraîchir la page et c'est génial
9. Gochyas: Très bien, gars, ça s'enroule pour cette vidéo sur la façon d'utiliser les pages de levage pour déployer des
sites statiques . Je vais juste passer quelques gouaches qui pourraient te donner du mal si tu ne sais pas ce que tu cherches. Le 1er 1 est probablement l'un des plus courants, et ce n'est tout simplement pas avoir un fichier html point d'index dans la racine de votre dossier de projet. Cela signifie que dans le niveau le plus externe de votre dépôt get hub, il doit y avoir un fichier html appelé index dot html. C' est le fichier qui va être servi comme page d'itinéraire pour votre site Web. Tu ne peux pas le faire nommer autre chose. Elle doit juste être indexée en fonction de l'âge. Maintenant, vous pouvez avoir un tas d'autres pages HTML que vous liez vers qui sont d'autres pages de votre site. Mais vous devez avoir ce point d'index html. Un autre problème qui peut survenir est que vous apportez des modifications localement, mais vous, pour une raison quelconque, ne
pouvez pas les pousser vers le haut pour obtenir le hub. Il se peut que vous n'ayez pas réellement engagé ces changements. N' oubliez pas que nous devons prendre ces instantanés afin de pousser les modifications locales vers notre
référentiel distant . Donc, si vous n'avez pas pris ces instantanés après une modification, vous ne serez pas en mesure de pousser ces modifications. Une autre chose qui pourrait être un peu frustrante et déroutante au début. à quoi vous vous habituerez beaucoup, c'est le fait que le code que vous poussez vers le haut peut prendre quelques minutes, même quelques heures avant qu'il ne soit en direct. J' ai donc utilisé de la magie du film dans cette vidéo pour accélérer les choses. Mais il y avait quelques minutes de retard entre le moment où j'ai fait quelques changements et poussé à obtenir aide quand ils ont été reflétés dans mon lieu de vie. Donc j'espère que cela couvre la plupart des bombes de la route que vous pourriez rencontrer. S' il y en a d'autres, veuillez commenter ci-dessous. Je ferai de mon mieux pour régler tous les problèmes. Si ce n'est pas moi. Espérons que la communauté vous aidera les gars
10. Conclusion: Très bien les gars, donc c'est à peu près tout. Comme vous pouvez le voir, déployer des pages Web statiques avec get hub and get pages est assez simple. C' était vraiment mon objectif dans ce cours était de vous offrir une méthode de déploiement qui a un faible obstacle à l'entrée. Est-ce vraiment tout ce que vous avez à faire est de vous concentrer sur l'écriture de code et vous n'avez pas à vous
soucier des opérations de développement ou de quelque chose comme ça à nouveau. Si vous trouvez ce cours utile et si vous appréciez ce que je fais, veuillez laisser un commentaire. Vous pouvez partager cela avec toute personne qui, vous pourriez penser, pourrait également bénéficier de l'information. Si vous avez des questions ou des commentaires, partagez-les également afin que soit moi ou le reste de la communauté de communication puisse
essayer de vous aider. Et enfin, si vous avez des idées de cours que vous pourriez souhaiter voir à l'avenir,
faites-le moi savoir et j'essaierai de faire en sorte que cela se produise. Vous pouvez suivre mon profil d'instructeur pour voir tous les cours que je publie à partir d'ici et partager votre travail afin que vous puissiez inspirer d'autres étudiants