Créer un site Web Netlify gratuit avec Hugo le générateur de site statique (hébergement gratuit, téléchargement facile)

1. Intro: Bonjour, je montre sur le développement du site Web et l'enseignant. Bienvenue dans mon cours sur la création d'un site Web Netlify gratuit avec Hugo. Ce cours s'appelle les personnes qui souhaitent accélérer processus de développement de leur site Web en rationalisant la publication de leur site Web et en bénéficiant du flux de travail. Une fois que vous aurez poussé votre travail à obtenir, il sera automatiquement téléchargé sur Netlify et construit. Vous pouvez même créer des versions Netlify pour les succursales et les requêtes de pool. On se voit dans le cours. 2. Commencer avec le projet: Commencer le projet. Pour le projet, vous devez installer les dernières versions des logiciels suivants. Vous devrez vous assurer de l' installer avec Brew sur Mac ou Linux ou Windows. Utilisez TROPOMI. Vous aurez besoin Digital Studio Code installe la dernière version de ce qui est probablement corrigé. Vous aurez besoin de Node.js, puis inclut NPM, obtenez l'interface de ligne de commande pour passer au bureau Git et GitHub. Vous disposez donc d'une méthode graphique voir ce qui se passe avec votre référentiel Git. Vous devrez demander des comptes avec GitHub et Phi. Et c'est gratuit. Si vous avez besoin de moi, aidez-moi à installer ce logiciel. Si vous allez à mon cours d'introduction à Hagar N bootstrap, la première leçon, les textures sont le processus d'installation de tous ces logiciels. Et vous avez deux ordres particuliers. De cette façon, le logiciel sera lié l'un à l'autre. Par exemple, vous devez d'abord installer Node.js, et cela installe également chocolaty. Ensuite, vous pouvez installer Hagar. Et vous devez vous assurer que si vous partagez du code est installé avant d'installer Git, CLI et GitHub Desktop. De cette façon, vous pouvez choisir Visual Studio Code comme code. Tout au long du cours, je vais valider chaque leçon dans le référentiel GitHub. Il y a un lien vers cela dans la section Ressources. Gardez à l'esprit que la branche principale est exactement ce que j'ai utilisé pour relier Netlify of sight pour effectuer la facturation. La branche maîtresse elle-même n'est pas très utile pour vous, mais il y a une branche par leçon. Et si vous rencontrez des problèmes avec l'une des leçons, vous pouvez aller voir la leçon en particulier via la branche et vous pouvez voir le code de cette leçon. 3. Configurer un nouveau projet GitHub: La première chose que nous allons faire est de configurer un projet GitHub. Une façon de le faire facilement si vous accédez au bureau GitHub et ajoutez un nouveau référentiel, il s'agira du nom du dossier ascii du référentiel et du chemin d'accès. Et il créera un dossier, un référentiel de dossiers. Et il initialisera également le référentiel en même temps. Je préfère ne pas faire cette méthode car je n' aime pas compter sur le bureau GitHub pour créer la photo, car souvent je vais finir avec la photo dans un dossier. Je préfère cette méthode pour créer une photo. Ensuite, à l'intérieur de ce dossier, j'ouvrirai le dossier vide dans Visual Studio Code. Ensuite, si nous accédons au bouton Contrôle de la source, vous pouvez initialiser le référentiel. Ou si vous le souhaitez, dans le terminal, vous pouvez y exécuter git. Vous remarquerez alors que nous avons un dossier, le point des années 90, et c'est là que tout votre historique Git. Et vous obtiendrez des feuilles de configuration. Si vous souhaitez télécharger un référentiel Git sur Internet et que vous souhaitez le télécharger sur votre propre compte, vous devez supprimer le dossier. Maintenant que nous avons initialisé le projet, nous devons ajouter un point git ignore fall, cliquer sur le bouton Nouveau fichier et le nommer dot git. Ignorez cet automne. Nous allons spécifier tous les dossiers et fichiers qui ne seront pas téléchargés pour obtenir. La première est la barre oblique modules de soulignement de nœud oblique après. Et c'est tous les fichiers et photos qui sont générés lorsque vous installez des dépendances à partir de NPM. Et si vous avez suivi l'un de mes autres cours, vous en saurez tout. Un exon sera public. C'est alors que vous exécutez la commande et que le SWOT est conçu pour être téléchargé via FTP. Vous allez générer des chutes dans le dossier public. Et nous ne voulons pas les engager parce qu'ils changent fréquemment. Et puis, inutilement, vous pouvez les générer avec la communauté. Je n'ai pas besoin de les engager pour l'obtenir. Le prochain est celui des ressources obliques. ressources de page, qui ont été conçues pour être utilisées dans le projet, ne sont généralement pas nécessaires. Nous examinerons cela dans une leçon ultérieure. Nous les inclurons pour augmenter vos délais de facturation Netlify. Mais il augmente la taille de votre référentiel GitHub. Généralement, ils ne les incluaient pas lorsque la page, le site Web est en phase de brouillon. Mais plus tard, une fois la page terminée, il est très utile d'inclure les résistances car cela réduira votre temps de construction. Le prochain est le soulignement par points. Construire un point loc. C'est beaucoup de chutes qui sont générées lorsque vous courez. Nous n'avons pas besoin d'inclure cela. Ensuite, nous chercherons à manquer le premier commit. Puisque nous pouvons y parvenir peu de moyens. Si vous cliquez sur l'onglet Contrôle de la source, vous pouvez placer votre messagerie. Par exemple, créez git, ignorez. Sinon. Autrement dit , nous sommes arrivés à GitHub Desktop, un peu plus graphique. Vous pouvez placer un message ici, ou vous pouvez utiliser l'entrée par défaut et le contrôle Entrée pour valider. C'est là que j'ai vraiment verrouillé pour utiliser le bureau GitHub. Lorsque vous publiez, vous pouvez choisir de le garder privé ou non. À l'aide de Netlify, vous pouvez définir sur Private et ces 22 entités soit GitHub. Vous pouvez également choisir l'organisation. Si vous revenez dans Visual Studio Code, vous pouvez réellement choisir une organisation et la publier dans laquelle vous pouvez le faire manuellement via la ligne de commande. Travaillons. Il est fortement recommandé si vous avez configuré une organisation avec votre compte GitHub, d'utiliser le bureau GitHub que vous avez choisi pour votre organisation. Vous pouvez publier votre référentiel. Cela nous amène à la prochaine étape. Nous sommes prêts à créer du contenu. 4. Ajouter du contenu Hugo: Nous allons ajouter du contenu à notre projet. Et vous pourriez copier et coller dans un autre projet de type énorme. Et si vous avez suivi certains de mes autres cours, vous avez probablement un excellent projet prêt à commencer. En gardant à l'esprit, ne copiez pas et collez pas dans le dossier dot git. Parce que s'il y a un dossier Dark Kit dans ce projet, car vous allez remplacer les paramètres du référentiel Git dans l'historique de ce projet. Je vais créer un nouveau contenu lorsque vous utiliserez la commande T ego, le nouveau site, la barre oblique de points. C'est pour le répertoire actuel dans lequel nous sommes déjà présents. Par défaut, il crée réellement un dossier pour vous, mais nous avons déjà la configuration de notre dossier que nous obtenons maintenant nous indiquera qu'il y a déjà du contenu dans le dossier. Et il faut recourir à la force. Dash, tiret, faux. Il serait évident que vous ne le faites pas. J'ai apporté du contenu existant lorsque j'utilise la force. Comme il l'a laissé entendre. Vous pouvez télécharger un thème ou créer vôtre avec la commande Hugo new theme. Nous allons l'utiliser pour créer temporairement certains fichiers de mise en page car actuellement nous n'avons rien dans la mise en page. Quelqu'un va copier et coller un nouveau thème, temp. En regardant votre dossier de thèmes et vous verrez que nous avons configuré un dossier temporaire. Je vais tout mettre en place et attraper tout et le glisser dans le support de vos mises en page. Je ne vais pas utiliser de thème. Si vous le souhaitez. Il a également été configuré dans un dossier CSS et JS dans une étude. Vous n'en avez pas vraiment besoin pour ce tutoriel. Je garde tout simplement aussi simple que possible. Il y a un tutoriel. Il s'agit plutôt de travailler avec Netlify. Avant engager tous les contenus que nous venons de créer. Vous devez vous rappeler que si le dossier est vide, vous le perdrez avec les enfants. Vous devez donc créer un fichier appelé point gatekeeper. Peu importe ce que la chute est froide, mais nous utilisons la convention dot git me permet de savoir exactement à quoi il sert. Nous pouvons ensuite le copier et le coller dans chaque photo vide que vous souhaitez conserver. Nous allons ensuite entrer dans les mises en page et baser le code HTML par points. Personnellement, je n'utilise pas cette div avec l'ID du contenu lorsque je travaille avec bootstrap, juste pour garder les choses vraiment simples. Et c'est quelque chose que beaucoup de mes élèves ont utilisé pour suivre mes cours. Ensuite, nous allons aller dans notre index.html. Mettez des crochets bouclés, définissez le mien, des virgules inversées. Ensuite, nous ajouterons du contenu de points. Ce que nous allons faire, c'est créer un conteneur. Le conteneur va également sortir du contenu dans une grande quantité de contenu. Nous allons faire un titre de points. Ensuite, nous allons le copier en un seul et en liste. Ensuite, nous allons passer à la base de la configuration partielle. Nous allons donc effectuer une valeur par défaut du titre des points. Nous allons mettre notre CSS Bootstrap dans. Je vais avoir un lien vers cette page. Vous l'avez déjà fait. Si vous avez suivi mes autres cours, par exemple, nous commençons avec vous. Ensuite, JavaScript créera un nouveau script de code partiel, Führer, le JavaScript là-dedans. Laissez-moi revenir à la base. Mettez-le dans le script pour moi, je fais des balises sémantiques ici, mais vous devrez regarder les autres cours pour en savoir plus sur toutes ces autres fonctionnalités parce que j'essaie de garder ce cours comme le plus court possible. Nous allons ensuite créer une page d'index. Nous utilisons donc un nouveau trait de soulignement, indice, pensée, MD. Ensuite, allez dans le contenu. Nous appellerons ça chez nous. Nous allons faire une alarme Ipsum. Vous n'avez peut-être pas de configuration de code Visual Studio dans laquelle vous n'avez qu'à insérer du contenu. Une chose que vous devez vous assurer de réparer. C'est-à-dire que le brouillon est vrai. Nous devons passer au faux. La page s'affichera donc. Vous pouvez changer pendant que vous y êtes. Et c'est à vous de définir les archétypes sous point m d par défaut . Il s'agit d'un modèle utilisé pour créer de nouvelles pages. Et j'ai défini le brouillon sur faux. Lorsque je crée une nouvelle page, j' utilise normalement des branches et des pull request. Et c'est quelque chose que je vais vous montrer plus tard dans ce cours. Et cela fonctionne très bien avec Netlify. Je vais définir le brouillon sur faux. Me coûter ce que nous venons de faire est totalement facultatif. Vous pouvez simplement copier et coller dans un projet énorme. Mais assurez-vous de ne pas copier et coller la photo lorsque vous le faites. Sinon, vous n'aurez jamais, ce que nous venons faire quand nous aurons mis en place un nouveau projet, ouvrez un nouveau terminal et exécutez Do you ever ? Ensuite, nous allons cliquer sur Contrôle pour afficher dans le navigateur. C'est pourquoi il n'est pas prêt à passer à la prochaine leçon. 5. Créer un nouveau site Netlify: Nous allons maintenant envisager de créer un nouveau site Netlify. Pour configurer un compte Netlify, le niveau gratuit est parfaitement adapté à ce que nous faisons. Vous pouvez ensuite connecter un bon projet. Je vais choisir GitHub. Si vous vous êtes connecté à GitHub, cela se connectera automatiquement lorsqu'il va en panne et vous devez définir les commandes que vous achetez uniquement de la structure, vides. La commande Build sera Hugo et le répertoire publié sera public. Par défaut, My GitHub est maître en tant que branche, qui est la branche principale à déployer. Vous avez peut-être dit deux principaux. Il suffit donc de vérifier que vous avez le bon endroit. Il va le mettre en place pour vous. C'est actuellement le déploiement du site. Nous avons mis en place. Vous ne pouvez pas entrer dans les peintures de domaines et vous pouvez changer ce domaine ici par exemple, je vais bien, c'est cool. Compétences, Netlify. Vous obtenez l'application Netlify point, une URL, et Google ne les analyse généralement pas. Vous devez donc trop vous inquiéter à ce sujet. Je pense que je me déploie et vous verrez que notre site a été publié. Vous pouvez réellement cliquer dessus et il vous donnera un aperçu de ce qui s'est passé. Et jetons un coup d'œil à l'activation du débogage assis pour Hugo. Vous pouvez donc en voir beaucoup plus sur ce qui se passe. Vous pouvez cliquer sur le lien et il vous enverra vers cette version exacte du site. Mais je préfère simplement revenir à la vue d'ensemble. Et cela vous donnera l'adresse publique du site publié ce que nous venons de créer dans la leçon précédente. Si vous êtes monté sur scène lorsque vous êtes prêt à passer à la leçon suivante. 6. Créer une configuration Netlify: Cette démo va voir comment configurer les versions Netlify pour différents scénarios et environnements. Je vais mettre le lien vers cette page dans la section Résultats. Il est notifié la page de configuration basée sur les fichiers. Il s'agit d'un fichier appelé Netlify, pas grand dans la racine du projet. Et puis, ici, nous avons un exemple de code. Nous n'avons pas besoin de tout cela, qui que ce soit. Faisons donc la chute et ensuite nous allons mettre la partie importante. Créez un nouveau fichier à la racine du projet et nous l' appellerons Netlify point double. La première chose qui nous inquiète, c'est la première partie, construction et tous les paramètres se trouvent sous le titre de construction. Tous nos paramètres globaux sur la version, à moins que nous ne les écrasions. Nous allons donc copier et construire. Nous ne nous inquiétons pas de la base car nous utilisons la racine du projet comme base. Nous allons mettre Publish et nous mettrons notre commande build. Les publications seront publiques. La commande build, la commande de construction de base ECO. J'aurai un lien vers la page des documents de commande Hugo. Nous pouvons ajouter dash, dash debug pour la sortie de débogage afin que nous puissions voir ce qui se passe réellement. Et nous allons faire un tableau de bord, agrandir, réduire le HTML et le XML aux plugins dans ce tutoriel parce que j'ai géré à peu près tout. Nous allons donc maintenant jeter un coup d'œil sur le remplacement des éléments intégrés pour différents contextes. Ce rayon contextes nous a donné lieu à la production, ce qui est le principal contextes. Nous avons déployé, prévisualisez et nous dirons déploiement de succursales, Grab, production. Obtenez un aperçu. Nous allons avoir un aperçu de l'environnement de points car je préfère le définir de cette façon. Ensuite, la méthode en ligne montrée ici. Ensuite, nous en installerons un pour la production. Nous avons une succursale déployer et déjeuner l'environnement des stratagèmes, manquant en temps réel. Créez un environnement, en ajoutant quelque chose à celui prévu pour NPM. Je vais envisager de créer différentes commandes de build pour le déploiement, aperçu et le déploiement de branche. Gardez à l'esprit si nous effectuons une demande de point de branche ou de pool, c' est-à-dire un déploiement d'un aperçu. Vous devrez installer Hugo pour utiliser l'URL personnalisée créée. Lorsque cela se produit, nous avons ici une option de tiret B et qui définit l'URL de base. Je vais configurer ça pour toutes les versions Netlify. Ainsi, si vous modifiez l'URL Netlify, vous n'avez pas à vous soucier d'entrer dans Hugo et de mettre à jour l'URL de base. Et vous pourriez simplement utiliser dash PE, mais je vais utiliser dash, dash BaseURL pour les rendre plus évidents lorsque vous reviendrez dans le futur, regardez votre fichier de configuration en utilisant la ligne de commande. Voulez-vous utiliser la base de trésorerie parce que moins que top. Mais je vais utiliser dash, dash base de l'année pour le rendre plus évident. Je vais utiliser le signe dollar et les capitales déployées sur l'URL de soulignement SQL Prime. Cela va extraire l' URL de base de Netlify pour nous. Tout ça. Supprimez le contenu, laissez la branche pointer, et nous commenterons cela pour commencer la thérapie tricot. Même chose avec l' aperçu et pour production car il va le configurer de sorte que les trois anciens top fonctionnent automatiquement, car nous avons ajouté l'URL de base de Netlify reviendra à environnement dans une future leçon sur le NPM. Nous allons sauver ça. Ensuite, nous nous engagerons engagerons à couler. Ensuite, si nous arrivons à la page Déploiements, rafraîchissez-vous et vous verrez que nous sommes en train de construire. Et il a été construit avec succès. Disons que lui, parce que nous avons lancé l'option de débogage, nous avons toute la sortie supplémentaire de. C'est vraiment utile lorsque vous essayez comprendre ce qui ne va pas, car il est vraiment difficile pour Netlify résoudre les problèmes comme ils ne l'ont pas fait. De retour sur cette page des déploiements, vous remarquerez le temps nécessaire à la construction et environ 14 secondes et 16 secondes, il est vraiment important de garder un œil là-dessus car il commence à grimper 2,52 minutes, trois minutes. Vous allez brûler vos allocations. Si vous revenez sur votre page d'accueil, vous verrez que vous disposez de 300 minutes de construction par mois sur le niveau gratuit. est vraiment important de vous assurer que vous avez cherché à optimiser de manière ne pas utiliser trop de Belbin, sinon vous manquez et cela coûte assez cher à mettre à niveau, surtout s'il s'agit simplement d'un site Web simple. 7. Ajouter la configuration NPM: Nous allons envisager de configurer le projet Netlify pour npm. Je vais avoir un lien vers cette page. Il s'agit de la page de l'environnement Node.js. Des choses que nous allons régler. Il existe une option de version Node. Je vais le mettre de quelque façon que ce soit, mais nous n' allons pas l'utiliser pour l'instant, mais vous pouvez soit l'écrire si vous avez un problème, vous pouvez mettre à niveau les versions nocturnes. Vous pouvez forcer Netlify à utiliser une nouvelle version. Mais nous sommes vraiment inquiets l'environnement de nœuds maintenant par défaut, Netlify place l'environnement de nœud au développement. Maintenant, cela signifie que si vous avez des dépendances de développement et de production, elles seront toutes installées. Et il y a un avertissement que si nous définissons l'environnement de nœuds sur production, les dépendances de développement de votre package.json ne seront pas installées. Cela signifie que nous pouvons accélérer les versions sur Netlify en n'installant pas dépendances que vous utilisez uniquement localement. Par exemple, dans Visual Studio Code pour développer votre site Web. Allons de l'avant et nous allons définir cela sous Bill dot environnement collera à mon nom et nous le mettrons en production. Ensuite, nous apparaîtrons dans les options de version Node et NPM. Si vous devez forcer Netlify à effectuer une mise à niveau. Nous commenterons cela parce que nous ne les utilisons pas. Allons-y et nous allons mettre en place NPM. Nous le ferons, c'est que nous arriverons à un nouveau terminal. crétin. Tricot d'époque. Il suffit de conserver toutes les valeurs par défaut pour le moment. Ensuite, nous ferons un peu d'isolation. Disons simplement, par exemple, que vous voulez utiliser la publication CSS avec Hugo. Vous auriez besoin d'exécuter npm installer de nombreux posts, css , posts, css, CLI, puis dire par exemple, autoprefixateur également. Ensuite, vous allez regarder le package.json. Débarrassez-vous de ce terminal. Vous verrez qu' ils ont installé des indépendances et qu'ils vont être installés pour nous sur Netlify, même si nous configurons notre production dans notre environnement en production. Allons de l'avant et installons quelques dépendances de développement. Par exemple, le lien ES pour relier vos fichiers JavaScript ES6 exécutera NPM install dash, dash, enregistrera la div. Ensuite, ils iront vérifier notre package.json. Nous avons maintenant nos dépendances de développement. Es lint ne sera pas à la hausse est Netlify puisque nous utilisons l' environnement de production de nœuds. Ça va donc gagner un peu de temps. Nous construisons. Certaines personnes ne s'embêtent pas parce qu'elles ne sont installées que sur la première instance, elles n'ont pas reçu d'argent liquide. Mais je préfère simplement les garder séparés. Microsoft ou plus facile. 8. Construction de branches: Il ne va pas jeter un coup d'œil aux champs de succursales façon dont nous pouvons créer une nouvelle branche. Ensuite, nous pouvons créer cette branche sur Netlify afin que vous puissiez prévisualiser l'idée sur laquelle vous travaillez. Vous pouvez également, par exemple, corriger un bogue dans l' onglet Réflexions et choisir votre site. Ensuite, accédez aux paramètres du site et créez et déployez. Ensuite, entrez dans les branches. Et à l'heure actuelle, nous avons notre maître en tant que branches de production, une branche qui construit et qui concerne l' URL principale de la branche déployée car peu d'options vous pouvez choisir toutes. Et il construira chaque branche que vous créez. Sinon, vous pouvez créer des branches individuelles. Personnellement, je préfère construire des branches individuelles parce que je ne veux pas que toutes les branches soient construites. Il vous suffit de mettre le nom de la branche, mais pour l'instant, nous allons tout régler pour faciliter la tâche de ce tutoriel. Nous allons sauver ça. Ensuite, nous descendrons vers la branche, le maître inférieur, et nous créerons une nouvelle branche. Et je vais créer un déploiement cool de six branches. Vous pouvez le trouver facilement. Et ce que nous allons faire, c'est que nous apporterons des changements. Nous allons donc passer dans les mises en page, les partiels et nous partirons. Ensuite, nous copierons la barre de navigation Bootstrap cinq par défaut. Et ensuite, nous allons coller ça. Avant de le commettre. Nous allons exécuter le clic Ctrl. On peut dire qu'il fonctionne actuellement comme prévu. Il est important que vous prévisualisiez les modifications avant de les passer via Netlify. Sinon, cela perd votre temps et vous n'aurez plus de quotas de construction. Ce que nous faisons maintenant, c'est que nous allons mettre notre barre de navigation d'ajout d'engagement. Je publie en fait la page Guide To The Deploys pour le léger sur lequel vous travaillez. Et vous remarquerez qu'il s'appuie sur la branche de déploiement de la succursale. Ça ne devrait pas prendre trop de temps. C'est en cours d'exécution maintenant. Nous avons sorti le bug qui produit leurs pensées en direct. Je vais donc revenir à la page des déploiements. Il y a un bouton qui va accéder au code GitHub. C'est l' engagement réel, la branche. Si vous souhaitez voir la branche se déployer, vous devez cliquer sur cette version particulière. Ensuite, ouvrez le déploiement de la branche. C'est très différent du site actuel. Vous remarquerez que nous avons deux créneaux différents. Il faut être prudent lorsque vous traitez avec des clients. Je trouve cela particulièrement déroutant, bien qu'il soit très puissant car vous pouvez créer un pliage de brouillon pour un nouvel ID sur lequel je veux que vous travailliez et que vous pouvez les partager avec un déploiement de branche. Maintenant, il y a un bouton pour publier. Je le recommande car vous allez finir par publier une autre branche. Ce que vous pouvez faire, par exemple, dans GitHub Desktop ou Visual Studio Code. Nous pouvons ensuite aller à l'arrière pour maîtriser. Ensuite, nous pouvons choisir une branche, fusionner une branche et fusionner dans le déploiement de branche. Le seul problème, c'est que je vais synchroniser ça. Le problème, c'est que si cela génère une époque, il peut être un peu difficile de l'attraper. Vous verrez maintenant qu'il se développe dans ces changements et que cela fusionne dans le maître, vous devriez probablement prévisualiser cela dans le code Visual Studio avec vous. Donc, la commande d'abord avant de la synchroniser avec good, est publiée. Donc, si nous allons sur le site principal, vous verrez maintenant que j'ai tiré dans notre barre de navigation de la branche, déployez la branche. Maintenant, ce que vous feriez, c'est que vous alliez supprimer la branche après avoir mentionné, mais je vais laisser cette branche là pour que vous puissiez voir dans le référentiel sur GitHub au cas où vous auriez tout problème avec cette leçon particulière ou la SLA, et vous pouvez voir toutes les différentes branches dès que c'est déjà plein. La prochaine leçon où nous avons examiné cela plus en détail. 9. Pull Request Builds (déployer des aperçus): Donc maintenant, nous allons examiner les mauvaises créations de demandes. Allez-y et montrez comment effectuer la pull request. Allez sur Netlify, accédez à votre site, puis recherchez des paramètres et créez un employé. La première chose que nous allons faire est d'éteindre le bâtiment de la succursale, à l' exception de la branche de production, car cela générera un bâtiment inutile. Ensuite, l'option suivante consiste à déployer des aperçus, et il s' agit de requêtes de pool. Désormais, par défaut, il est configuré pour générer toute demande médiocre contre votre branche ou branche de production, déployer des branches. Et je vais vous montrer exactement ce que cela signifie dans un instant. Nous avons l'outil Netlify Draw activé que nous n'utiliserons pas parce qu'ils travaillent ou que je le suis. Je vais vous montrer ce que c'est de toute façon. Nous laisserons la configuration avec les paramètres par défaut, puis nous ramènerons les individus à votre code. Je vais créer une nouvelle succursale. Je vais appeler ces demandes de pool de succursales. Vous pourrez le dire dans le référentiel Git. Nous allons le faire, c'est que nous allons aller sur la page d'accueil, changerons une partie de la signification. Juste pour faire les choses évidemment, nous allons mettre une div avec une marge, un peu rembourrage et un peu de fond. Ensuite, nous allons vérifier ça. Ensuite, nous allons modifier la couleur du texte. Maintenant, nous allons nous engager, publierons la branche. Ensuite, nous nous dirigerons vers le référentiel. Juste une petite note, vous pouvez réellement obtenir un plugin. Vous pouvez créer des requêtes GitHub, extraire des requêtes depuis Visual Studio Code. Et je vais vous montrer sur le site Web car il ne nécessite aucune installation. Alors sur GitHub, dirigez-vous vers le bas et choisissez la branche. Il est dit que le pont est un engagement devant Moscou. Nous allons donc créer un pool de demandes contre Moscou. Donc, une façon de le faire est uniquement de contribuer à la liste déroulante. Nous pouvons extraire des demandes, sinon vous pouvez les créer via de mauvaises demandes. Ensuite, nous comparons la branche des quatre croûtes. Et alors, quand on n' appellerait pas ça de mauvaises demandes, je viens de le faire. Vous pouvez identifier la leçon. Nous comparons ça à Mostafa. Il a saisi le message de validation pour nous le jour. Vous pouvez y ajouter d'autres informations. Il est dit capable d'émerger, ce qui est génial. Nous allons créditer. Github vérifie la capacité à gérer, puis nous effectuons des vérifications Netlify. Netlify est en cours de création de l'aperçu du déploiement. Il effectue les vérifications pour nous et nous en obtiendrons quelques résultats dans un instant. Alors, vérifions R1, nous n'avons eu aucun problème. Je peux cliquer sur le bouton Détails et il vous affichera l'aperçu de la lecture. Donc, comme nous le regardions sur le Hugo, c' est une version du sel qui est en fait fusionnée avec la branche principale. Par exemple, il se peut que quelqu'un ait apporté des modifications à la branche maître et que vous travailliez sur quelque chose dans votre propre branche. Par exemple, cet arrière-plan avec des textes différents. Et puis cela montre ce qui semble réellement être fusionné. Je pense que déployer précédemment, super, car c'est un rappel que le travail est assis là à attendre d'émerger et que vous pouvez continuer à travailler sur cette branche et qu'il continuera à mettre à jour l'aperçu du déploiement. Par exemple, vous avez dit au client que vous êtes heureux de lui donner deux révisions à un brouillon. Eh bien, vous pouvez ouvrir vos demandes de pool. Vous pouvez effectuer tout votre travail sur cette révision. Et quand ils en sont satisfaits et qu'ils ont signé, vous pouvez vous engager sur leur site Web. Et si vous avez promis le moyen maintenant, vous ferez deux révisions à la baisse. Ensuite, vous vous ouvrirez. Et j'ai adoré jouer en avant-première. Il tirera demande s'ils souhaitent apporter de petites modifications. Et ensuite, vous pourrez y travailler. Ensuite, vous pouvez valider ces modifications. Et ce que vous regardez dans l'aperçu de votre déploiement, vous remarquerez dans le rapport de bord inférieur une barre d'outils qui n' apparaît pas réellement une barre d'outils qui n' apparaît pas réellement sur le site final où vous avez validé la demande de pool. Mais vous avez un certain nombre d'options. Lui, et ils ont l'air assez simples. Mais si vous regardez la capture d'écran, par exemple , attendez qu'elle se charge. Vous pouvez utiliser cette capture d'écran dans un commentaire. Vous devez vous assurer d'être connecté à GitHub. Et c'est une excellente façon de communiquer avec Atteinment. Il simplifie le processus. Ils y ont également mis l' enregistrement à l'écran. Permettez-moi de numériser le bouton pour que vous puissiez le scanner avec un appareil mobile, puis vous pouvez afficher un aperçu du site. Dans mon mode, vous n'aviez pas eu à vous occuper de l'URL longue. Mais nous avons également le bouton à gauche et vous pouvez accéder à toutes ces fonctionnalités en détail. Par exemple, pour l'instant, nous allons même commenter la pull request sur GitHub. Vous pouvez même créer de nouveaux problèmes, vérifier qui fait partie de l'équipe, leur envoyer un e-mail, etc. Tout est là-dedans. C'est la Netlify Dora. Je vais lever ce virage, qui était en fait activé par défaut. Mais vous pouvez désactiver cette option si vous ne souhaitez pas que les membres de l'équipe y accèdent. Je viens d'ouvrir l'aperçu du déploiement dans un navigateur qui n'est pas aimé par Internet appliqué comme une lumière apparente, ce qui se passe quand un client consulte l'aperçu du déploiement. Et vous devez juste être là où vous aurez encore cette barre en bas. Et cela pourrait confondre un client. Si vous utilisez cette option pour montrer aux clients qu'ils progressent sur une fonctionnalité brouillon. Je considérerais le fait que vous pourriez éteindre tiroir éloigné parce que je suis alors confus avoir cette barre au bas de l'écran. Vous pouvez donc appuyer sur fusionner les requêtes d' extraction, puis vous pouvez confondre le message et ajouter un commentaire sur ce bouton pratique pour supprimer branche une fois que vous avez géré les demandes de pool, qui gère finalement une branche dans la branche magistrale, la branche principale, il vous reste à peu près isoler la branche. Je ne vais pas à la succursale comme lors de la dernière leçon, je n'ai pas aimé ces données de marque parce que je veux les branches qu'ils disent, vous pouvez les dire. Je pense que c'est pourquoi mieux que les Français se déploient. Il est beaucoup plus contrôlable. Eh bien, ils doivent passer par GitHub, tout au long du processus. Et comme je l'ai dit, vous ne pouvez pas obtenir le plug-in pour Visual Studio Code, bien que je le préfère sur GitHub autant plus graphique.