À vos marques, prêts, lancez : créer un site statique avec des pages GitHub

Avec tous les outils et cadres de développement Web actuels, la création d'un site Web devient de plus en plus compliquée. Mais parfois, vous n'avez pas besoin de beaucoup d'interactivité sur votre site. Si vous vous concentrez sur la transmission des informations au spectateur et que vous n'avez pas besoin de fonctionnalités complexes, un site statique peut être le bon choix.

Dans ce didacticiel, vous apprendrez ce qu'est un site statique, y compris ses avantages, ses limites et comment créer et déployer un site Web personnel simple créé avec HTML et Bootstrap gratuitement à l'aide de GitHub Pages.

Que sont les pages GitHub ?

GitHub est une plate-forme Web permettant d'héberger des référentiels Git et de collaborer sur des projets logiciels. Il offre des outils pour partager et suivre les modifications de code, gérer et réviser le code, et la possibilité d'ouvrir et de réviser les demandes d'extraction.

Ne confondez pas Git et GitHub ! GitHub est un service d'hébergement qui permet la collaboration entre développeurs, tandis que Git est le logiciel de contrôle de version local que vous utilisez pour enregistrer des instantanés de l'état de votre projet logiciel.

GitHub Pages est l'une des meilleures fonctionnalités de GitHub. C'est un service qui vous permet d'héberger un site Web statique directement à partir d'un référentiel GitHub. Cela signifie que vous pouvez utiliser votre référentiel pour stocker le code et les fichiers de votre site Web, et GitHub les publiera automatiquement en tant que site Web auquel vous pourrez accéder en ligne.

En résumé, GitHub Pages est un moyen rapide et facile de rendre votre site Web opérationnel, et il est particulièrement utile pour présenter votre portefeuille, vos projets open source ou tout autre contenu statique.

Sites Web statiques ou dynamiques

Comme nous l'avons vu, GitHub Pages fournit un moyen de déployer des sites Web statiques. Mais quelle est la différence entre un site web statique et un site web dynamique ?

Commençons par discuter du contenu de ces sites.

Le contenu statique fait référence aux éléments du site Web qui restent les mêmes pour tous les utilisateurs, quels qu'ils soient ou quelles que soient les actions qu'ils effectuent sur le site. Cela peut inclure des éléments tels que le texte, les images et la mise en page du site Web, ainsi que le code sous-jacent et les fichiers qui composent le site. Un site statique est livré à l'utilisateur exactement tel qu'il est stocké.

En revanche, le contenu dynamique est un contenu qui change en fonction des actions de l'utilisateur - comme la connexion, l'interaction avec un paywall ou les commentaires sur une publication - ou d'autres facteurs, tels que l'heure ou l'emplacement actuel.

Par exemple, un site Web qui affiche une image fixe d'un produit montrera toujours la même image à chaque utilisateur (statique). D'autre part, un site Web qui affiche l'heure actuelle affichera une heure différente pour chaque utilisateur en fonction de sa localisation (dynamique).

Généralement, on peut dire qu'un site Web est statique s'il ne contient que du HTML, du CSS et du JavaScript sur le frontend, sans technologies de serveur comme PHP ou Python qui interagissent avec une base de données.

Bien qu'il ne soit pas possible de créer des sites Web dynamiques à l'aide de pages GitHub, vous pouvez facilement créer le vôtre à l'aide d'un CMS tel que WordPress ou de générateurs de sites statiques tels que Gatsby ou Hugo.

Fonctionnalités clés des pages GitHub

Voyons les points forts de GitHub Pages en tant que service d'hébergement :

1. Configuration et publication faciles : GitHub Pages facilite le démarrage en quelques étapes simples. Vous pouvez activer les pages GitHub pour votre référentiel et spécifier la source des fichiers de votre site Web, et GitHub publiera automatiquement votre site Web et le rendra disponible à une URL basée sur votre nom d'utilisateur et le nom du référentiel.
2. Domaines personnalisés : avec les pages GitHub, vous pouvez utiliser un nom de domaine personnalisé pour votre site Web au lieu de l'URL par défaut fournie par GitHub. Cela vous permet d'utiliser votre propre image de marque et de faciliter la recherche et l'accès à votre site Web pour les utilisateurs.
3. Prise en charge HTTPS : GitHub Pages prend en charge HTTPS, ce qui permet des connexions sécurisées à votre site Web. Ceci est crucial pour bâtir la confiance de votre site.
4. Prise en charge de Jekyll : GitHub Pages prend en charge Jekyll, un générateur de sites statiques qui vous permet de créer des sites Web sophistiqués à l'aide de modèles et d'autres fonctionnalités. Cela facilite la création de sites Web d'aspect professionnel sans avoir à écrire tout le code à partir de zéro.

Limites

Comme indiqué précédemment, vous ne pouvez créer que des sites statiques avec les pages GitHub. Si vous souhaitez construire un projet complexe avec de nombreuses fonctionnalités, vous aurez besoin d'autres services d'hébergement. Vous devez également garder à l'esprit que vous ne pouvez pas utiliser les pages GitHub à des fins commerciales, telles que la gestion d'une entreprise en ligne ou le commerce électronique.

GitHub Pages n'autorise pas la taille de votre site à plus de 1 Go, ce qui signifie que les fichiers de votre référentiel ne peuvent pas dépasser cette quantité de mémoire. La plupart du temps, 1 Go est plus que suffisant pour un site statique ; assurez-vous simplement de compresser vos images.

Il a également une limite de bande passante souple de 100 Go par mois. Cette quantité de bande passante serait suffisante pour distribuer votre site Web à quelques milliers de personnes par mois, donc à moins que vous n'ayez un public énorme, vous serez prêt à partir.

Création et déploiement avec des pages GitHub : guide pas à pas

La création d'une page GitHub est un processus simple et direct pour héberger un site statique. N'oubliez pas que si vous avez besoin d'une connexion à une base de données, vous devez avoir un fournisseur de base de données externe.

Dans le guide suivant, vous apprendrez à créer une page GitHub à partir de zéro. Cela inclut la création d'un référentiel distant, la création d'un site Web personnel réactif avec HTML et le déploiement sur le Web avec GitHub.

Allons-y !

1. Inscrivez-vous sur GitHub

Pour démarrer, vous devez avoir un compte GitHub actif. Si vous n'en avez pas, rendez-vous sur leur page d'inscription. Cela ne devrait pas prendre plus de quelques minutes pour remplir le formulaire.

Une fois connecté, vous devriez pouvoir créer un référentiel distant.

2. Créer un référentiel distant

Un référentiel est un répertoire dans lequel vous stockez tout le code lié à un projet particulier.

Depuis la page d'accueil de GitHub, cliquez sur le bouton "Nouveau" ou "Créer un référentiel" situé dans le panneau de gauche du site. Cela vous redirigera vers un formulaire où vous remplirez les informations de votre repo.

Ces prochaines étapes sont cruciales :

1. Définissez le nom de votre référentiel sur "yourusername".github.io .
2. Vérifiez le bouton public. Vous devez définir le référentiel sur Public pour publier votre site.
3. Ajoutez un LISEZMOI.

Vous ne pouvez disposer d'un référentiel que pour un compte personnel ou une organisation donnée. C'est pourquoi le nom du référentiel est votre nom d'utilisateur et le domaine github.io . Plus tard, nous verrons comment mettre en place un site à partir d'un référentiel.

À moins que vous n'ayez GitHub Pro, vous ne pouvez publier une page GitHub que si le référentiel est public. Gardez cela à l'esprit si vous ne souhaitez pas partager publiquement le code source de votre site.

Après cela, vous devriez avoir quelque chose comme ceci :

Si vous disposez déjà du code source fonctionnel de votre site, vous pouvez ignorer le flux de travail Git commun et déposer les fichiers directement dans le dépôt à la place.

Pour ce faire, cliquez sur le menu Add file dans votre référentiel, et sélectionnez l'option Télécharger des fichiers . Sélectionnez ensuite les fichiers de votre site Web, avec le fichier HTML principal nommé index.html . N'oubliez pas de mettre également tous vos fichiers CSS et JavaScript dans le référentiel.

Enfin, cliquez sur le bouton Commit changes .

Dans la section suivante, nous allons créer un site Web personnel simple avec HTML et Bootstrap. Ensuite, nous le téléchargerons sur GitHub et le configurerons en tant que page publique GitHub avec un domaine personnalisé.

3. Créez un site personnel

Nous allons commencer par cloner le référentiel GitHub que nous venons de créer. Pour ce faire, assurez-vous que le client Git est déjà installé sur votre ordinateur. (Si ce n'est pas le cas, jetez un œil à notre tutoriel sur Git et GitHub.)

Accédez à l'onglet code de votre référentiel et copiez l'URL SSH dans l'option SHH .

Ensuite, lancez un terminal ou une ligne de commande. Sur la plupart des distributions Linux et macOS, vous pouvez utiliser le raccourci Ctrl + Alt + T ou parcourir le menu des applications de votre système pour Terminal . Sous Windows, vous pouvez utiliser le Git BASH installé par défaut avec Git, le CMD, PowerShell ou un client GUI.

Sur votre terminal, tapez git clone et l'URL que vous avez copiée. Cela téléchargera et créera une copie du référentiel distant sur votre ordinateur local afin que vous puissiez créer votre site Web.

Entrez ensuite le nouveau dossier nommé yourusername.github.io avec cd et ls . Vous devriez voir le dossier .git , qui contient la configuration et les métadonnées de votre projet, ainsi que le fichier README.md si vous en avez créé un.

Ouvrez votre éditeur de texte préféré (tel que Sublime Text) et commençons à créer votre site Web.

À la racine du référentiel, créez un fichier nommé index.html (ce nom est requis par les pages GitHub) et saisissez la structure de code HTML typique :

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kinsta User</title> </head> <body> </body> </html>

Comme nous l'avons dit précédemment, nous allons utiliser Bootstrap 5.0, un framework CSS open source qui nous aide à créer plus facilement des sites Web réactifs. Comme vous le verrez, nous n'aurons pas à utiliser de CSS personnalisé pour ce site particulier.

Pour intégrer Bootstrap à notre page, nous devrons inclure le CSS et le JavaScript compilés via un CDN. Collez le code suivant dans le HTML <head> pour pouvoir utiliser Bootstrap CSS :

 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

De la même manière, nous inclurons également le CDN Devicon pour pouvoir utiliser les icônes SVG des langages de programmation et des technologies populaires sans trop de problèmes :

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">

Maintenant, pour inclure le JavaScript, insérez le code suivant juste au-dessus de la fin de la balise </body> :

 <!-- JavaScript: Above --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Nous allons commencer en créant un en-tête pour notre site Web. Ce sera un en-tête sombre, avec des liens vers notre page d'index et deux autres pages — "Projets" et "Journal de lecture" — que vous pourrez créer plus tard :

 <nav class="navbar navbar-dark navbar-expand-lg bg-dark "> <div class="container-fluid"> <div class="mx-4"> <a class="navbar-brand" href="#">Kinsta User</a> </div> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">Projects</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Reading Log</a> </li> </ul> </div> </div> </nav>

Nous utilisons la barre de navigation du wrapper navbar et navbar-expand-lg pour créer un conteneur réactif qui se replie lorsque la largeur d'affichage est inférieure à 992 pixels. Cela se produit à cause de l'option de grille lg . Si vous souhaitez en savoir plus sur les options de grille, consultez la page de mise en page de Bootstrap.

Maintenant, créons deux colonnes responsives dans un conteneur : une pour une image gratuite d'Unsplash et une autre pour une description de nous-mêmes :

 <div class="container my-4 "> <div class="row justify-content-center"> <div class="col-lg mb-lg-4"> <img src="image.jpg" class="img-fluid" alt=""> </div> <div class="col-lg mx-2 align-self-center"> <div class="my-3"> <h1 class="text-center">I'm a Kinsta User</h1> <p>As a passionate software developer, I am deeply enthusiastic about creating and developing software applications. I am constantly learning and experimenting with new technologies and approaches, and I have a strong desire to create innovative and effective solutions to complex problems. I am driven by my curiosity and love for problem-solving, and I am committed to producing high-quality, well-designed software that meets the needs of users. </p> </div> </div> </div> </div>

Comme vous pouvez le voir, nous obtenons une image à partir d'un fichier local, elle doit donc se trouver dans le référentiel lorsque nous transmettons nos modifications au référentiel GitHub.

Enfin, dans notre conteneur Bootstrap, nous utiliserons des icônes SVG de Devicon, ainsi qu'un peu de CSS interne pour faire ressortir nos compétences :

 <!-- Inside the container created above --> <div class="my-4"> <div class="text-center mb-4"> <h1>My Skills</h1> </div> <div class="row "> <style> I { font-size: 4em; } </style> <!-- Skills --> <div class="col"> <div class="text-center"> <h4>WordPress</h4> <i class="devicon-wordpress-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Django</h4> <i class="devicon-django-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Python</h4> <i class="devicon-python-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>GitHub</h4> <i class="devicon-github-original" ></i> </div> </div> </div> </div>

Puisque nous utilisons la balise HTML <i> , nous pouvons la traiter comme une police. Ainsi nous fixons la taille de nos logos à 4 em en le déclarant dans la balise style .

Voici le résultat final de ce site web personnel simple :

Saviez-vous que plus de 50 % du trafic sur le site Web provient d'appareils mobiles ? Parce que nous avons utilisé Bootstrap, nous avons économisé beaucoup de codage CSS et avons également obtenu un site Web réactif, comme vous pouvez le constater ci-dessous.

Vous pouvez personnaliser ce site autant que vous le souhaitez. Voici la source complète sur GitHub, à votre disposition.

Vous pouvez même attacher un CMS sans tête tel que Ghost en utilisant l'une de nos solutions complètes d'hébergement d'applications. Vous pouvez vous connecter directement à votre référentiel GitHub via votre tableau de bord MyKinsta et avoir votre nouveau site opérationnel en quelques minutes seulement.

Il est temps de pousser vos fichiers. Pour ce faire, exécutez les commandes suivantes sur votre terminal, au niveau supérieur de votre projet.

 git add . git commit -m "Added website source code and image" git push

Maintenant, nous pouvons utiliser ce site Web pour configurer notre page GitHub.

4. Publication d'une page GitHub utilisateur

Dès que vous poussez le fichier index.html vers le référentiel distant nommé d'après votre nom d'utilisateur, GitHub démarre automatiquement un processus de workflow pour configurer votre site en ligne. Cela peut prendre quelques minutes, mais votre site statique sera automatiquement opérationnel.

L'URL de votre site ressemblera à ceci : https://kinstauser.github.io/

Si après 10 minutes votre site n'est pas en ligne, vous pouvez essayer d'apporter une modification factice à votre code (par exemple, en ajoutant un espace) et appuyer à nouveau pour réactiver le processus de construction des pages GitHub.

5. Publication d'une page GitHub de référentiel

Jusqu'à présent, nous avons créé un site utilisateur, mais que se passe-t-il si nous voulons avoir plusieurs sites GitHub publiés ? Ensuite, nous devons aller avec un site de projet.

À titre d'exemple, nous utiliserons le site de technologie HTML que nous avons créé dans le didacticiel de développement Git pour le Web.

Le plus simple est d'aller dans l'onglet Paramètres de notre référentiel, puis dans l'option Pages de la section « Code et automatisation ».

Sélectionnez la source Déployer à partir d'une branche et cliquez sur la branche à partir de laquelle vous souhaitez déployer les fichiers. Il est fortement recommandé de publier à partir de la branche principale , mais de créer des fonctionnalités et de corriger les bogues à l'aide de branches auxiliaires, puis de les fusionner. De cette façon, vous n'introduirez pas si facilement des erreurs dans le site publié.

Une fois que vous avez sélectionné la branche, sélectionnez le dossier à partir duquel vous souhaitez servir les fichiers - généralement la racine ( / ) - et cliquez sur Enregistrer.

Encore une fois, attendez quelques minutes. Votre site devrait être disponible sur "yourusername".github.io/ .

Pour annuler la publication d'un site de référentiel, vous pouvez aller dans Paramètres , puis Pages , et cliquer sur l'option des trois points. Vous verrez une boîte avec le message Annuler la publication du site .

Super! Vous avez le site de votre projet open source opérationnel, mais le nom de domaine lui-même est long et certainement pas facile à retenir. Voyons comment nous pouvons améliorer cela.

6. Configurer un domaine personnalisé

Le moyen le plus simple de configurer un domaine personnalisé pour une page GitHub et de s'assurer qu'il fonctionne est d'aller chez votre fournisseur DNS et de créer quatre enregistrements A pour les adresses IP des pages GitHub :

 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

Vous devez également configurer un enregistrement CNAME avec yourusername.github.io comme cible. Habituellement, les changements DNS sont lents, alors soyez patient, cela peut prendre jusqu'à une journée entière.

Après cela, accédez à la section Domaine personnalisé dans les paramètres de votre référentiel, saisissez votre domaine, cliquez sur le bouton Enregistrer et attendez que GitHub vérifie votre domaine personnalisé.

De plus, si votre DNS le prend en charge, cochez la case Appliquer HTTPS pour ne servir votre site que sur HTTPS.

Bravo! Si vous avez suivi jusqu'à ce point du didacticiel, vous disposez gratuitement d'un site Web statique hébergé dans les pages GitHub.

Meilleures pratiques pour les pages GitHub

Avant de nous séparer, voici quelques bonnes pratiques à prendre en compte lors de la publication d'un site GitHub :

1. Ne faites jamais de commits directs sur la branche à partir de laquelle vous effectuez le déploiement. Créez des modifications dans d'autres branches, puis créez une demande d'extraction.
2. Sélectionnez un bon domaine pour votre site si vous pouvez vous le permettre. C'est l'une des décisions les plus importantes pour votre marque personnelle ou de projet.
3. N'utilisez pas les pages GitHub à des fins commerciales, telles que la création d'un site de commerce électronique.
4. Évaluez vos besoins. C'est formidable de pouvoir publier un site statique gratuitement, mais si vous attendez beaucoup de trafic ou si vous voulez des fonctionnalités complexes, payer pour un excellent service d'hébergement est la solution.

Résumé

Le développement Web devient de plus en plus compliqué chaque jour. Les sites statiques existent depuis l'avènement d'Internet et constituent un excellent moyen de commencer à créer des projets.

Dans ce didacticiel, vous avez appris ce que sont les sites statiques et comment les configurer en ligne à l'aide des pages GitHub. Vous avez créé un site personnel simple à l'aide de Bootstrap et l'avez publié en tant que site utilisateur GitHub. Vous avez également appris à rendre opérationnel le site d'un projet et à le dépublier si nécessaire.

Dans l'ensemble, GitHub Pages est un moyen pratique et puissant d'héberger gratuitement votre site Web statique. Que vous cherchiez à présenter votre portfolio, à partager vos projets open source ou à commencer à créer une présence en ligne, GitHub Pages est un excellent choix. Et une fois que vous obtenez suffisamment de trafic ou que vous êtes prêt à créer un site complet, vous pouvez passer de manière transparente à d'autres services d'hébergement d'applications comme celui de Kinsta sans perdre de temps.