Geekflare est soutenu par notre public. Nous pouvons gagner des commissions d'affiliation en achetant des liens sur ce site.
Partager sur:

Comment créer un site Web gratuit avec un nom de domaine personnalisé, un hébergement et un cryptage SSL ?

construire un site web gratuit
Scanner de sécurité des applications Web Invicti – la seule solution qui offre une vérification automatique des vulnérabilités avec Proof-Based Scanning™.

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 croissance personnelle ou professionnelle? Voici un moyen de concevez 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 va de soi qu'avoir un site internet booste 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 activation du cryptage SSL, vous devriez être prêt à vider vos poches. Ajoutant à la douleur, certaines de ces dépenses sont récurrentes et se poursuivent pour toujours.

Et si je vous disais que vous pouvez créer un site Web gratuit tout en effectuant gratuitement toutes les étapes cruciales mentionnées ci-dessus pour créer un 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. Il est gratuit d'utiliser le service 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.

What is the GitHub Student Developer Pack?

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 à chaque étudiant inscrit à un cours menant à un diplôme, connu sous le nom de GitHub Student Developer Pack. Le pack comprend des abonnements pro et des remises à couper le souffle sur des outils populaires comme 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. À terme, nous activerons également le cryptage SSL pour le site Web, mais nous devons avant tout nous inscrire au Student Developer Pack.

Comment postuler au pack de développement é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, imastudent@mywvm.wvm.edu. 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 : Cliquez sur Éducation GitHub et cliquez sur l'option Connexion.

Vous pouvez vous connecter avec 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 le message « Qu'est-ce qui décrit le mieux votre statut universitaire ? », 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'utiliser 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 pour le pack de développement étudiant GitHub sans e-mail étudiant ?

GitHub vous donne également la possibilité de demander le 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 demander le pack étudiant via cette méthode:

Étape 1 : Suivez les étapes mentionnées ci-dessus pour créer un compte via votre e-mail personnel.

É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 demande.

How to register your custom domain using 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 Web Dev Kit et un Virtual Event Kit.

Étape 2 : Accédez au kit d'événement virtuel 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 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é 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 : Payez en utilisant l'adresse e-mail GitHub Education et sélectionnez les 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 l'ensemble du site Web manuellement 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 les pages GitHub ?

Comme mentionné ci-dessus, vous devrez créer tous les fichiers HTML, CSS et JavaScript liés à votre site Web. Si vous aimez le Web Dev et que vous savez comment coder à votre guise, vous pouvez télécharger vos fichiers dans votre référentiel GitHub et lancer 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 : Cliquez sur 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 « Massivement » à partir 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 tels que 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 le code Visual Studio 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 la conception de votre site Web?

Je ne qualifierai pas le processus au-delà de ce point de « é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é la conception « massivement » de HTML5 UP et l'ai convertie en un portfolio. Vous pouvez choisir de vous en inspirer ou de personnaliser entièrement vous-même votre site Web. Le choix t'appartient!

Modification des balises Titre et Paragraphe

En commençant mon processus de personnalisation, j'ai modifié la balise de titre « Massivement ». La balise title 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 qui ressemble à votre site Web.

J'ai changé la balise de titre en « Samyak Goswami | Rédacteur de contenu technique », car il convenait parfaitement à mon portfolio. Ensuite, j'ai modifié la section Intro du site Web, qui disait : « C'est massivement » (contenu dans la balise H1) et en ai fait « le 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 accédant à la section Navigation (Nav) du fichier d'index, j'ai omis deux des trois boutons de navigation contenus dans la balise List. J'ai voulu créer un site web monopage 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 réseaux sociaux et leurs liens en accédant à la section Navigation (Nav) et en faisant défiler jusqu'à la liste des balises avec Twitter, Instagram et plus encore.

Remarquez qu'aucun lien n'est attaché à ces icônes de réseaux 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 l'ai fait « Je m'appelle 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 tuiles article.

Pour ce faire, accédez à la section Publications 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 les icônes de réseaux 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 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û à l'avion et aux photos fades dans le fichier 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 « massivement ». 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 aux images des noms identiques 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.

Après avoir enfin 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 vous pouvez 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 rechercher 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.

How to enable SSL encryption in GitHub Pages?

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 profiter :

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 mis en ligne dès que vous cochez la case Appliquer HTTPS.

Si vous trouvez que 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 ».

É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 "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. En fin de compte, vos paramètres DNS devraient 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.

En résumé 👈

GitHub offre à chaque étudiant une opportunité fantastique de créer un site Web gratuit et de le gérer. Bien que vous ne puissiez pas utiliser les pages GitHub 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 Choisissez un hébergeur pour votre nouveau site Web.

Voici quelques-unes des outils de surveillance de la vitesse des pages pour vous avertir lorsque votre site Web tombe en panne.

Merci à nos commanditaires
Plus de bonnes lectures sur l'hébergement
Alimentez votre entreprise
Certains des outils et services pour aider votre entreprise à se développer.
  • Invicti utilise Proof-Based Scanning™ pour vérifier automatiquement les vulnérabilités identifiées et générer des résultats exploitables en quelques heures seulement.
    Essayez Invicti
  • Web scraping, proxy résidentiel, proxy manager, web unlocker, moteur de recherche et tout ce dont vous avez besoin pour collecter des données Web.
    Essayez Brightdata
  • Semrush est une solution de marketing numérique tout-en-un avec plus de 50 outils de référencement, de médias sociaux et de marketing de contenu.
    Essayez Semrush
  • Intruder est un scanner de vulnérabilités en ligne qui détecte les failles de cybersécurité de votre infrastructure, afin d'éviter des violations de données coûteuses.
    Essayez Intruder