Transcription
1. Bienvenue à lancer votre site Web en utilisant les pages GitHub: get Hub Page est un excellent moyen de partager en démo. Les projets sur lesquels vous avez travaillé peuvent vous aider à obtenir un emploi en tant que développeur et prouver que vos compétences sont un excellent moyen de raconter au monde toutes les choses étonnantes sur lesquelles vous avez
travaillé . On doit avoir des pages d'accueil. Tu n'as pas besoin de payer pour quoi que ce soit. C' est absolument gratuit. Vous n'avez pas besoin de vous soucier de la gestion des serveurs, des configurations
complexes, des bases de données ou autre chose du genre. Vous pouvez simplement vous concentrer sur la création d'un site Web ou d'un portefeuille magnifique et le mettre sur. Lève-toi, lève-toi. Les pages sont le chemin le plus direct pour obtenir votre code sur Internet. n'y a pas de frais, pas de prises, pas de complexités. Aussi, ne vous inquiétez pas. Si vous ne savez pas vraiment, obtenez pendant que vous suivez ce cours parce que je vais vous montrer comment utiliser. Passez tout le reste de ce cours, mais aussi parce que je vais vous montrer un moyen supplémentaire d'ajouter des fichiers à votre site Web. Salut, je tue dire et bienvenue à ma classe de partage de compétences. Je développe des sites Web depuis plus de 20 ans. J' ai enseigné plus de 1/4 1 000 000 étudiants dans ma vie, et j'utilise get chaque jour dans ce cours, vous allez lancer votre propre site web à partir de zéro en utilisant get hub pages. Donc, si vous voulez obtenir vos projets de portefeuille sur Internet aujourd'hui, c'est absolument le cours pour vous. Merci d'avoir regardé, et j'espère vous voir à l'intérieur.
2. Configurer votre compte GitHub gratuit: OK pour ce cours, vous alliez avoir besoin d'un compte de point point de get get à leur absolument gratuit. Donc tout ce que nous avons à faire est de se diriger vers le hub dot com, et nous pouvons créer un compte complètement gratuit. Votre nom d'utilisateur sera donc ce que vous voulez utiliser pour votre site Web. Donc, il va être par exemple, Caleb péage point Get hub dot io. Ça va être mon site web. Toi ? Eh bien, parce que c'est mon nom d'utilisateur. Caleb me l'a dit. Vous allez donc vouloir spécifier votre nom d'utilisateur, car le changer sur la route peut ou non être possible. Donc je vais mettre Caleb dot Colleen. Oh, ne
peut utiliser que sur contenir des caractères alphanumériques. Ah, j'ai clôturé. Donc, pas de points. Donc tu pourrais mettre à peu près tout ce que tu veux ici. Donc tu pourrais essayer comme cette suggestion a tué Julian. Star a tué le péage Max. J' aime ça. Je ne sais pas pourquoi. 31319 Mais vous pourriez mettre n'importe quoi dans votre pour votre nom d'utilisateur. Donc, vous mettez votre nom d'utilisateur et ensuite pour votre adresse e-mail, vous venez de vous mettre à je ne sais pas. Peut-être gmail dot com Si vous avez un gmail dot com ou Hotmail ou Yahoo ou n'importe où Ah, wow, qui est déjà pris Ah, ou invalide. Intéressant sur. Ensuite, vous venez de mettre votre mot de passe et vous vous inscrivez. Vous devrez vérifier votre adresse e-mail pour vous connecter à votre
compte de messagerie , vérifier votre adresse e-mail, puis vous pourrez vous connecter. Donc, une fois que vous avez votre compte, vous pouvez vous connecter. Mon nom d'utilisateur est Caleb dit, et mon mot de passe est quelque chose que je ne vais pas dire à haute voix. Votre compte n'aura probablement pas tous ces trucs amusants ici, mais vous aurez besoin de quelque chose pour commencer avec Git. Maintenant, il va y avoir deux façons de le faire. Nous pouvons soit éditer des fichiers directement sur get hub dot com, ou nous pouvons éditer des fichiers sur notre ordinateur et le pousser vers le haut pour se lever. Et je vais vous montrer comment faire les deux dans la prochaine leçon. Allons de l'avant et créons notre premier repo, puis je vais vous montrer comment installer git
3. Créer un référentiel « spécial » sur GitHub: D' accord, allons de l'avant et créons votre premier dépôt. Donc, quand vous vous connectez pour
vous lever, vous verrez quelque chose qui ressemble à ça. J' ai une sorte d'alimentation ah ici des différents dépôts et bases de code que je
surveille en quelque sorte . Mais tu n'as pas besoin de t'inquiéter pour ça. Il vous suffit de cliquer ici et de cliquer sur Nouveau référentiel. Maintenant, ce dépôt doit avoir un nom spécial. Mais avant même d'y entrer, qu' est-ce qu'un dépôt de toute façon ? référentiel
est essentiellement un endroit où vous pouvez stocker tout votre code et votre historique de code. Donc, si j'ai écrit du code aujourd'hui et qu'il s'avère que je ne sais pas, j'ai cassé mon site Web et j'ai écrit du code il y a trois jours. Mais je sais ce qui marchait. Je pourrais en fait revenir dans le temps et utiliser ce code. Je n'ai pas à m'inquiéter d'essayer de le réparer. Je peux littéralement remonter le temps, utiliser le code qui fonctionne et ensuite, vous savez, réparer par la suite afin que mes utilisateurs ne soient jamais vus un site Web cassé. Et ça s'appelle la version ing. C' est l'un des pouvoirs derrière. Obtenez donc dans votre dépôt ici, vous allez vouloir utiliser un nom très spécial. Ce sera votre nom d'utilisateur point Get hub. Pas Io. Donc pour moi, mon nom d'utilisateur est Caleb Tallinn. Mais je vais utiliser Caleb hauling dot Get hub dot io Ce n'est pas obtenir hub dot com parce que c'est le site Web. On est sur son point central, je rentrerai à la maison. La page est toujours en direct sur un domaine dot io. Je vais initialiser ça. Lisez-moi, euh, ce dépôt avec le lisez-moi. C' est juste un exemple de fichier. On ne peut pas changer ça plus tard. Et aussi, vous allez vouloir vous assurer que c'est public. Cela ne fonctionne pas sur les référentiels privés. Donc, votre code doit être public, ce qui est en fait OK, parce que si vous créez une page d'accueil get pour vos pièces de portfolio, vous allez vouloir montrer ce code de toute façon. Ainsi, rendre ce public sera bon pour les employeurs de jeter un coup d'oeil à votre code. Alors vous allez de l'avant, cliquez sur créer un référentiel, et voilà. Nous avons un dépôt. Donc, nous avons juste mis en place un référentiel de base, rappelez-vous, vôtre ne sera pas Caleb tolling Dugit hub dot io va être votre nom d'utilisateur point Get hub dot io Maintenant, vous pouvez toujours comprendre ce que votre nom d'utilisateur est dit ici. Signé en tant que Caleb, racontant. J' ai juste mis tout ça en minuscules. C' est très bien, mais ça va te montrer ici. Si ce n'est pas le cas, vous pouvez toujours aller dans vos paramètres sont généralement votre profil, et il vous montrera également. Donc, juste comme un exemple, dit mon nom ici, et il dit aussi mon nom d'utilisateur. Assurez-vous donc d'avoir un nouveau référentiel configuré avec votre nom d'utilisateur. Ne rentre pas à la maison, pas IO. Une fois que vous aurez fait cela, passons à la prochaine leçon où nous trouverons comment obtenir ce code sur notre ordinateur.
4. Qu'est-ce que le clonage, de toute façon ?: Très bien, nous allons devoir cloner notre code de get hub à notre ordinateur. Maintenant, clonage consiste essentiellement à copier votre code à partir d'un dépôt, celui que nous avons fait dans la dernière vidéo sur votre ordinateur. Donc, en gros, on prend le code des hubs, et on le met sur votre ordinateur maintenant. Vous n'avez pas vraiment besoin de cloner un orteil de référentiel fonctionne avec elle, mais cela rend beaucoup plus facile de travailler avec des fichiers sur votre ordinateur. Donc, dans les prochaines leçons, vous allez vouloir télécharger, monter sur votre ordinateur. Je vais vous montrer comment faire cela,
que vous utilisiez Windows, Mac ou Linux et puis nous allons configurer, obtenir. Mais si vous ne voulez
vraiment pas apprendre, obtenez ce que je vous suggère fortement de faire. Mais si tu ne veux pas, tu n'as pas à faire un peu plus tard. Je vais vous montrer comment vous pouvez éditer des fichiers sans même avoir sur votre ordinateur.
5. Comment installer Git sur Windows: Si vous utilisez Windows comme système d'exploitation, vous voudrez télécharger un programme spécifique à utiliser get. C' est de loin le meilleur programme pour Windows que j'ai trouvé. J' ai fait du développement sur Windows, Mac, Linux, vous le nommez. J' y ai été. Et quand je faisais beaucoup de travail sur Windows, c'était le programme vers lequel je me suis tourné. C' était un
très bon programme. Donc, vous voulez aller pour obtenir pour Windows dot org Cliquez sur votre bouton de téléchargement ici, et cela vous mènera à une page d'accueil get, qui, ironiquement, c'est en fait ce que nous allons apprendre assez tôt comme un petit enfant moyeu. Donc, si vous faites défiler vers le bas, vous verrez que nous avons des noms de fichiers et des trucs là-dedans. On a des actifs. Vous voulez télécharger le programme ? C' est bon pour vous le savez, les
chances sont que vous voulez télécharger obtenir 2.250 point zéro 64 bit dot dxy. C' est probablement celui qui veut. Maintenant, si vous avez un ordinateur plus ancien et un ordinateur portable Windows plus ancien pour non censuré ou un ordinateur de
bureau Windows plus ancien , vous pourriez vouloir obtenir le 32 bits. Mais si vous avez un ordinateur plus récent, disons au cours des quatre dernières années ou donc, vous allez certainement vouloir obtenir le téléchargement de fichier txt 64 bits qui installent cela. Et une fois que vous aurez installé cela, vous pourrez ouvrir un programme appelé Get for Windows. Et tout ce qui va ressembler, c'est un outil en ligne de commande quelque chose comme ça. Non, mon outil de ligne de commande est unique parce que je l'ai personnalisé un peu. La vôtre va sembler très similaire, va. Avoir des taxes et tu pourras écrire des trucs ici. Mais sinon la coloration pourrait être différente. Les côtés sont peut-être différents, mais tout ce dont vous avez vraiment besoin est de pouvoir taper des trucs ici maintenant, une chose amusante à faire. Si vous êtes sur Windows, vous pouvez toujours taper D I R. Et cela vous montrera une liste de vos fichiers et répertoires où vous êtes actuellement quelque chose comme ça pour vous déplacer rapidement. Tout ce que vous avez à faire est de taper les répertoires de changement de CD avec un sens pour le répertoire de changement. Vous pouvez voir le dans n'importe quel autre dossier que vous voulez, donc je vais juste, par
exemple, un CD dans été. Et puis si je fais P W. D. tu peux voir que c'est le dossier dans lequel je suis pour toi. Vous pouvez configurer un exemple de projet ou un exemple de projet sur votre bureau ou dans vos téléchargements, ou quelque part qui est un peu plus temporaire, puis un CD dans ce répertoire où que ce soit, de sorte que vous pouvez automatiquement commencer à travailler et nous le ferons partout. Entrez dans ce dossier particulier. Donc, ce que vous avez pour Windows installé et vous avez votre get for Windows Terminal ouvert. Nous commencerons avec la prochaine leçon où nous serons introduits dans get Hub.
6. Comment installer Git sur MacOS et Linux: Si vous utilisez un Mac ou un Lennix, il existe plusieurs façons différentes pour chaque système d'exploitation à installer. Prenez les premières choses en premier. Allons sur Mac parce que plus de gens utilisent Mac qu'ils ne le sont. Bureau Linux. Donc, sur un Mac, si vous avez un programme appelé Brew, vous pouvez taper brew install. Allez maintenant si vous n'avez pas de breuvage. C' est un programme appelé Homebrew, et je suggère d'obtenir ce système d'exploitation Mac de quatre ans. Ceci est vraiment juste un gestionnaire de paquets, donc vous permettre de mettre à jour facilement obtenir sur la route pour cela, par exemple, ou d'installer d'autres paquets qui pourraient être liés à obtenir ou pourraient être liés à un
projet particulier . Vous travaillez sur un outil très utile, donc c'est Mac numéro un. Mac Option numéro deux est Vous pouvez simplement ouvrir votre navigateur et aller à la source forge dot net slash projets slash git Dash os X dash installer slash fichiers Faites défiler cette page vers le bas, et vous aurez probablement juste envie d'obtenir le dernier. Donc celui-ci arrive à pointer vers 3.0, et vous pouvez voir qu'il a 30 000 téléchargements cette semaine. S' il y a une version plus récente. Vas-y définitivement. Allez-y, obtenez cette version plus récente. Mais si vous voyez celui-ci, vous pouvez aussi obtenir celui-ci aussi. Vous allez vouloir télécharger ceci, l'
installer, installer, et une fois que vous l'aurez opérationnel, vous serez en mesure d'ouvrir un programme appelé Terminal. Chaque Mac est livré avec ce programme appelé Terminal Will. Écrivez ça Terminal. Fondamentalement, c'est ce que j'utilise ici. Maintenant, j'ai une version personnalisée de mon terminal, mais votre terminal va ressembler à ceci. Maintenant, si vous êtes sur un linge, il y a une autre façon de le faire. Donc, d'habitude, vous tapez sudo Apt. Installez, obtenez, et cela installera Get pour vous si vous êtes dans une ancienne version de Lennix ou une
version plus ancienne de Let's Say You Chignon, aussi. Vous faites sudo apt get install, get et qui va l'installer pour vous sur les anciennes versions de vous. Mais tu dis que tu veux 12 14 16 quelque chose comme ça. Si vous êtes sur un groupe de 18 ans ou plus tôt, c'est juste du sudo. Apt installé. Obtenir Si vous êtes sur un autre système d'exploitation Linux. C' est peut-être Yaman. Peut-être quel que soit votre gestionnaire de paquets, mais il y a des chances. C' est que vous êtes des préfets. Quel que soit le nom de votre gestionnaire de paquets install, obtenez quelque chose dans ce sens. Si vous êtes déjà sur Lin X, il y a des chances que vous sachiez déjà comment le faire et que vous savez lequel utiliser maintenant, un petit cours de crash rapide. Si vous n'utilisez pas la ligne de commande sur Mac ou sur Lennox, vous pouvez taper PWD. Et cela vous montrera le répertoire de travail qui étaient dans ce que c'est vraiment juste un nom de dossier ah ici. Donc, je suis à la racine de mon ordinateur et puis je suis dans un dossier appelé Been and To Change Directory and Do CD et C D signifie un répertoire de changement Et puis pour lister tous vos fichiers et dossiers, vous pouvez toujours faire ls Dash L. A. Et tu vois que j'ai plein de trucs ici. Je vais voir le haut un répertoire un dernier tiret L A et vous pouvez voir que je suis juste en quelque sorte dans
la racine ici. Il n'y a rien de fantaisie ici. C' est juste vraiment des dossiers et un dossier temporaire ici. Nous allons travailler un peu plus avec la ligne de commande tout au long de ce cours. Ce n'est pas vraiment être lié. Donc, vous allez vouloir être familier avec CD. Laisse-moi, ah, juste que ça soit un peu centré ici. Vous allez vouloir être familier avec CD et probablement PWD No. Et aussi ls Dash L. Un CD à de nombreux arguments, parce que ce n'est pas une commande. Vous devez en faire un à la fois. Donc c'est CD PWD ou Ellis Dash L. A. Alors allez-y, installez-vous sur votre ordinateur. Une fois que vous l'avez installé et en cours d'exécution, votre terminal est ouvert. Ou, si vous êtes sur une machine de limites, vous voudrez ouvrir Un programme appelé Bash au lieu de Terminal Terminal est pour un Mac bashes pour les cliniques machine. Une fois que vous avez cela en cours d'exécution, vous pouvez taper get dash version et il vous montrera la version de Get que nous utilisons . Une fois que vous avez fait cela, passons à la prochaine leçon où nous commençons avec Get Hub
7. Comment configurer vos paramètres Git: avant d'en faire quoi que ce soit, nous devons le configurer sur notre ligne de commande parce que pour l'instant, si nous essayons de faire quelque chose avec get ou get hub de notre ligne de commande, il ne sait pas qui nous sommes. Il ne sait pas ce qu'on fait. Il ne sait rien de nous. Nous allons donc devoir configurer deux choses dont nous allons avoir besoin pour configurer notre nom et notre adresse e-mail. Et c'est exactement ce que nous consignons. On parlera de commits, de dédicaces et de tout ça. Mais fondamentalement, chaque fois que vous écrivez un petit morceau de code et que vous le mettez, obtenez le hub. Il y a une petite signature au hachage, en fait, et il a un auteur, et il a besoin de savoir qui est cet auteur. Donc, pour cela, nous allons taper get config, Dash, Dash global. Je fais un peu plus petit ici et vous pouvez voir certains de mes trucs d'en haut sont apparus. C' est bon, citations de nom de point
d'utilisateur, et je vais mettre mon nom comme Caleb disant parce que c'est mon nom. Et puis je vais taper get config, Dash Dash, email de point d'utilisateur
global, et ce sera mon adresse e-mail. Je mets cela aussi dans des citations, et je vais écrire mon adresse e-mail ici. Vous pouvez voir cela réellement enveloppé sur une autre ligne. C' est tout à fait correct si je fais le plus petit retourne sur une ligne, alors appuyez sur Entrée et c'est tout. Maintenant que les adresses e-mail devraient idéalement correspondre à votre adresse e-mail get Hub, je ne crois pas que ce soit réellement nécessaire, mais c'est une meilleure façon de faire les choses si vos adresses e-mail sont toutes alignées. Donc, peu importe ce que vous vous êtes inscrit sur Get Hub, obtenez le bucket Orbit, assurez-vous d'utiliser exactement la même adresse e-mail. Non, nous pouvons vérifier que cela a fonctionné en tapant Cat, et c'est une barre oblique labourée get config. Et si je fais onglet après le mot C o N f juste onglet, il se terminera automatiquement. Pour moi, ce fichier devrait exister, et maintenant nous pouvons voir que nous avons un utilisateur avec un nom et une adresse e-mail. Si vous n'avez pas ce fichier, signifie
que vous obtenez des configurations non configurées, alors assurez-vous que votre nom d'utilisateur et votre e-mail utilisateur sont configurés, et assurez-vous également que vous avez un fichier de configuration git sur votre ordinateur. Si vous avez tout cela en haut et en cours d'exécution sur la prochaine leçon, il parlera d'ajouter une clé ssh.
8. Comment « télécharger » votre référentiel sur votre ordinateur: Ok, parlons du téléchargement de votre projet sur votre ordinateur. Donc on va cloner tout ce repo ? J' ai un exemple de rapport ici appelé Caleb disant point Get hub dot io. Je vais cloner ça sur mon ordinateur pour pouvoir y accéder. Lisez-moi le dossier. Maintenant, pour ce faire,
tout ce que nous avons à faire est de cliquer sur ce bouton vert ici et nous pouvons cloner avec https ou nous pouvons utiliser Ssh. Maintenant, je vais rester avec https pour rendre cela agréable et simple. Donc quand je clique sur ce lien ou ce petit bouton ici et que ça va copier tout ça pour moi maintenant, je vais ouvrir ma ligne de commande, et je vais sur CD dans le dossier où j'ai habituellement mis la plupart de mes sites Web. Et je vais taper, obtenir le clone, et ensuite on va coller que vous Ellen ici. Et cela va créer un dossier appelé Caleb tallinn dot Get hub dot io. Maintenant, il va créer un dossier pour vous appelé votre nom d'utilisateur. Dugit moyeu point Io. Allons-y et lançons ça et ça clonait le site. Maintenant, je peux CD sur Caleb Tully. Ne reçois pas le hub dot io et si je fais ls tiret un ou si tu es sur les fenêtres, tu peux taper D. I ardor. Donc je vais faire ls Dash L. A. Vous pouvez voir que j'ai un fichier me lire ici, et nous pouvons réellement ouvrir cela dans notre éditeur de code, donc j'utilise le code V. Je vais juste ouvrir ça et on peut voir que mon fichier me lire est ici, et il a juste ce titre. Donc c'est juste marquer vers le bas. Il a juste le même texte que celui qui est ici. Et si nous allons réellement éditer ce fichier, nous verrons que c'est exactement le même contenu. On a un signe numérique, et ensuite on a le titre. Et si je passe au code V, nous pouvons voir que si je sélectionne tout cela et que je colle juste dessus,
c' est exactement le même texte. Rien ne change. Et c'est parce que c'est littéralement le même code que le hub a. ce moment. Nous pouvons maintenant l'éditer sur notre ordinateur, et quand nous sommes prêts, nous pouvons le repousser pour obtenir ses vues et obtenir maintenant une fois de plus, vous n'avez pas à le faire. Si vous préférez beaucoup simplement éditer des fichiers directement sur, obtenez le hub. Tu peux le faire aussi. Maintenant, je suggère de ne pas faire cette cause obtenir est une très bonne compétence pour apprendre en tant que
développeur Web pour juste savoir que vous n'avez pas à le faire Donc nous pouvons toujours cliquer sur cette petite icône d'édition ici ou si nous pouvons aller dans un fichier particulier, il y a généralement l'icône d'édition juste ici. Alors éditez ce fichier et nous pouvons dire que je vais créer une citation tirée ici. Voici le site Web de Caleb Colleen et nous pouvons prévisualiser les changements. Le vert signifie juste que c'est ce que nous avons ajouté, et c'est une belle petite bordure. Et puis nous engageons ces changements et nous donnons juste un petit message comme, qu'avons-nous fait exactement ? Ajout d'une description. Et je vais m'engager directement dans la branche maître et valider ces changements. Et on y va. Maintenant, ma lecture m'a été mise à jour. Si je retourne à ce dépôt ce dépôt, vous pouvez voir que cela a été mis à jour. Maintenant, où get entre en jeu est ce n'a pas été mis à jour sur mon ordinateur. Je vais ici, rien n'a été mis à jour. Mais ce que je peux faire, c'est que je peux dire obtenir l'origine de la traction, Maître. Et quand je reviendrai ici, nous pouvons voir que cela a été automatiquement mis à jour pour moi. C' est le pouvoir de get. Nous pouvons garder le code en synchronisation entre get hub et notre ordinateur et d'autres personnes peuvent le faire aussi , afin qu'elles puissent toujours avoir une source de vérité.
9. Créez votre premier fichier: Bon, allons de l'avant et créons notre premier dossier. Donc celui-ci est venu avec notre repo et nous l'avons édité, mais nous n'avons pas vraiment fait notre premier fichier, donc il y a deux façons de le faire. La première façon est d'utiliser get, et je vais vous montrer ce peu en bas de la route. Mais l'autre moyen est que vous pouvez littéralement simplement cliquer. Créez un nouveau fichier et vous pouvez créer un nouveau dépôt ici. Appelons ce point d'index html et ici nous allons juste dire un H. Bonjour le monde slash H un. Prévisualisez ceci et il ressemble juste au code HTML normal. Alors donnons à ça un nom de premier. Bonjour monde. Valider et valider ce fichier. Et donc là où ces commits entrent en jeu est ici, nous pouvons réellement voir que j'ai maintenant une sorte d'historique de code. commit initial a ajouté une description Tout d'abord, Bonjour, le monde commit et vous pouvez réellement passer par ceux-ci et vous pouvez voir les différents morceaux de code qui ont été mis à jour pour chaque commit. Maintenant, ce n'est ni ici ni là. Ce que nous voulons faire est de travailler avec ce fichier html point d'index. Donc ce qu'on peut faire, c'est aller ici. Nous pouvons soit l'éditer directement, comme nous l'avons fait avec le fichier Read Me. Nous pourrions copier et coller ou HTML ici, mais c'est en fait une façon assez douloureuse de le faire. Et honnêtement, ce n'est pas une façon de vivre ta vie. Une autre façon de le faire est si vous ouvrez juste ici l'éditeur de code et que je suis déjà à l'intérieur de mon dépôt. Je pourrais faire un get pole origine maître. Et si je reçois Log, Dash, Dash une ligne, nous avons ce commit initial. Nous avons ajouté la description. Et d'abord bonjour, monde s'engage. C' est celui que nous venons de faire, ce qui signifie que nous devrions maintenant avoir accès à ce fichier html point d'index à l'intérieur du code es. Et regarde ça. C' est juste à côté du dossier Lisez-moi. Donc, c'est à l'intérieur de votre dossier sur votre ordinateur maintenant. Et vraiment, c'est tout ce qu'il est juste un dossier qui reste synchronisé avec get up. Donc, ce que nous pourrions faire ici, c'est, au lieu de juste la norme H, nous pourrions en fait rendre cela un peu plus petit. Nous pourrions en fait donner à cela un monde bonjour, um corps html donc html cinq utilisaient l'anglais comme langue. Cela suffit de s'assurer qu'il est réactif et qu'il va être réactif. CSS. Et ici, nous pourrions dire, chacun cela a été édité. Sauve ça. Et dans la leçon suivante, ce que nous pouvons faire est avec get, nous pouvons réellement le pousser de notre ordinateur pour obtenir le hub directement.
10. Poussez vos fichiers vers votre référentiel spécial: tout droit dans cette dernière vidéo,
ce que nous avons fait était que nous avons édité ce fichier html point d'index et c'est à quoi il ressemble actuellement sur notre ordinateur. Mais si nous revenons à notre point d'index du référentiel html n'a qu'une ligne dans leur contre les 11 lignes que nous avons ici. Alors comment on peut synchroniser ça maintenant ? Une façon de le faire est de copier tout cela et d'éditer ce fichier, puis cadrer. Nous pourrions prendre un engagement assis, et ensuite nous pourrions engager les changements. Ce n'est pas une façon de vivre votre vie parce que vous allez le faire encore et encore, et c'est un processus très lent. Au lieu de
cela, nous pouvons le faire via la ligne de commande. Donc, dans mon dépôt sur ma ligne de commande, je pourrais faire un état git, et nous pouvons voir que le point d'index html est modifié. Que ce qu'il nous dit, au
moins, et ensuite nous pouvons faire,
obtenir ajouter, tiret, tiret, tiret, tous obtenir le statut une fois de plus et nous pouvons voir que c'est maintenant vert. Donc rouge signifie qu'il n'a pas été mis en scène pour l'engagement. C' est maintenant une étape pour l'engagement parce qu'il est vert. Donc je vais juste avoir le statut une fois de plus ici. Maintenant, ce que nous pouvons faire est de valider Dash M pour le message. Nouvelle structure de fichier html Quelque chose comme ça. Maintenant, ce n'est pas encore sur se lever. Donc si nous avons eu un long Dash, tirez une ligne, soyez connecté. Ash, Ash Une ligne produit ce nouveau commit dans l'origine de l'année. Maître, une plaque tournante K est de retour ici. Donc maintenant, nous devons vraiment retourner pour obtenir le hub et nous pouvons voir et entendre que rien n'a changé. Et pour que nous puissions pousser ces fichiers de notre ordinateur pour obtenir hub, il s'agit en fait d'une commande appelée Get push. Donc, nous obtenons le maître d'origine push. Donc, nous
obtenons le statut, nous
ajoutons, nous nous engageons, puis nous sommes poussés. Maître d'origine. Maintenant, cela ne semble pas vraiment utile si vous ne changez qu'un fichier à la fois. Mais lorsque vous travaillez avec d'autres développeurs à l'avenir, vous allez travailler avec beaucoup de fichiers. Donc, cela est beaucoup plus logique de le faire avec, comme, 10 fichiers ou de gros changements et pas seulement comme 10 lignes de code. Il va me demander mon nom d'utilisateur parce que j'utilise la version https. Donc Caleb Colleen est mon nom d'utilisateur, et j'ai mis mon mot de passe, accord, et donc une fois que vous avez poussé ça, vous avez entré votre nom d'utilisateur et votre mot de passe. Vous pouvez actualiser votre page d'accueil get, et vous verrez ce nom de commit changé, et nous avons maintenant le code qui est sur notre ordinateur. Donc, c'est de créer votre premier fichier et de le pousser vers le haut à partir de Get Hub sont d'obtenir de l'aide de votre ordinateur et la leçon suivante. Allons de l'avant et réellement voir ce site Web.
11. Demoing de votre nouveau site Web: Très bien, allons-y et visualisons cela sur notre nouvelle page d'accueil parce que nous avons déjà travaillé à l'intérieur de ce Repo et surprise Get espoir a fait ce site pour vous
tout le temps. Alors allons dans nos paramètres et nous pouvons faire défiler vers le bas et nous pouvons traiter ces titres plus tard si nous le voulions. Et il dit que votre site est publié à https Kayla disant ne pas obtenir hub Io Maintenant, le vôtre va dire que votre nom d'utilisateur ne reçoit pas aidé je le dois donc je vais juste cliquer dessus et regarder ça. Ceci comme édité supposé être Ceci a été édité mais DNC Ceci comme édité prouve qu'il a été édité Le titre était Bonjour monde Nous pouvons voir qui apparaissent dit bonjour titre mondial est bonjour monde Donc notre code est en train d'être déployé sur notre propre site Web Ici https Caleb point de péage obtenir point hub je vais maintenant partager ce lien avec tout le monde. Maintenant, ce n'est pas vraiment un site Web digne de part. Nous allons vouloir réellement créer une sorte de portefeuille sur peut-être télécharger quelques projets qui feront également dans les leçons futures maintenant quelques choses à garder à l'esprit. Si dans vos paramètres vous ne voyez pas encore cela, cela peut dire que c'est le cas. Ah, c'est
là. Vous pourriez voir quelque chose comme ça. Il dit que vous obtenez des pages de hub actuellement en cours de construction à partir de maître et que vous ne voyez pas ce genre de boîte de succès verte ou vous allez à votre page et c'est juste faire comme, J'espère que ce n'est pas une page d'accueil réelle get. Oui, si vous voyez une page comme celle-ci qui a 404 chances que l'une des deux choses se soit passé. Vous obtenez le nom de dépôt du hub que votre utilisateur a nommé. Je reçois point hub io a été orthographié mal. Peut-être qu'il y a un type de vous pouvez changer votre nom de référentiel get hub ici. Ouais, ta page est toujours en train d'être mise en place. Votre site Web est toujours en cours de configuration, et c'est parce que le hub se trouve dans les coulisses, traite de vos serveurs, traite des réseaux de diffusion de contenu, traite de toutes sortes de choses de configuration. Tu n'as pas à t'inquiéter de tout ça. Parfois, je peux prendre quelques minutes supplémentaires pour mettre en place, donc si vous ne voyez pas cela dans quelques minutes, assurez-vous que votre nom de repo est correctement orthographié doit l'être. Obtenez hub dot io pas dot com Mais si vous avez les deux déjà, votre site Web devrait être en charge. Pas celle-là. Votre site Web devrait charger quelque chose comme ça. Alors la leçon suivante, allons de l'avant et trouver une sorte de thème que nous pouvons utiliser juste une chose libre juste pour rendre cette page un peu plus agréable.
12. Rendre votre site Web plus agréable avec un thème: D' accord. Dans cette dernière leçon, nous accédons à notre site Web. Il a même un certificat SSL. Donc, il a http s, ce qui est agréable, et il montre tout notre code ici. Et même si je l'ai fait correctement, cliquez et afficher la source, afficher la source de la page. Vous êtes là. Rendez ça plus grand. Nous pouvons voir que c'est le code exact qui est actuellement sur notre ordinateur. C' est plutôt cool. Pour que nous puissions aller de l'avant et fermer ça. Je voulais juste vous montrer que c'est exactement le même code que nous avons travaillé. Et maintenant, allons de l'avant, faire en sorte que cette page ressemble vraiment à un beau site Web. Donc, si vous avez déjà un site Web construit, certainement utiliser que je n'en ai pas un pré-construit. Donc, ce que je vais faire est juste d'aller et d'en obtenir un dès le début bootstrap dot com tels thèmes. Et je vais utiliser ce thème créatif. Il s'agit d'un site de portefeuille assez standard. Et voyons cet aperçu en direct et c'est à quoi cette page va ressembler pour moi. Maintenant, nous ne allons pas éditer tout le contenu ici parce que ce n'est pas un ah plein contenu html CSS JavaScript sites Web sorte de projet. Ce que c'est une belle façon de vous donner une sorte de thème que vous pouvez travailler
sur la route . Maintenant encore, si vous avez le vôtre, s'il vous
plaît, utilisez le vôtre pour moi. Je n'en ai pas, donc je vais juste télécharger celui-ci, et nous allons utiliser ce téléchargement si gratuit, vous savez, enregistrer ce fichier. Ok, donc j'ai juste fait un montage rapide là-bas, et ce sont les fichiers qui sont venus avec ça. Et donc je les ai extraits sur mon ordinateur et qui,
littéralement, va juste les copier. Donc, je vais sélectionner tous ces et les copier, et puis je vais passer à mon nouveau projet, pourrait obtenir de l'aide. Et je vais juste coller ceci, et je vais écraser ce point d'index html trouvé. Vous allez vouloir vous assurer qu'il est appelé index dot html. Donc je vais remplacer ça,
et ce que je peux faire dans mon terminal maintenant c'est obtenir le statut et vous pouvez voir qu'il y a toutes sortes de choses ici. J' ai modifié l'index sur chaque email, mais j'ai aussi ajouté CSS et JavaScript afin que je puisse faire ajouter un tiret,
tiret tous obtenir le statut une fois de plus, il me montrera tous mes fichiers, tous les trois d'entre eux. Maintenant, ce que nous devons faire est de nous donner un message de commit pour que nous puissions nous engager. Dash M a ajouté un site sympa. Alors on pourrait se faire pousser Origin, maître. Et encore une fois, c'est là qu'il devient vraiment utile de savoir Get parce que nous pouvons éditer trois fichiers ou ajouter trois fichiers sans avoir à copier et coller la création copie de fichier paie création copie de fichier, coller le fichier créé. On pourrait tout faire sur notre ordinateur comme ça. C' est non, je vais me faire pousser. Origin Master va me demander mon nom d'utilisateur et mon mot de passe. Et puis si nous revenons pour obtenir le hub ici et juste rafraîchir, nous pouvons voir que nous avons un dossier CSS. Nous avons un point d'index de dossier JavaScript html. Et juste pour prouver que c'est tout de même ici dans mon éditeur, j'utilise le code V. J' ai un style CSS que CSS script de dossier JavaScript, canard, jazz et index dot html, que je n'ai pas écrit. Donc maintenant, nous pouvons revenir à nos paramètres, et si nous faisons défiler vers le bas, Ok, vous allez vouloir vous assurer que cela indique que votre site est publié. Alors revenons à notre côté ici et nous allons juste cliquer sur rafraîchir et OK, ok. Eso, ça a l'air mieux. Tu sais quoi ? Je sais exactement ce que j'ai fait de mal ici, c'est que je n'ai pas copié les images ou les actifs se replient correctement que vous. Donc si j'ouvre ça, oui, je n'ai pas aimé ça, mais c'est un bon exemple. Donc je pourrais juste copier tout ce dossier, accélérer ça ici, retourner dans mon terminal. Obtenir le statut, obtenir au tableau de bord, tous obtenir le statut. Ça me donne toutes ces images. Maintenant, je n'ai pas besoin de les copier et de les coller ou de trouver un moyen magique de les mettre sur. Obtenez le hub. Je pourrais simplement me faire engager. Les actifs ajoutés sont poussés. Origin Master va me demander à partir de j'utilise le nom et le mot de passe. Et si nous revenons pour avoir la page d'accueil ici, retournez à notre code. Nous verrons que nous avons un dossier appelé Assets, puis un dossier appelé I m G. C'est des paramètres de mise à jour ici, et j'aime toujours m'assurer que cela est toujours disponible. Parfois, ça disparaît parce que c'est au milieu d'un déploiement, et c'est bon. Parfois, quand ça arrive, ça prend 30 secondes. Revenons à notre page ici et rafraîchissant. Nous allons voir ces images maintenant charger maintenant nous avons un site Web en cours d'exécution sur les pages Get hub. Maintenant, à ce stade, hésitez pas à faire n'importe quelle sorte de modifications que vous voulez faire la dernière fois. Nous allons personnaliser le titre du texte, ajouter des liens, et nous allons ajouter quelques sous-dossiers ici afin que vous puissiez réellement copier et coller vos projets
existants sur votre site Web get hub pages, et les gens peuvent interagir avec eux tout de suite.
13. N'oubliez pas d'ajouter vos projets à votre portfolio !: D' accord, ajoutons certains de nos projets personnalisés. Si tu n'en as pas, c'est bon. Vous pouvez les ajouter en bas de la route. Si vous en avez, vous pouvez commencer à les ajouter maintenant. Donc, ce que je vais faire est d'ouvrir Firefox ici, et je vais ouvrir un fichier. On y va. Et je vais ouvrir ce fichier html point d'index et ceci est notre copie locale. C' est ce qu'il y a sur notre ordinateur. Ce n'est pas ce qui est sur les pages d'accueil get. Donc je vais changer ça et je vais ajouter un deuxième bouton, et ils vont aller à deux endroits différents avec deux projets différents. Donc, les premières choses d'abord. Retournons à notre rédacteur en chef. Et voici le titre Port Folio de Caleb. Et ici voir les choses que j'ai créées et ceci est rafraîchir cette page. Ok, cool. Il suffit de les changer d'impôt. Rien, Major, changeons. Mais maintenant, ils sont censés être deux ici. Nous ne voulons pas que cela déclenche une sorte de défilement. C' est juste javascript qui vient avec ce thème particulier. On ne veut pas ça. Nous voulons que cela aille à différents endroits. nous allons donc ajouter un à faire ici, et celui-ci va être voir mon mobile et la vue. Ma calculatrice et ce ne sont que deux projets qui ont effectivement des cours sur où vous créez un motile à partir de la main et vous créez une calculatrice interactive à partir de la main. Donc retournez à Firefox rafraichir, et nous voyons deux boutons. Maintenant, ils ne vont nulle part. Si je clique, ça ne fait rien. Ils doivent aller quelque part. Donc, je vais réellement finir par copier et coller mes projets de ces cours dans un nouveau dossier appelé motile juste slash motile ou pour en faire un lien relatif. Partout où se trouve cette étude d'index Chmela fichier et dans le dossier appelé Motile a une barre oblique. C' est entrer dans le chemin. Si vous n'êtes pas familier avec la chose Path, cela peut être un peu douloureux au début. Mais passer est très, très important, et celui-ci va être calculateur maintenant. Si je retourne à Firefox et rafraîchir, vous voyez le bas à gauche ici, il dit slash modèle et barre oblique calculatrice. Maintenant, si vous cliquez sur le fait que ces dossiers n'existent tout simplement pas, nous allons obtenir un fichier introuvable qui est correct. Ce que je veux faire est d'ouvrir le Finder ou toute sorte d'explorateur de dossiers sur votre système d'exploitation , et je vais créer un nouveau plein pendant ici appelé Motile, et je vais en créer un autre appelé Calculatrice Calculatrice, et je vais juste aller chercher ce code source et le coller ici. Donc je vais accélérer ma calculatrice ici, et donc je vais aller jusqu'à coller des fichiers ou modifier coller, en fonction de votre système d'exploitation ou juste commander ou contrôler V Et je viens de coller mes fichiers dans votre maintenant vous n'aurez pas ces fichiers et c'est D'accord. Tu n'es pas censé avoir ces fichiers. C' est censé être ton projet. Donc, si je retourne un répertoire ici, cela pourrait ne pas être calculé pour vous. Cela pourrait être quelque chose de complètement différent, et ce pourrait ne pas être un mobile pourrait être quelque chose de complètement différent. Donc je vais aller de l'avant et prendre le code mobile et revenir ici et j'étais juste hors l'écran une seconde. C' est bon. Tu n'as pas vraiment besoin de me voir copier et coller. C' est tout ce que c'était, et j'ai juste collé quatre fichiers ici. Et maintenant j'ai des dossiers en motile. C' est mon plus complet qui s'appelle le motile. Vous pouvez le voir ici avec un fichier html point d'index. C' est très important. Et aussi la calculatrice n'a pas indexé le fichier html point. Aussi très important. Maintenant, quand nous actualisons notre page locale ici à nouveau, cela va aller à Motile, et cela charge mon fichier html point d'index. Maintenant, si vous utilisez Firefox fait sauter une chose ici. Firefox marche pour vous montrer que vous êtes dans un répertoire. Un serveur Web comme Get Pages ne vous montrera pas. Il va juste supposer automatiquement que est à la recherche de point d'index html. C' est pour ça que c'est important. Donc nous pourrions le faire à nouveau avec notre calculatrice. Même chose Firefox, et dire, Hey, quel fichier voulez-vous voir ? Nous disons index dot html et nous avons une calculatrice dans. Tu sais, c'est plutôt cool, mais allons-y, et en fait il se ferme. Ah, et nous voyons notre page. Donc copiez ce rythme de lien qu'il n'y a rien de tout cela sur notre page get up pour le moment, alors allons-y et allons dans notre ligne de commande ici. Faisons un statut get et nous pouvons voir que nous avons ce fichier de magasin es bizarre. Ça vient d'un Mac. Et en fait, comme vous utilisez get, vous allez voir que votre ordinateur utilise toutes sortes de fichiers cachés que vous
n'avez peut-être jamais vus auparavant. Donc, ce que nous allons faire ici est d'obtenir ajouter un point d'index html obtenir ajouter la calculatrice tout ce dossier et obtenir l'annonce de l'ensemble du dossier motile. Nous pouvons le faire, obtenir le statut, et nous pouvons voir que nous n'avons pas ajouté ce magasin DS parce que ce n'est tout simplement pas un fichier utile. Vraiment. C' est juste pour Mac OS, et nous allons ajouter tous ces fichiers verts. Allons de l'avant, obtenez des projets ajoutés de validation. Obtenez le maître d'origine push à nouveau. Cela va vous demander votre nom d'utilisateur et votre mot de passe. Maintenant, vous connaissez déjà mon nom d'utilisateur, mais je ne le sais pas, comme taper mon mot de passe à l'écran, même s'il est caché. Et puis nous pouvons revenir à notre code source ici, rafraîchir et nous verrons que nous avons une calculatrice et ou moto. Donc ce sont maintenant nos projets que nous avons, et nous retournons à ses paramètres. Assurez-vous juste que c'est rafraîchissant comme il est censé le faire. Votre site est maintenant publié. Ok, Cool. Cool. Cool. Retournons ici. Je suis sur Caleb dire point Get hub dot Io et je viens de frapper. Rafraîchir. J' ai maintenant le portefeuille de Caleb. Des choses que j'ai créées. J' ai un lien vers mon motel. Vous pouvez voir cela en bas à gauche et un lien vers mes calculatrices. Cliquez sur ce motile et c'est en fait le code source du projet de motile. Jusqu' à ce que ce travail afin que les gens puissent maintenant faire l'expérience de mon projet. Je peux y retourner. Je l'ai fait trop gros. Je peux voir ma calculatrice et celle-ci est plutôt cool. J' aime bien celui-là un peu. Nous pourrions faire quelque chose comme 55 fois cinq divisé par trois est égal à 91.666666667 quelque chose comme ça. Mais encore une fois, cela démontre juste que j'ai un projet qui fonctionne réellement, et je peux le montrer aux gens. Maintenant, ce qui rend cela vraiment puissant, c'est le fait que quelqu'un peut simplement venir à votre dépôt et qu'il peut lire cela. Ils peuvent voir Oh, vous avez obtenu index dot fichier html, mais hey, aussi, vous avez ah dossier motile. Vous avez un dossier de calculatrice, qu'est-ce qu'il y a ? Et ils peuvent réellement aller voir votre code source afin que nous puissions voir qu'il n'y a pas beaucoup de html ici. Nous pouvons voir qu'il n'y a étrangement pas beaucoup de javascript dans vos fesses. Si vous postulez pour un emploi, la société pour laquelle vous postulez pourrait regarder votre JavaScript et dire, Oh, cette personne écrit du javascript moderne. C' est un très bon signe. Et ils pourraient aussi regarder le CSS et dire, Oh, ils savent, Ah, fond de
bateau, éclat. Et ils savent à propos des ombres abruptes qui servent à encadrer les ombres en même temps, des choses comme ça. Ce sont de bons signes pour les employeurs. On pourrait embaucher cette personne parce qu'ils savent ce qu'ils font. C' est ainsi que vous lancez simplement vos projets pour obtenir des pages d'aide. Vraiment ? Je viens de le faire Ah, dossier et j'ai lié à ce dossier Major. J' ai eu l'index html point là-dedans. C' est tout ce que c'était
14. Comment et pourquoi vous devriez « ignorer les fichiers informatiques inutiles ou cachés: D' accord. Une chose que vous allez vouloir faire est de ne pas valider certains types de fichiers. Ainsi, par
exemple, nous avons vu cela dans la dernière vidéo. Si j'ai le statut, j'ai ce fichier de magasin DS bizarre. Maintenant sur Mac, c'est juste un fichier caché. On ne voit pas ça d'habitude, mais on obtient des moyeu dessus. Tu vas voir des choses comme ça. Peut-être pas ce fichier exact, Mais vous allez voir des choses comme ça sur Windows et Limits aussi. Et on peut vraiment ignorer ces fichiers. Et c'est un fichier appelé Get Ignoring all. Ça ne dit pas, Hey, ignorer certains fichiers. Ne les laissez pas être engagés. Donc, si nous ouvrons notre éditeur de texte et nous créons juste un nouveau fichier ici appelé dot get ignore, nous pouvons ignorer certains types de fichiers et je vais juste mettre un nouveau type de fichier sur votre magasin de
soulignement DS et enregistrer cela Maintenant, si J'ai ouvert mon éditeur sont mon terminal à nouveau. Je pourrais faire obtenir le statut et le magasin DS ne s'affiche pas, mais mon get ignore le fait. C' est bon. Nous voulons ignorer ces fichiers de façon permanente afin que nous puissions valider ce fichier. C' est bon. Maintenant, disons que vous aviez d'autres fichiers dans votre Peut-être que vous aviez un tas de Peut-être que vous aviez un tas d' images que vous utilisiez localement, mais ils ne devraient pas être poussés dans votre dépôt get hub afin que vous puissiez dire n'importe quoi. C' est un JPEG JPEG point. Et à partir de maintenant, il ignorera les fichiers JPEG. Probablement une mauvaise idée à moins que vous êtes JPEG fichiers air. Vraiment, vraiment gros. Mais un bon exemple serait si vous écrivez Python. Nous avons ces fichiers de cache élevé que P. Y voit. Nous avons également des dossiers de trésorerie de pie afin que nous puissions ignorer tous ceux aussi bien et est vraiment juste un fichier par ligne ou un type de fichier ou un dossier par ligne. C' est tout ce que c'est. Pour qu'on puisse faire le statut des enfants. Nous avons ce fichier get ignore ici, et nous pouvons faire kid ajouter tiret,
tiret tout ou simplement obtenir ajouter point Get ignorer le statut, verra son vert get commit Ignorer les fichiers. Obtenez l'origine push. Non, faisons ça. Allons éclaircir ça. Get push Origin, Maître Et tout ce qui va faire est à nouveau va vous demander votre nom d'utilisateur et mot de
passe et pour moi qui a été poussé vers le haut pour se lever. Et nous pouvons toujours vérifier cela en allant dans notre dépôt en cliquant sur actualiser et nous verrons. Il y a un get ignorer l'année de dépôt, et il va ignorer DEA magasin dot pew je vois et les dossiers de trésorerie de tarte.
15. Votre projet final Skillshare - N'oubliez pas de partager votre site Web !: D' accord. Bienvenue dans votre projet de partage de compétences. Grâce à ce cours, nous avons créé obtenir Hub Repo. Nous avons appris de la trousse et nous avons lancé un site Web. Mais maintenant, c'est ton tour. Je voudrais que vous créez un site Web get hub Pages et capture d'écran cerise et le lien vers votre site Web get Pages Dans votre projet de partage de compétences sur le partage de compétences, il y a un espace dédié donc ce n'est pas dans les commentaires. Il s'agit d'un espace dédié où vous pouvez partager l'ensemble de votre projet. Non, n' oubliez pas à tout moment dans le temps, si certains des trucs get est devenu un peu confus, j'ai un cours get essentiel ici sur le partage des compétences aussi bien. Vous pouvez toujours vérifier cela ou si vous avez besoin d'un rafraîchissement sur h email CSS javascript, quelque chose comme ça. Je vous ai couvert tout au long de ces cours sont également disponibles ici sur le partage des compétences. Alors n'oubliez pas de me suivre sur le partage de compétences parce que je vous le ferai savoir quand j'aurai un nouveau cours. Mais en termes de ce cours, il est à votre tour de créer un site Web get hub pages. Partagez vos affaires de portefeuille là-bas. Tout ce que vous travaillez à l'avenir peut aller dans votre site Web get hub pages. C' est totalement gratuit. Ils ne factureront jamais le code source est définitivement open source afin que les gens puissent voir votre code qui est vraiment, vraiment puissant pour que les employeurs comprennent réellement quel genre de Dev vous êtes. Une fois que vous avez encore cela, n'oubliez pas Partagez ce projet dans votre projet de partage de compétences ? Merci d'avoir suivi ce cours et j'espère que je vous verrai dans le prochain.
Kalob Taulien, Web Development Teacher
