Créer un site Web est un investissement sérieux; vous devez payer pour chaque étape de la création d’un site Web.
Voulez-vous créer un site Web gratuit pour votre développement personnel ou professionnel ? Voici un moyen de concevoir votre prochain site Web avec un nom de domaine personnalisé, un hébergement gratuit à vie et un cryptage SSL absolument gratuit. Ouf! Que pourriez-vous demander de plus?
Il est évident qu’avoir un site Web augmente considérablement vos chiffres de croissance, et aujourd’hui, c’est plus un investissement qu’un luxe. Ce n’est pas seulement vrai pour les entreprises, mais les particuliers peuvent également bénéficier grandement d’un site Web personnel.
Qu’il s’agisse d’enregistrer un nom de domaine, d’héberger le contenu de votre site Web, de créer le site Web ou d’activer le cryptage SSL, vous devriez être prêt à vider vos poches. Ajoutant à la douleur, certaines de ces dépenses sont récurrentes et continuent pour toujours.
Et si je vous disais que vous pourriez créer un site Web gratuit tout en effectuant gratuitement toutes les étapes cruciales mentionnées ci-dessus dans la création de site Web ? Aussi étrange que cela puisse paraître, vous pouvez faire tout cela gratuitement si vous êtes étudiant.
Si vous connaissez GitHub, vous connaissez peut-être les pages GitHub. L’utilisation du service fourni avec chaque compte GitHub est gratuite. GitHub Pages permet à chaque utilisateur de créer un site Web gratuit et de l’héberger, mais il y a une énorme mise en garde. Les noms de domaine de ces sites Web gratuits se terminent essentiellement par github.io, ce qui ruine le professionnalisme de votre site Web.
Table des matières
Qu’est-ce que le pack développeur étudiant GitHub ?
Moins d’utilisateurs prendront votre site Web au sérieux et avoir un nom de domaine inutilement long n’est jamais une bonne idée. Mais salut! Nous ne sommes pas ici pour parler des avantages ou des mises en garde des pages GitHub. J’ai promis un moyen de vous permettre de créer un site Web gratuit avec le nom de domaine personnalisé, et voici comment vous pouvez le faire.
GitHub offre la possibilité de bénéficier d’un kit fantastique rempli d’outils en ligne pratiques pour chaque étudiant inscrit à un cursus menant à un diplôme ou à un diplôme, connu sous le nom de GitHub Student Developer Pack. Le pack comprend des abonnements professionnels et des remises à couper le souffle sur des outils populaires tels que Canva, Namecheap, Microsoft Azure, Discord, Name.com et StreamYard, parmi un million d’autres.
Dans cet article, nous utiliserons Namecheap pour enregistrer un domaine personnalisé gratuit et utiliserons les pages GitHub pour héberger notre site Web. Nous examinerons ensuite les moyens de concevoir et de télécharger vos fichiers HTML, CSS et JavaScript sur les pages GitHub. Finalement, nous activerons également le cryptage SSL pour le site Web, mais avant tout, nous devons nous inscrire au Student Developer Pack.
Comment postuler au pack développeur étudiant GitHub ?
Le processus d’inscription au Student Developer Pack se résume à avoir une adresse e-mail d’étudiant accordée par l’université. Une adresse e-mail d’étudiant se termine généralement par le nom de domaine de votre université, par exemple, [email protected] Il existe d’autres façons de s’inscrire au pack, mais elles nécessitent des temps de révision beaucoup plus longs que l’utilisation d’un e-mail étudiant. Si vous avez votre adresse e-mail d’étudiant prête, voici comment vous pouvez vous inscrire au pack :
Étape 1 : Accédez à Formation GitHub et cliquez sur l’option Connexion.
Vous pouvez vous connecter en utilisant vos identifiants si vous possédez déjà le pack. Sinon, vous pouvez suivre les étapes ci-dessous.
Cliquez sur l’option Créer un compte dans la fenêtre de connexion.
Étape 2 : Ensuite, inscrivez-vous en utilisant votre adresse e-mail d’étudiant et créez un compte.
Étape 3 : Lorsque vous êtes invité à « Quelle description décrit le mieux votre statut scolaire ? », assurez-vous de sélectionner Étudiant.
Étape 4 : Remplissez maintenant les cases nécessaires avec les détails concernant le nom de votre école et votre objectif d’utilisation de GitHub.
Étape 5 : Enfin, soumettez votre candidature en utilisant l’option « Soumettre vos informations ».
Vous devriez recevoir un e-mail de confirmation concernant le pack développeur si votre application est approuvée par GitHub. Le processus prend généralement quelques jours, mais le temps peut varier considérablement pendant les heures de pointe.
Comment postuler au GitHub Student Developer Pack sans e-mail étudiant ?
GitHub vous donne également la possibilité de postuler au pack en utilisant une carte d’étudiant valide ou toute autre preuve de votre statut académique. Les seules mises en garde sont le long temps d’attente et le taux de rejet plus élevé. Quoi qu’il en soit, voici comment vous pouvez postuler pour le pack étudiant via cette méthode :
Étape 1 : Suivez les étapes mentionnées ci-dessus pour créer un compte via votre adresse e-mail personnelle.
Étape 2 : Téléchargez maintenant la preuve de votre statut académique à l’aide de l’option appareil photo ou téléchargez les photos directement sur GitHub à l’aide du bouton Télécharger.
Étape 3 : Ensuite, remplissez tous les détails nécessaires comme le nom de l’école et le but de l’utilisation de GitHub.
Étape 4 : Soumettez votre candidature.
Comment enregistrer votre domaine personnalisé avec Namecheap ?
Je suppose que votre compte GitHub Education est opérationnel. Les étapes suivantes impliquent l’utilisation de Namecheap pour enregistrer votre domaine personnalisé gratuit et l’héberger via les pages GitHub. Suivez ces étapes pour enregistrer votre nom de domaine préféré :
Étape 1 : Connectez-vous à votre compte GitHub Education et accédez à la section Avantages.
Vous devriez voir un kit de développement Web et un kit d’événement virtuel.
Étape 2 : Accédez au kit d’événements virtuels et faites défiler vers le bas pour trouver Namecheap.
GitHub propose un enregistrement de nom de domaine d’un an sur le TLD .me, auquel vous pouvez accéder en cliquant sur l’option Obtenir l’accès.
Étape 3 : La fenêtre suivante vous demandera d’autoriser la demande de connexion de Namecheap à votre compte GitHub. Autorisez Namecheap et passez à l’étape suivante.
Vous devriez voir une invite indiquant « Nous avons vérifié avec succès votre pack étudiant avec GitHub » après une autorisation réussie.
Étape 4 : Trouvez votre domaine préféré via la barre de recherche et cliquez sur Rechercher.
Vous devriez voir la disponibilité du nom de domaine sur l’écran suivant. Si votre nom de domaine est disponible, vous pouvez procéder à son achat gratuitement.
Étape 5 : Passez à la caisse en utilisant l’adresse e-mail GitHub Education et sélectionnez Pages GitHub comme méthode d’hébergement tout en continuant.
Après avoir enregistré avec succès votre nom de domaine personnalisé et choisi les pages GitHub comme hébergement, Namecheap devrait automatiquement créer un référentiel dans votre compte GitHub. Ce référentiel est complètement vide et ne contient qu’un fichier README.md.
Vous pouvez accéder à ce référentiel en vous connectant à votre compte GitHub et en cliquant sur la section « Vos référentiels ». GitHub Pages n’offre pas d’outils visuels ni de thèmes prédéfinis pour votre site Web ; vous devez coder manuellement l’intégralité du site Web et télécharger les fichiers associés dans votre référentiel GitHub nouvellement créé.
Comment créer un site web gratuit et l’héberger sur GitHub Pages ?
Comme mentionné ci-dessus, vous devrez créer tous les fichiers HTML, CSS et JavaScript liés à votre site Web. Si vous êtes dans le développement Web et que vous savez comment coder, vous pouvez télécharger vos fichiers dans votre référentiel GitHub et faire fonctionner votre site Web. Vous pouvez faire défiler jusqu’à la section de cet article qui traite du téléchargement du code du site Web sur les pages GitHub.
Mais si vous êtes quelqu’un qui a peu ou pas d’informations sur Web Dev, nous avons ce qu’il vous faut. Vous pouvez suivre les étapes ci-dessous et concevoir votre propre site Web en utilisant du code HTML de base :
Étape 1 : Accédez à HTML5 UP et faites défiler jusqu’à la conception de site Web que vous aimez. Vous pouvez choisir n’importe quel autre thème prédéfini à partir de n’importe quelle plate-forme. Ici, j’ai choisi « Massively » de HTML5 UP, mais vous êtes libre de télécharger et de personnaliser la conception de site Web de votre choix.
Étape 2 : Extrayez le fichier zip téléchargé de la conception de votre site Web préféré.
Vous devriez voir des fichiers nommés index.html et generic.html et des dossiers comme des actifs et des images dans le dossier extrait.
Étape 3 : Ouvrez maintenant les fichiers extraits à l’aide de Visual Studio Code et sélectionnez le fichier index.html.
Étape 4 : Téléchargez et installez l’extension « Live Server » dans Visual Studio Code si vous ne l’avez pas déjà.
Étape 5 :Sélectionnez le fichier index.html, cliquez sur le bouton droit de la souris et sélectionnez l’option « Ouvrir dans Live Server ». Cette option vous permet de visualiser les modifications de votre fichier HTML dans votre navigateur en temps réel.
Comment personnaliser le design de votre site Web ?
Je n’appellerai pas le processus au-delà de ce point comme des « étapes » pour personnaliser votre site Web. La personnalisation des fichiers HTML dépend entièrement de vos préférences, mais voici comment j’ai personnalisé le design « Massivement » de HTML5 UP et l’ai converti en un portefeuille. Vous pouvez choisir de vous en inspirer ou de personnaliser entièrement votre site Web par vous-même. Le choix t’appartient!
Modification des balises Titre et Paragraphe
Au début de mon processus de personnalisation, j’ai changé la balise de titre « Massivement ». La balise de titre de votre fichier HTML décidera de son nom lors de son ouverture dans un onglet du navigateur. Le titre par défaut de Massively devrait être « Massively by HTML5 UP », et je vous recommande de le remplacer par quelque chose auquel votre site Web ressemble.
J’ai changé la balise de titre en « Samyak Goswami | Rédacteur de contenu technique » car il convenait parfaitement à mon portefeuille. Ensuite, j’ai changé la section Intro du site Web, qui disait : « C’est massivement » (contenu dans la balise H1) et l’ai transformée en « Portfolio de Samyak » pour des raisons évidentes. Par la suite, j’ai changé le texte ci-dessous dans les balises de paragraphe en « Une vitrine de mes projets et de mes capacités ».
En allant à la section Navigation (Nav) du fichier d’index, j’ai omis deux des trois boutons de navigation contenus dans la balise List. Je souhaitais créer un site web d’une seule page avec tous les détails sur une seule page, mais vous êtes libre de modifier le nombre de boutons de navigation selon votre choix.
Plus tard, j’ai changé le texte « C’est massivement » sur le bouton de navigation en « Mes articles ».
Modification des liens et des icônes des médias sociaux
Vous devez également voir les différentes icônes de médias sociaux sur le serveur en direct comme Twitter, Facebook, Instagram et GitHub. J’ai décidé d’omettre Twitter et Facebook et de garder Instagram et LinkedIn pour mon cas d’utilisation.
Vous pouvez modifier les icônes des médias sociaux et leurs liens en accédant à la section Navigation (Nav) et en faisant défiler jusqu’à Liste des balises avec Twitter, Instagram, et plus écrits en leur sein.
Remarquez qu’il n’y a pas de liens attachés à ces icônes de médias sociaux car la balise href est laissée vide. Vous pouvez ajouter des liens à la balise href en remplaçant « # » par votre lien préféré.
Modification du contenu de la page d’accueil
Tout d’abord, j’ai changé la balise H2 et en ai fait « Mon nom est Samyak Goswami », puis j’ai changé la balise Paragraphe en « Je suis un passionné de technologie…. ». Je vous suggère de changer la balise H2 avec quelque chose qui correspond au contenu de votre page d’accueil et la balise de paragraphe l’expliquant.
Nous arrivons maintenant à la partie la plus cruciale de cette personnalisation ; modifier le contenu des vignettes d’articles.
Pour ce faire, accédez à la section Articles du fichier d’index et vous devriez voir plusieurs extraits de code contenus dans les balises d’article. Vous pouvez ajouter des liens vers vos histoires en modifiant la section href comme nous l’avons fait lors de l’ajout de liens vers des icônes de médias sociaux.
Plus tard, vous pouvez changer le nom des articles en modifiant le contenu dans les balises H2. Vous pouvez également ajouter une description à vos articles en utilisant la balise de paragraphe.
Répétez le processus pour chaque article en ajoutant des liens, en modifiant les noms et en ajoutant une description à tous vos articles.
Ajouter des images à vos sites Web
Vous avez dû remarquer que l’aperçu est très différent des images présentes sur le site Web HTML5 UP. Cela est dû aux photos planes et fades du dossier personnalisable. Pimentons notre site Web en y ajoutant des images personnalisées.
Images originales
Pour ce faire, accédez au dossier dans lequel vous avez précédemment extrait le fichier zip « Massively ». Ouvrez le dossier extrait et accédez au dossier Images. Vous devriez voir différentes images nommées bg, pic01, pic02, etc. Ce sont les images liées à nos articles dans la balise Article.
Vous pouvez soit ajouter des images personnalisées et modifier le fichier d’index avec les noms de ces images, soit ajouter les images et les nommer de la même manière que les images par défaut. Donner des noms identiques aux images nous évite de modifier le code et beaucoup de temps par la suite.
Images modifiées
Je vous suggère de relire et de modifier les autres sections de votre site Web qui ne sont pas importantes. Voici le portfolio que j’ai créé en suivant les étapes que j’ai mentionnées ci-dessus : samyakgoswami.me.
Comment télécharger le code de votre site Web sur les pages GitHub ?
Après avoir finalement codé et conçu votre site Web, il est temps de le télécharger sur les pages GitHub et de le mettre en ligne sur Internet.
Voici comment télécharger votre site Web sur les pages GitHub :
Étape 1 : Connectez-vous à votre compte GitHub et accédez à la section Mes référentiels.
Étape 2 : Vous devriez voir un référentiel nommé your_username.github.io. Allez dans ce référentiel.
Étape 3 : Vous devriez voir une option pour créer votre propre fichier ou télécharger des fichiers dans le référentiel GitHub.
Étape 4 : Sélectionnez les cinq fichiers et dossiers ; actifs, images, éléments, génériques, index, et faites-les glisser et déposez-les dans le référentiel.
Une fois les fichiers téléchargés, validez le code et attendez que GitHub traite vos fichiers.
Étape 5 : Accédez à Paramètres> Pages GitHub pour voir l’état de votre site Web. Vous devriez voir l’invite « Votre site Web est publié sur votre_domaine_personnalisé ».
Vous pouvez maintenant accéder à votre adresse Web et vérifier vous-même le site Web. N’oubliez pas que le site Web peut prendre un certain temps avant d’être mis en ligne initialement.
Comment activer le cryptage SSL dans les pages GitHub ?
HTTP est un moyen dangereux de gérer les demandes des utilisateurs sur votre site Web. Toute personne ayant une intention malveillante et de solides connaissances techniques peut intercepter les interactions entre l’utilisateur et votre site Web. D’autre part, HTTPS offre à tous vos visiteurs une session de navigation beaucoup plus sécurisée. Les pages GitHub offrent un cryptage HTTPS gratuit, et voici comment vous pouvez en bénéficier :
Faites défiler jusqu’à la section Pages dans le référentiel.
Vous devriez voir l’option « Enforce HTTPS » à la fin de la fenêtre. Le cryptage SSL devrait être activé dès que vous cochez la case Appliquer HTTPS.
Si vous trouvez que l’option Appliquer HTTPS n’est pas disponible pour votre domaine, vous pouvez activer le cryptage SSL en suivant les étapes ci-dessous :
Étape 1 : Connectez-vous à votre compte Namecheap et accédez à la section « Liste de domaines ».
Étape 2 : Accédez maintenant à Gérer le domaine, puis à la section « DNS avancé ».
Vous devriez voir des enregistrements CNAME et A existants.
Ajoutez les enregistrements A suivants avec l’hôte comme « @ » et l’adresse IP comme « 185.199.108.153 ». Le suivant avec le nom d’hôte « @ » et l’adresse IP comme « 185.199.109.153 ».
Suivez la tendance jusqu’à ce que vous ayez 4 enregistrements A jusqu’à l’adresse IP « 185.199.111.153 ».
Supprimez tous les enregistrements A précédents.
Étape 3 : Ensuite, ajoutez un enregistrement CNAME avec Host comme « www » et Value comme nom d’utilisateur GitHub (dot) github (dot) io.
Supprimez les enregistrements CNAME précédents. Au final, vos paramètres DNS doivent avoir 4 enregistrements A et 1 enregistrement CNAME.
Étape 4 : Accédez maintenant aux pages GitHub dans la section Paramètres. L’option Appliquer HTTPS devrait maintenant être disponible pour votre domaine.
Résumé 👈
GitHub offre une opportunité fantastique à chaque étudiant de créer un site Web gratuit et de le gérer. Bien que vous ne puissiez pas utiliser GitHub Pages pour héberger des charges de trafic massives, il coche toutes les cases pour un site Web statique à petite échelle. Le nom de domaine personnalisé gratuit, l’hébergement et le cryptage SSL le rendent encore plus merveilleux à avoir.
Vous pouvez maintenant lire « Comment choisir un hébergeur pour votre nouveau site Web ».
Voici quelques outils de surveillance de la vitesse des pages pour vous avertir lorsque votre site Web tombe en panne.