Lancez votre site web avec Cloudflare Pages en 2026

1. Introduction du cours: Bonjour à tous, et bienvenue dans le cours de lancement de votre site Web avec CloudFlare Pages Je m'appelle Anor Pretoris et je serai professeur pour Donc, juste pour vous donner un bref aperçu de ce que nous allons faire. Donc, comme je l'ai mentionné dans le cours, nous allons essentiellement comme je l'ai mentionné dans le cours, lancer notre site Web avec CloudFlare Pages Mais en termes de technologies et autres, nous allons nous assurer qu' un projet est prêt à être lancé et que ce projet sera ensuite téléchargé sur un référentiel Github et synchronisé via le bureau Github Comme vous pouvez le voir ici, j'ai une application très simple qui possède, comme vous pouvez le voir, un fichier CSS à points de style, un fichier script point js et un fichier HTML à points d'index, et tous ces éléments se forment ensemble dans le cadre de mon exemple d'application Idéalement, vous devriez déjà avoir un projet que vous souhaitez appliquer et déployer. Maintenant, en gros, une fois que vous avez défini ce projet, vous allez le synchroniser via le bureau GitHub afin transférer vers votre référentiel GitHub Ensuite, vous allez créer un compte de pages CloudFlare sur lequel vous allez ensuite vous assurer qu'il est créé, puis qu'il sera déployé Après quoi, vous pourrez y accéder via un nom de domaine généré automatiquement, qui est gratuit, que vous pourrez ensuite visiter pour accéder à votre site Web. Comme vous pouvez le voir ici, j'ai un très bon exemple de site Web à l'avance C'est donc essentiellement ce que vous allez apprendre dans ce cours, et les pages CloudFlare sont connues pour leur rapidité exceptionnelle Ce sera donc un processus très simple si vous voulez juste avoir quelque chose à la poitrine et être prêt à courir rapidement. Voilà ce sur quoi nous allons nous concentrer dans ce cours, et j'espère vous voir suivre ce cours. Au revoir 2. Setup a GitHub account: Bonjour à tous, et bienvenue à la prochaine activité pratique, qui sera axée sur la création d' un compte Github et garantie que tout est correctement configuré La première chose à faire est de saisir Github dans votre moteur de recherche Ici, je suis sur Google et je vais dire recherche sur Google. Ensuite, vous devez sélectionner ce lien ici qui dit Github. OK. Maintenant, une fois que nous sommes sur la page Web de GitHub, nous voulons continuer et cliquer sur S'inscrire dans le coin supérieur droit Et puis, comme vous pouvez le voir, nous pouvons créer notre compte gratuit, et nous pouvons le faire en vous inscrivant à Github en continuant avec un compte Google, avec un compte Apple, ou vous pouvez saisir manuellement votre e-mail, votre mot de passe, votre nom d'utilisateur, votre région Et bien sûr, vous pouvez vérifier les options suivantes ici avant de créer votre compte. Donc, ce que je vous recommande de faire maintenant, c'est d'aller de l'avant et de faire exactement cela. Décidez donc comment vous souhaitez créer votre compte Github et inscrivez-vous. Vous devrez peut-être alors compléter un puzzle de vérification , puis vérifier également votre e-mail. Il y a donc plusieurs façons dont vous devrez peut-être vous y prendre. Mais une fois que vous l'aurez fait, vous serez redirigé vers la page de votre tableau de bord Github, et c'est là que nous allons nous reconnecter En attendant, configurez votre compte Github en conséquence, comme je le montre maintenant sur mon écran Très bien, alors bon retour. Alors félicitations si vous avez franchi cette étape ici. Comme vous pouvez le voir maintenant, nous en sommes maintenant à l'étape où nous sommes sur notre tableau de bord Github Donc, si vous voyez cette page ici, bravo, vous avez configuré votre compte GitHub Il a été créé et est entièrement prêt à fonctionner. Et allons-y et commençons par la prochaine leçon. 3. Créer un référentiel GitHub: C'est bon. Continuons maintenant et créons notre premier dépôt Github Vous vous demandez probablement ce qu'est un dépôt. Un dépôt Github est essentiellement un emplacement centralisé pour stocker le code source de notre projet C'est exactement ce que nous allons faire maintenant. Nous allons créer un dépôt à cette fin. Nous pouvons dire créer un dépôt. Comme vous pouvez le voir, le propriétaire sera affiché, donc ce sera notre nom d'utilisateur associé à notre compte Gu, et nous voulons donner le nom de notre dépôt. Je vais l'appeler Sample Repose. Vous pouvez lui donner le nom et la description que vous désirez. Donc ici, je vais dire site web, lancement. Appli. Vous ne pouvez donc en donner qu'une description. Maintenant, dans le cadre de la visibilité, juste pour garantir le bon déroulement du déploiement du premier coup, nous allons le rendre public. Il peut arriver que vous deviez intégrer davantage d'autorisations si vous décidez de le rendre privé, mais nous n'entrerons pas dans détails dans ce cours. Ensuite, vous pouvez également ajouter un fichier Lisez-moi, alors assurez-vous de l'activer, ce qui vous permettra essentiellement d'écrire une description plus longue du projet S ici. Une fois que vous êtes satisfait de tout, vous pouvez dire « créer un dépôt ». Et cela va créer notre dépôt juste comme ça, et nous pouvons voir la structure complète ici, donc elle sera sur la branche principale ici. Nous pouvons voir dans le coin supérieur gauche notre nom associé au référentiel associé que nous venons créer et la visibilité auprès du public. C'est bon. C'est ainsi que vous pouvez créer votre dépôt Github. 4. Configurer le bureau GitHub: C'est vrai. La prochaine chose que nous voulons faire est configurer le bureau Github, qui est essentiellement une interface qui nous permettra de synchroniser notre code source de notre machine locale avec notre référentiel Github Donc, considérez cela comme un pont entre notre code source d' local et un environnement plus en ligne. C'est bon. Donc, ce que vous voulez faire dans votre moteur de recherche, c'est taper GitHub pour ordinateur de bureau, disons Google Search Et ici, nous verrons une option qui dit télécharger GitHub Desktop. Pour plus de clarté, vous pouvez consulter l'URL ici qui dit desktop.github.com télécharger GitHub Desktop. Pour plus de clarté, vous pouvez consulter l'URL ici qui dit desktop.github.com, barre oblique, télécharger, fordslash. Maintenant, je suis sur un appareil Windows, donc je vais dire télécharger pour Windows. Cependant, si vous êtes sur Mac, si vous faites défiler l'écran vers le bas, il se peut que vous soyez affiché ici automatiquement ou qu'il vous montre ici, Mac pour l'installer pour Macaws Vous pouvez le télécharger pour Macaw juste ici. Vous avez donc cette option en jeu ici. C'est bon. Donc, ce que nous pouvons faire maintenant, c'est télécharger pour Windows, et cela va télécharger le programme d'installation, pourrait-on dire. Cela va donc prendre quelques instants ici. Attendons donc. Et une fois qu'il aura été téléchargé, nous pourrons procéder à son installation en conséquence. Attendons donc. Et voilà. Voici donc la configuration EXC de Github Desktop afin que nous puissions sélectionner OK Ensuite, il va monter sur une haie et l'installer sur notre machine. Cela prend donc quelques instants, nous pouvons donc voir qu'il est en train de charger, et nous voulons juste attendre que cela soit configuré. OK. Et c'est ici. Voici l' écran d'animation. Et vous pouvez voir ici qu'il est en cours d'installation et nous pouvons voir cette mini-barre de progression. Attendons donc que cela soit installé sur notre machine, puis nous pourrons partir de là. D' accord, alors bon retour Maintenant, nous pouvons voir qu' il a été installé, et nous allons voir ceci, vous pourriez dire interface ici pour commencer. Bravo, vous avez installé avec succès le bureau Github Maintenant, il ajoute parfois aussi un raccourci sur votre bureau. Donc, si vous deviez tout minimiser, vous pouvez voir que nous avons également un bureau GitHub ici Bon, alors, pour en arriver là. 5. Synchronisez notre code source: Bien, la prochaine chose que nous voulons faire est de synchroniser notre projet avec GitHub Desktop et également avec notre référentiel GitHub Mais la première chose que vous voulez faire est de connecter GitHub Desktop à GitHub lui-même C'est donc exactement ce que nous allons faire. Nous pouvons donc passer au fichier, puis aux options. Après quoi, vous voulez vous connecter à github.com, assurez-vous d'avoir sélectionné Vous pouvez donc sélectionner cette option. Ensuite, vous devez vous connecter avec votre navigateur. Allez-y et dites « continuez ». Ensuite, il va vérifier la session ici. Nous sommes donc actuellement connectés via notre compte GitHub, comme vous pouvez le voir ici Nous voulons donc continuer à vérifier cette session. Ensuite, nous voulons autoriser GitHub Desktop à accéder à nos référentiels, données, à notre flux de travail, etc. Vous souhaitez donc l'autoriser Ensuite, vous pouvez dire open GitHub desktop, et là, nous pouvons voir qu'il est désormais lié à notre référentiel appelé sample repo Assurez-vous donc d'être allé de l' avant et d'avoir fait exactement cela. C'est bon. La prochaine chose que nous voulons faire est cloner un dépôt depuis Internet. Pour le moment, jetons un coup d'œil à l'espace de travail après avoir tout fermé ici. Actuellement, j'ai mon projet sur mon bureau dans un fichier connu sous le nom de mon projet et celui-ci contient un index simple sur les fichiers HML, CSS et JavaScript Essentiellement, ce que je veux faire, c'est continuer et m'assurer qu'ils sont téléchargés dans ce référentiel. Maintenant, nous pouvons cloner ce dépôt sur notre bureau, puis la première fois, nous pouvons simplement faire glisser nos fichiers dans ce dossier, puis à partir de ce moment, nous allons travailler sur ce fichier singulier, qui porte ironiquement le même nom que notre Cela aura du sens quand je le démontrerai. Pour ce faire, nous voulons aller de l' avant et ouvrir le bureau GitHub. Ensuite, nous voulons dire cloner un dépôt depuis Internet. Nous voulons sélectionner notre dépôt ici et dire Clone. OK. Nous avons donc procédé au clonage de notre dépôt Alors maintenant, si nous devions le minimiser, nous pouvons voir que nous l' avons ici sur notre bureau, maintenant connu sous le nom de sample dash repo Donc, ce que je veux faire, c'est visualiser cela dans le code Visual Studio. Je vais donc cliquer sur l'icône en haut à gauche, aller dans Fichier, Ouvrir un dossier. Desktop, et je vais sélectionner Sample repo. Et comme nous pouvons le voir, par défaut, il y aura un fichier Lisez-moi, et c'est le fichier que nous avons créé par défaut. C'est donc une confirmation ici. Maintenant, la prochaine chose que nous voulons faire est simplement de déplacer tous nos fichiers. Idéalement, vous devriez déjà avoir un projet sur lequel vous souhaitez travailler. Vous pouvez donc ouvrir le dossier de projet sur lequel vous travaillez. Je suis donc en train d'ouvrir mon projet. Et voici l' index, le script et le style de mes fichiers. Je vais le souligner et le déplacer vers un exemple de dépôt. Il suffit de le faire une fois. Et maintenant, nous allons travailler en permanence avec Sample Repo , car il est connecté et synchronisé avec GitHub desktop et Github Nous avons juste besoin de télécharger notre code source. Mais maintenant, si nous allons sur GitHub Desktop, nous pouvons voir tous ces fichiers en place L'index HML Script JS et le CSS de démarrage se trouvent désormais tous dans ce particulier, comme nous pouvons le voir dossier particulier, comme nous pouvons le voir, et il est récupéré par GitHub Desktop, cette interface Nous pouvons voir si nous ouvrons le code Visual Studio, ces fichiers sont déjà en place. Parfait. Maintenant, ce que nous voulons faire, c'est simplement effectuer la synchronisation maintenant. Nous voulons donc publier tous ces fichiers ici et les télécharger notre référentiel Github afin qu'ils soient accessibles via Github Nous devons donc ici lui donner un nom pour un résumé. Donc ici, je vais dire projet, télécharger. Et vous pouvez ajouter une description ici, et vous souhaitez enregistrer vos trois fichiers dans la branche principale. Et bien sûr, cela est également en corrélation avec la branche principale de notre référentiel ici Il va apparaître ici. Ensuite, vous devez dire push origin, donc cela va envoyer tous nos fichiers vers notre branche principale, qui apparaîtra dans notre référentiel connu sous le nom de sample repo Et si nous devions actualiser notre dépôt ici, nous pouvons voir que tout est en place ici. Nous avons tous nos fichiers, nous sommes donc totalement synchronisés. 6. Configurez un compte Cloudflare Pages et lancez votre site web.: Maintenant, la prochaine chose que nous voulons faire est de configurer notre compte CloudFlare et lancer essentiellement notre site Web Tout d'abord, vous devez accéder à Google et saisir des pages CloudFlare Ensuite, vous pouvez dire Google Search et sélectionner ici les pages CloudFlare OK. Et la prochaine chose que vous voulez faire est de vous inscrire. Ensuite, vous pouvez décider, encore une fois, de la manière dont vous souhaitez créer votre compte. Si vous souhaitez accéder à Google, Apple, Github, ou si vous souhaitez saisir votre e-mail et votre mot de passe tels quels, c'est à vous de décider Donc, pour plus de clarté, je vais vous dire ce que je vais faire pour que vous puissiez voir à peu près le même type de balisage à la fin après avoir vérifié votre e-mail. Je vais saisir manuellement mon e-mail et mon mot de passe, vérifier que mon e-mail et je suis un être humain et je vais m'inscrire parce que je veux vous montrer comment vous pouvez vous configurer avec Github Au lieu de le faire de la manière la plus simple, je veux vous montrer le format par défaut que vous pourriez dire pour savoir comment procéder. C'est donc le raisonnement qui sous-tend cela. Je vais donc consulter l' e-mail et me faire passer pour Drew. Je vous recommande de faire de même, d'effectuer la vérification et de vous inscrire. Ensuite, vous devrez accéder à votre adresse e-mail et également vérifier votre adresse e-mail, cliquer sur un lien pour vérifier et vous serez redirigé vers la page que je vais vous montrer une fois que tout sera terminé. Donc, pour la première fois, je vous recommande de le faire manuellement puis lorsque vous serez plus à l'aise, vous pourrez passer directement à la voie Github, mais c'est la raison pour laquelle je vais le faire plus longtemps Alors allons-y et commençons. Très bien, bon retour. J'espère qu'une fois que vous aurez cliqué sur le bouton ou le lien de vérification dans votre e-mail, vous serez éventuellement redirigé vers une page qui ressemble à ceci Maintenant, c'est ce que je voulais dire tout à l'heure en procédant de manière manuelle. Nous pouvons donc dire connect Github, et cela va continuer et nous inciter à installer un CloudFlare autorisé travailleurs et les pages, et vous pouvez décider si vous le voulez pour tous les référentiels ou uniquement pour sélectionner des référentiels et le sélectionner et cela va continuer et nous inciter à installer un CloudFlare autorisé, les travailleurs et les pages, et vous pouvez décider si vous le voulez pour tous les référentiels ou uniquement pour sélectionner des référentiels et le sélectionner. Donc, c'est vraiment à vous de décider. Donc, ici, je vais juste dire sélectionner le référentiel. Ensuite, je vais dire installer et autoriser. Cela ne va donc prendre qu'un moment. Ici, il va maintenant apparaître en vert, puis nous pouvons continuer avec Github maintenant Ensuite, nous pouvons voir qu'il a sélectionné notre référentiel ici, bien sûr, il suffit de cliquer dessus et de dire suivant. Ensuite, nous pouvons simplement faire défiler la page vers le bas et voir tout tel qu'il est dit ici. Le nom du projet, le référentiel. De plus, vous pouvez ajouter des commandes de construction et les ajuster ici, mais nous allons tout laisser par défaut et dire déployer. Il s'agit essentiellement de lancer notre application, vous voulez juste continuer et vous devrez peut-être ajouter quelque chose ici. Vérifions-le. Euh, oui, ça a l'air bien. Il vous suffit donc de déployer votre application ici. Cela pourrait donc nous inciter à ajuster le nom du projet s' il ne dit pas déployer, donc je vais juste dire ici application Faites ensuite défiler la page vers le bas. Maintenant, si, comme nous pouvons le voir ici, ce qui est une bonne leçon l'option ou le bouton de déploiement ne répond pas, vous pouvez simplement actualiser votre page ici. OK. Vous pouvez simplement continuer et vous reconnecter à Github. suffit de sélectionner votre dépôt, passer à l'étape suivante Vous voulez simplement tout laisser tel quel et voir le déploiement. Parfois, ce bogue se produit et c'est une bonne chose que nous le voyions pour la première fois ici. C'est juste quelque chose que je tiens à mentionner qui peut se produire. Comme vous pouvez le voir maintenant, il s'agit simplement de configurer notre référentiel et cela ne prendra que quelques instants. Gardez cela à l'esprit si cela se produit. Mais malheureusement, dans mon cas, il s'est avéré que cela ne me correspondait pas. Ici, nous pouvons voir que tout a été initialisé dans l'environnement de construction. En panne, notre application est sur le point d' être déployée Il ne nous reste plus qu'à attendre quelques instants. Je pense que cela prendra peut-être 20 secondes. Si cela ne met pas la vidéo en pause, nous pouvons aller sur une haie et attendre qu'elle soit terminée, mais cela ne devrait pas prendre 20 secondes. Voilà, la construction est terminée. Notre application a été déployée. Maintenant, ce que nous pouvons faire, c'est accéder aux domaines ici. Vous pouvez cliquer avec le bouton droit de la souris et l' ouvrir dans une nouvelle discussion CloudFlare va essentiellement nous fournir une valeur par défaut Vous pourriez me dire comment puis-je prononcer un nom de domaine par défaut ici ? Comme vous pouvez le constater, elle est connue sous le nom d'URL de travail. C'est public, et vous pouvez vraiment le visiter. Donc, si je clique avec le bouton droit de la souris et que j'ouvre le lien dans un nouvel onglet, nous l'avons ici. Voici mon portfolio opérationnel et accessible avec un nom de domaine par défaut qui m'a été attribué. Voilà, vous pouvez créer un compte CloudFlare et vous pouvez essentiellement déployer votre application partir d'un référentiel Github Très bien, les gars, c'est tout pour cette leçon. 7. Gérer les mises à jour du code source: C'est bon. Dans cette prochaine leçon, nous allons nous concentrer sur la gestion de la mise à jour de notre code source. Supposons donc que nous souhaitions apporter une modification à notre application et que nous souhaitions tout redéployer Tout va donc être automatiquement intégré à Cloudflare Vous n'avez donc pas vraiment besoin de faire quoi que ce soit. Cela va être automatisé. Maintenant, je vais juste vous montrer un test ici. Disons que j'ajuste cela, disons simplement bonjour, je suis Ono par exemple. Je vais donc aller à mon code source ici, et je vais juste apporter cette modification très minimale ici, et je vais juste dire bonjour, je suis ono. Juste comme ça. Et nous pouvons voir qu'il a été modifié. Donc, si nous regardons dans notre répertoire modifié, si nous allons sur GitHub Desktop, il va le récupérer Donc, le rouge ici, bien sûr, était l'ancien code et le vert le code de remplacement. Il va donc dire mettre à jour l'index en HTML. Donc, parfois, le hitle ici sera dynamique et mis à jour. Alors validons ceci et publions ce code source maintenant. OK. Et si nous revenons à notre dépôt, dites simplement ignorer ceci et nous verrons que cela va pousser cet ajustement ici, mettez à jour le point d'index HML vers Cloud FIRE Donc, si nous pouvons le voir ici, nous pouvons cliquer sur Build in progress, et nous pouvons voir que cela concerne Update index point HTML, qui est en cours de transfert et va être déployé d'un moment à l'autre, puis nous pourrons actualiser notre application et voir ensuite cette modification qui a été mise à jour. Donc, si je fais défiler la page vers le haut, index en HTML, cette version particulière est terminée, actualisons cette page Et nous pouvons voir qu'il est écrit « Je suis honoré ». Que vous puissiez gérer toutes les mises à jour du code de votre application. Comme vous pouvez le constater, tout fonctionne parfaitement dans l' ensemble de votre application, comme nous pouvons le voir ici avec Get up Desktop, votre référentiel et CloudFiller Voilà pour cette leçon. Et si vous deviez actualiser votre dépôt, nous pouvons maintenant constater que cette mise à jour a été un succès. 8. Creating your own project: Bonjour à tous, et bienvenue à la prochaine leçon, qui sera axée sur la création de votre propre projet. Bien, créez votre propre projet. Maintenant que vous avez acquis toutes ces nouvelles compétences, il est temps pour vous de les utiliser et de créer votre propre projet. Ce que vous pouvez faire maintenant, c'est de vous rendre la section projets et ressources de ce cours pour plus d'informations sur façon dont vous pouvez aller de l'avant et vous assurer que vous suivez le projet, puis aussi sur la manière dont vous pouvez le partager afin que je puisse y jeter un œil et laisser mes commentaires. C'est vrai, les gars. C'est tout pour cette leçon. 9. Merci !: Bonjour à tous. Et juste une dernière note de ma part, et c'est juste merci d'avoir décidé de suivre ce cours. J'espère vraiment que cela vous a aidé à acquérir des connaissances approfondies Je vous remercie donc encore une fois, et je suis profondément reconnaissante que vous ayez décidé de vous inscrire à mes côtés pour ce voyage Une autre chose que je voulais mentionner est envisager de laisser un avis pour ce cours. Ce serait très apprécié. Vous n'êtes pas obligée si vous ne le souhaitez pas, mais dans mon cas, il est toujours utile d'essayer de comprendre les commentaires qui me sont adressés et de savoir comment améliorer mes cours. Merci encore et bonne chance dans votre voyage.