La création d’un site web est un investissement sérieux ; vous devez payer pour chaque étape de la construction 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 tout à fait gratuit. Vous avez tout à fait le droit de créer votre propre site web Que pourriez-vous demander de plus ?
Il est évident que le fait d’avoir un site web booste considérablement vos chiffres de croissance, et aujourd’hui, il s’agit plus d’un investissement que d’un luxe. Ce n’est pas seulement vrai pour les entreprises, mais aussi pour les particuliers qui peuvent tirer un grand profit d’un site web personnel.
Qu’il s’agisse de l’enregistrement d’un nom de domaine, de l’hébergement du contenu de votre site web, de la construction du site web ou de l’activation du cryptage SSL, vous devez être prêt à vous vider les poches. Pour ne rien arranger, certaines de ces dépenses sont récurrentes et se poursuivent indéfiniment.
Et si je vous disais que vous pouvez créer un site web gratuit tout en effectuant toutes les étapes cruciales susmentionnées de la création d’un site web, et ce gratuitement ? Aussi bizarre que cela puisse paraître, vous pouvez faire tout cela gratuitement si vous êtes étudiant.
Si vous connaissez GitHub, vous connaissez peut-être GitHub Pages. Il s’agit d’un service gratuit fourni avec chaque compte GitHub. 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.
Qu’est-ce que le GitHub Student Developer Pack ?
Moins d’utilisateurs prendront votre site au sérieux, et avoir un nom de domaine inutilement long n’est jamais une bonne idée. Mais bon ! Nous ne sommes pas ici pour parler des avantages ou des inconvénients des Pages GitHub. J’ai promis un moyen de vous permettre de créer un site web gratuit avec un nom de domaine personnalisé, et voici comment vous pouvez le faire.
GitHub offre la possibilité d’obtenir un kit fantastique rempli d’outils en ligne pratiques à tous les étudiants inscrits à un cours de licence ou de diplôme, connu sous le nom de GitHub Student Developer Pack. Ce pack comprend des abonnements professionnels et des remises exceptionnelles sur des outils populaires tels que Canva, Namecheap, Microsoft Azure, Discord, Name.com et StreamYard, pour n’en citer que quelques-uns.
Dans cet article, nous allons utiliser Namecheap pour enregistrer un domaine personnalisé gratuit et utiliser des pages GitHub pour héberger notre site web. Nous verrons ensuite comment concevoir et télécharger vos fichiers HTML, CSS et JavaScript sur les pages GitHub. Enfin, nous activerons le cryptage SSL pour le site web, mais avant tout, nous devons nous inscrire au Student Developer Pack.
Comment s’inscrire au GitHub Student Developer Pack ?
Pour s’inscrire au Student Developer Pack, il faut disposer d’une adresse électronique d’étudiant attribuée par l’université. Cette adresse se termine généralement par le nom de domaine de votre université, par exemple imastudent@mywvm.wvm.edu. Il existe d’autres moyens de s’inscrire au pack, mais ils nécessitent des délais d’examen beaucoup plus longs que l’utilisation d’une adresse électronique d’étudiant. Si vous disposez de votre adresse électronique d’étudiant, voici comment vous pouvez vous inscrire au pack :
Étape 1 : Allez sur GitHub education et cliquez sur l’option Sign In.
Vous pouvez vous connecter en utilisant vos identifiants si vous avez déjà le pack. Sinon, vous pouvez suivre les étapes ci-dessous.
Cliquez sur l’option Créer un compte dans la fenêtre d’ouverture de session.
Étape 2 : Ensuite, inscrivez-vous en utilisant votre adresse électronique d’étudiant et créez un compte.
Étape 3 : À la question “Quelle est la meilleure description de votre statut universitaire ?”, veillez à sélectionner “Étudiant”.
Étape 4 : Remplissez les cases nécessaires en indiquant le nom de votre école et l’objectif de votre utilisation de GitHub.
Étape 5: Enfin, soumettez votre demande en utilisant l’option “Soumettre vos informations”.
Si votre candidature est approuvée par GitHub, vous devriez recevoir un courriel de confirmation concernant le pack développeur. Le processus prend généralement quelques jours, mais le délai peut varier considérablement en période de pointe.
Comment postuler au GitHub Student Developer Pack sans l’email de l’étudiant ?
GitHub vous offre également la possibilité de demander le pack en utilisant une carte d’étudiant valide ou toute autre preuve de votre statut académique. Les seuls inconvénients sont le long temps d’attente et le taux de rejet plus élevé. Quoi qu’il en soit, voici comment vous pouvez demander le pack étudiant par cette méthode :
Étape 1 : Suivez les étapes mentionnées ci-dessus pour créer un compte à l’aide de votre adresse électronique personnelle.
Étape 2 : Téléchargez maintenant la preuve de votre statut académique en utilisant l’option appareil photo ou téléchargez les photos directement sur GitHub en utilisant le bouton Upload.
Étape 3 : Ensuite, remplissez toutes les informations nécessaires, comme le nom de l’école et l’objectif de l’utilisation de GitHub.
Étape 4 : Soumettez votre demande.
Comment enregistrer votre domaine personnalisé avec Namecheap ?
Je suppose que vous avez ouvert votre compte GitHub Education. Les étapes suivantes consistent à utiliser 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 allez dans la section Avantages.
Vous devriez voir un kit de développement Web et un kit d’événement virtuel.
Étape 2 : Allez dans le kit d’événement virtuel et faites défiler vers le bas pour trouver Namecheap.
GitHub offre un an d’enregistrement de nom de domaine dans le TLD .me, auquel vous pouvez accéder en cliquant sur l’option Get Access.
É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 disant “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é dans la barre de recherche et cliquez sur Trouver.
Vous devriez voir la disponibilité du nom de domaine sur l’écran suivant. Si votre nom de domaine est disponible, vous pouvez l’acheter gratuitement.
Étape 5 : Passez à la caisse en utilisant l’adresse électronique de GitHub Education et sélectionnez GitHub Pages comme méthode d’hébergement lors de la procédure.
Après avoir enregistré avec succès votre nom de domaine personnalisé et choisi les pages GitHub comme méthode d’hébergement, Namecheap devrait automatiquement créer un dépôt dans votre compte GitHub. Ce dépôt est complètement vide et ne contient qu’un fichier README.md.
Vous pouvez accéder à ce dépôt en vous connectant à votre compte GitHub et en cliquant sur la section “Vos dépôts”. GitHub Pages ne propose pas d’outils visuels ni de thèmes prédéfinis pour votre site web ; vous devez coder l’ensemble du site web manuellement et télécharger les fichiers correspondants dans votre dépôt 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 un adepte du développement Web et que vous savez comment coder, vous êtes prêt à télécharger vos fichiers dans votre dépôt GitHub et à lancer votre site Web. Vous pouvez passer à la section de cet article qui traite du téléchargement du code du site web sur GitHub Pages.
Mais si vous êtes quelqu’un qui n’a que peu ou pas d’informations sur le développement Web, nous avons tout ce qu’il vous faut. Vous pouvez suivre les étapes ci-dessous et concevoir votre propre site web en utilisant quelques bases de HTML :
Étape 1 : Allez sur HTML5 UP et faites défiler jusqu’à la conception de site Web qui vous plaît. Vous pouvez choisir n’importe quel autre thème préconstruit de n’importe quelle plateforme. Ici, j’ai choisi “Massively” de HTML5 UP, mais vous êtes libre de télécharger et de personnaliser n’importe quel design de site web de votre choix.
Étape 2 : Extrayez le fichier zip téléchargé de votre design de site web préféré.
Vous devriez voir des fichiers nommés index.html et generic.html et des dossiers comme assets et images dans le dossier extrait.
Étape 3 : Ouvrez les fichiers extraits en utilisant 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 en temps réel les modifications apportées à votre fichier HTML dans votre navigateur.
Comment personnaliser le design de votre site web ?
Je ne qualifierai pas le processus au-delà de ce point d’”étapes” pour la personnalisation de 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 de “Massively” à partir de HTML5 UP et l’ai converti en un portfolio. Vous pouvez choisir de vous en inspirer ou de personnaliser votre site web entièrement par vous-même. À vous de choisir !
Modifier les balises Titre et Paragraphe
En commençant mon processus de personnalisation, j’ai modifié la balise title “Massively” La balise title de votre fichier HTML déterminera son nom lorsqu’il sera ouvert dans un onglet du navigateur. Le titre par défaut de Massively devrait être “Massively by HTML5 UP”, et je recommande de le changer pour quelque chose qui ressemble à votre site web.
J’ai changé la balise de titre en “Samyak Goswami | Tech Content Writer” car cela correspondait idéalement à mon portfolio. Ensuite, j’ai modifié la section Intro du site web, qui disait : “This is Massively” (contenue dans la balise H1) et l’ai remplacée par “Samyak’s Portfolio” pour des raisons évidentes. Par la suite, j’ai modifié le texte ci-dessous dans les balises de paragraphe en “Une vitrine de mes projets et de mes compétences”
Dans la section Navigation (Nav) du fichier d’index, j’ai omis deux des trois boutons de navigation contenus dans la balise List. Je voulais 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.
Par la suite, j’ai remplacé le texte “This is Massively” du bouton de navigation par “My Articles”
Modifier les liens et icônes des médias sociaux
Vous devez également voir les différentes icônes de médias sociaux sur le serveur live comme Twitter, Facebook, Instagram et GitHub. J’ai décidé d’omettre Twitter et Facebook et de conserver Instagram et LinkedIn pour mon cas d’utilisation.
Vous pouvez modifier les icônes de médias sociaux et leurs liens en allant dans la section Navigation (Nav) et en faisant défiler jusqu’aux balises de liste avec Twitter, Instagram, et plus encore écrites à l’intérieur.
Remarquez qu’aucun lien n’est associé à ces icônes de médias sociaux, car la balise href est vide. Vous pouvez ajouter des liens à la balise href en remplaçant “#” par le lien de votre choix.
Modification du contenu de la page d’accueil
Tout d’abord, j’ai modifié la balise H2 et l’ai remplacée par “Mon nom est Samyak Goswami”, puis j’ai modifié la balise Paragraphe en “Je suis un passionné de technologie….”. Je vous suggère de remplacer la balise H2 par quelque chose qui corresponde au contenu de votre page d’accueil et la balise Paragraphe par quelque chose qui l’explique.
Nous arrivons maintenant à la partie la plus cruciale de cette personnalisation : la modification du contenu des tuiles d’article.
Pour ce faire, allez dans la section Posts du fichier d’index, et vous devriez voir plusieurs extraits de code contenus dans les balises Article. Vous pouvez ajouter des liens à vos articles en modifiant la section href comme nous l’avons fait pour l’ajout de liens vers les icônes de médias sociaux.
Plus tard, vous pourrez changer le nom des articles en modifiant le contenu des balises H2. Vous pouvez également ajouter une description à vos articles à l’aide de la balise paragraphe.
Répétez le processus pour chaque article en ajoutant des liens, en changeant 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 HTML5 UP. Cela est dû aux photos planes et fades du fichier personnalisable. Mettons du piment dans notre site web en y ajoutant des images personnalisées.
Pour ce faire, naviguez vers le dossier dans lequel vous avez précédemment extrait le fichier zip “Massively”. Ouvrez le dossier extrait et allez dans le 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. Le fait de donner des noms identiques aux images nous évite de modifier le code et de perdre beaucoup de temps par la suite.
Je vous suggère de relire et de modifier les autres sections de votre site web qui ne sont pas importantes.
Après avoir codé et conçu votre site web, il est temps de le télécharger sur GitHub Pages et de le mettre en ligne sur Internet.
Voici comment télécharger votre site web sur GitHub Pages :
Étape 1 : Connectez-vous à votre compte GitHub et allez dans la section Mes dépôts.
Étape 2 : Vous devriez voir un dépôt nommé votre_nom_d’utilisateur.github.io. Allez dans ce dépôt.
Etape 3 : Vous devriez voir une option pour créer votre propre fichier ou télécharger des fichiers vers le dépôt GitHub.
Étape 4 : Sélectionnez les cinq fichiers et dossiers : assets, images, elements, generic, index, et glissez-déposez-les dans le dépôt.
Une fois les fichiers téléchargés, validez le code et attendez que GitHub traite vos fichiers.
Étape 5 : Naviguez vers Paramètres>Pages GitHub pour voir l’état de votre site web. Vous devriez voir le message “Votre site web est publié sur votre_domaine_personnalisé”
Vous pouvez maintenant aller à votre adresse web et vérifier le site web vous-même. N’oubliez pas que le site web peut prendre un certain temps avant d’être mis en ligne.
Comment activer le cryptage SSL dans les pages GitHub ?
HTTP est un moyen peu sûr de gérer les requêtes des utilisateurs sur votre site web. Toute personne ayant des intentions malveillantes et des connaissances techniques solides peut intercepter les interactions entre l’utilisateur et votre site web. En revanche, HTTPS offre à tous vos visiteurs une session de navigation beaucoup plus sûre. Les pages GitHub offrent un cryptage HTTPS gratuit, et voici comment en bénéficier :
Accédez à la section Pages du dépôt.
Vous devriez voir l’option “Enforce HTTPS” à la fin de la fenêtre. Le cryptage SSL devrait être activé dès que vous aurez coché la case Enforce HTTPS.
Si l’option “Enforce 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 allez dans la section “Liste des domaines”.
Etape 2 : Naviguezmaintenant vers “Manage Domain” et ensuite vers la section “Advanced DNS”.
Vous devriez voir des enregistrements CNAME et A existants.
Ajoutez les enregistrements A suivants avec le nom d’hôte “@” et l’adresse IP “185.199.108.153”. Le suivant avec le nom d’hôte “@” et l’adresse IP “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.
Etape 3 : Ensuite, ajoutez un enregistrement CNAME avec Host comme “www” et Value comme votre nom d’utilisateur GitHub (dot) github (dot) io.
Supprimez les enregistrements CNAME précédents. Au final, vos paramètres DNS devraient comporter 4 enregistrements A et 1 enregistrement CNAME.
Étape 4 : Allez maintenant sur les pages GitHub dans la section Paramètres. L’option Enforce HTTPS devrait maintenant être disponible pour votre domaine.
En 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é, l’hébergement et le cryptage SSL gratuits le rendent encore plus intéressant.
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.