Avec tous les outils et frameworks de développement eb en vogue actuellement, la création d’un site 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 à l’internaute et que vous n’avez pas besoin de fonctionnalités complexes, un site statique pourrait être le bon choix.
Dans ce tutoriel, 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 plateforme Web permettant d’héberger des dépôts Git et de collaborer à des projets logiciels. Elle offre des outils de partage et de suivi des modifications du code, de gestion et de révision du code, ainsi que la possibilité d’ouvrir et de réviser des demandes de retrait.
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. Il s’agit d’un service qui vous permet d’héberger un site web statique directement à partir d’un dépôt GitHub. Cela signifie que vous pouvez utiliser votre dépôt pour stocker le code et les fichiers de votre site web, et GitHub les publiera automatiquement sous la forme d’un site web auquel vous pouvez accéder en ligne.
En résumé, GitHub Pages est un moyen rapide et facile de mettre en place votre site web, et il est particulièrement utile pour présenter votre portfolio, vos projets open-source ou tout autre contenu statique.
Sites web statiques ou dynamiques
Comme nous l’avons vu, GitHub Pages offre 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 parler 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, indépendamment de qui ils sont ou des actions qu’ils effectuent sur le site. Il peut s’agir de choses comme le texte, les images et la mise en page du site web, ainsi que le code et les fichiers sous-jacents qui composent le site. Un site statique est livré à l’utilisateur exactement comme il est stocké.
En revanche, le contenu dynamique est un contenu qui change en fonction des actions de l’utilisateur – comme se connecter, interagir avec un paywall ou commenter un article – ou d’autres facteurs, comme l’heure ou le lieu.
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 montrera une heure différente à chaque utilisateur en fonction de sa localisation (dynamique).
En général, on peut dire qu’un site web est statique s’il ne contient que du HTML, du CSS et du JavaScript sur l’interface publique, 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 GitHub Pages, 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.
Caractéristiques principales de GitHub Pages
Voyons les points forts de GitHub Pages en tant que service d’hébergement :
- Configuration et publication faciles : GitHub Pages permet de démarrer facilement en quelques étapes simples. Vous pouvez activer GitHub Pages pour votre dépôt 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 dépôt.
- Domaines personnalisés : Avec GitHub Pages, 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 des utilisateurs à votre site.
- Prise en charge de HTTPS : Les pages GitHub prennent en charge le protocole HTTPS, qui permet des connexions sécurisées à votre site Web. Ceci est crucial pour renforcer la confiance de votre site.
- 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. Il est ainsi facile de créer des sites web d’aspect professionnel sans avoir à écrire tout le code à partir de zéro.
Limitations
Comme indiqué précédemment, vous ne pouvez créer des sites statiques qu’avec les pages GitHub. Si vous voulez 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 GitHub Pages à des fins commerciales, comme la gestion d’une entreprise en ligne ou le commerce électronique.
GitHub Pages ne permet pas à votre site d’avoir une taille supérieure à 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 ; veillez simplement à 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 pourrez vous en sortir.
Créer et déployer avec les pages GitHub : Guide étape par étape
La création d’une page GitHub est un processus simple et direct pour héberger un site statique. Gardez à l’esprit que si vous avez besoin d’une sorte de connexion à une base de données, vous devez disposer d’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 dépôt distant, la construction d’un site personnel responsive avec HTML, et le déploiement sur le web avec GitHub.
C’est parti !
1. S’inscrire sur GitHub
Pour commencer, 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 deux minutes pour remplir le formulaire.
Après vous être inscrit, vous devriez être en mesure de créer un dépôt distant.
2. Créer un dépôt distant
Un dépôt 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 dépôt » situé dans le panneau gauche du site. Cela vous redirigera vers un formulaire où vous remplirez les informations relatives à votre dépôt.
Ces prochaines étapes sont cruciales :
- Définissez le nom de votre dépôt sur
"yourusername".github.io.Cochez le bouton public. Vous devez définir le référentiel sur Public pour publier votre site. - Ajoutez un README.
Vous ne pouvez avoir un dépôt 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 configurer un site à partir d’un dépôt.
À moins que vous ne disposiez de 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 ce qui suit :
Si vous disposez déjà du code source de votre site, vous pouvez ignorer le flux de travail habituel de Git et déposer les fichiers directement dans le dépôt.
Pour cela, cliquez sur le menu Add file dans votre dépôt, et sélectionnez l’option Téléverser des fichiers. Sélectionnez ensuite les fichiers de votre site web, avec le fichier HTML principal nommé index.html. N’oubliez pas de placer également tous vos fichiers CSS et JavaScript dans le dépôt.
Enfin, cliquez sur le bouton Valider les modifications.
Dans la section suivante, nous allons créer un site web personnel simple avec HTML et Bootstrap. Nous le téléchargerons ensuite sur GitHub et le configurerons comme une page publique GitHub avec un domaine personnalisé.
3. Construire un site personnel
Nous allons commencer par cloner le repo GitHub que nous venons de créer. Pour cela, assurez-vous que le client Git est déjà installé sur votre ordinateur. (Si ce n’est pas le cas, jetez un coup d’œil à notre tutoriel sur Git et GitHub).
Allez dans l’onglet code de votre dépôt 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 chercher le terminal dans le menu d’applications de votre système. Sur Windows, vous pouvez utiliser le BASH Git 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. Ceci va télécharger et créer une copie du dépôt distant sur votre machine locale afin que vous puissiez construire votre site web.
Entrez ensuite dans 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 dépôt, créez un fichier nommé index.html (ce nom est requis par les pages GitHub) et saisissez la structure typique du code HTML :
<!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 responsives. 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 à l’intérieur du HTML <head> pour pouvoir utiliser le CSS Bootstrap :
<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 sans problème les icônes SVG des langages de programmation et des technologies populaires :
<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>:
<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 par créer un en-tête pour notre site web. Il s’agira d’un en-tête sombre, avec des liens vers notre page d’index et deux autres pages – « Projects » et « Readind Logs » – 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" id="navbarTogglerDemo02">
<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 les wrappers Bootstrap navbar et navbar-expand-lg pour créer un conteneur responsive qui se rétracte lorsque la largeur d’affichage est inférieure à 992px. Cela se produit à cause de l’option de grille lg. Si vous voulez en savoir plus sur les options de grille, jetez un coup d’œil à la page de mise en page de Bootstrap.
Maintenant, créons deux colonnes réactives à l’intérieur d’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="" srcset="">
</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 nous approvisionnons en image à partir d’un fichier local, elle doit donc se trouver dans le dépôt lorsque nous poussons nos modifications vers le dépôt 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 :
<div class="my-4">
<div class="text-center mb-4">
<h1>My Skills</h1>
</div>
<div class="row ">
<style>
I {
font-size: 4em;
}
</style>
<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 définissons la taille de nos logos à 4 em en la déclarant dans la balise style.
Voici le résultat final de ce simple site web personnel :
Saviez-vous que plus de 50 % du trafic sur les sites 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 responsive, comme vous pouvez l’apprécier 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 joindre un CMS headless tête tel que Ghost en utilisant l’une de nos solutions d’hébergement d’applications. Vous pouvez vous connecter directement à votre dépôt GitHub via votre tableau de bord MyKinsta et avoir votre nouveau site opérationnel en quelques minutes.
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 pushMaintenant, nous pouvons utiliser ce site pour configurer notre page GitHub.
4. Publier une page GitHub d’utilisateur
Dès que vous aurez poussé l’index.html vers le dépôt distant portant le nom de votre nom d’utilisateur, GitHub lancera automatiquement un processus de flux de travail pour mettre votre site en ligne. Cela peut prendre quelques minutes, mais votre site statique sera automatiquement mis en ligne.
L’URL de votre site sera quelque chose comme ce qui suit : 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, ajouter un espace) et pousser à nouveau pour réactiver le processus de construction des pages GitHub.
5. Publier une page GitHub de dépôt
Jusqu’à présent, nous avons créé un site utilisateur, mais que faire si nous voulons avoir plusieurs sites GitHub publiés ? Nous devons alors opter pour un site de projet.
À titre d’exemple, nous allons utiliser le site technologique HTML que nous avons créé dans le tutoriel Git pour le développement web.
Le plus simple est d’aller dans l’onglet Réglages de notre dépôt, puis dans l’option Pages à l’intérieur de la section « Code et automatisation ».
Sélectionnez la source Déployer depuis une branche, et cliquez sur la branche à partir de laquelle vous souhaitez déployer les fichiers. Il est largement recommandé de publier à partir de la branche principale, mais de créer des fonctionnalités et de corriger des bogues en utilisant des 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 choisi la branche, sélectionnez le dossier à partir duquel vous voulez servir les fichiers – généralement la racine (/) – et cliquez sur enregistrer.
Encore une fois, attendez quelques minutes. Votre site devrait être disponible à l’adresse "yourusername".github.io/.
Pour dépublier un site de dépôt, vous pouvez aller dans Réglages, puis Pages, et cliquer sur l’option des trois points. Vous verrez une boite avec le message Dépublier le site.
Génial ! Vous avez le site de votre projet open source en marche, mais le nom de domaine lui-même est long et certainement pas facile à retenir. Voyons comment nous pouvons améliorer cela.
6. Configuration d’un domaine personnalisé
La façon la plus simple de configurer un domaine personnalisé pour une page GitHub et de s’assurer qu’il fonctionne est de se rendre 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.153Vous devez également configurer un enregistrement CNAME avec yourusername.github.io comme cible. Habituellement, les changements de DNS sont lents, alors soyez patient, cela peut prendre jusqu’à une journée entière.
Après avoir fait cela, allez dans la section Domaine personnalisé dans les paramètres de votre repo, tapez votre domaine, cliquez sur le bouton Enregistrer, et attendez que GitHub vérifie votre domaine personnalisé.
En outre, si votre DNS le prend en charge, cochez la case Forcer HTTPS pour ne servir votre site qu’en HTTPS.
Félicitations ! Si vous avez suivi jusqu’à ce point du tutoriel, vous avez un site web statique hébergé gratuitement dans GitHub Pages.
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 :
- Ne faites jamais de commits directs sur la branche à partir de laquelle vous déployez. Créez des changements dans d’autres branches, puis créez une demande de pull.
- Choisissez 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 celle de votre projet.
- N’utilisez pas les pages GitHub à des fins commerciales, par exemple pour créer un site de commerce électronique.
- Évaluez vos besoins. C’est formidable de pouvoir publier un site statique gratuitement, mais si vous prévoyez un trafic important ou si vous voulez des fonctionnalités complexes, il est préférable de payer pour un service d’hébergement de qualité.
Résumé
Le développement web devient de plus en plus compliqué chaque jour. Les sites statiques sont là depuis l’avènement de l’Internet, et ils constituent un excellent moyen de commencer à créer des projets.
Dans ce tutoriel, vous avez appris ce que sont les sites statiques et comment les mettre en ligne à l’aide de GitHub Pages. Vous avez créé un site personnel simple à l’aide de Bootstrap et l’avez publié comme votre site d’utilisateur GitHub. Vous avez également appris comment mettre en ligne le site d’un projet et comment 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 lorsque vous aurez suffisamment de trafic ou que vous serez prêt à créer un site complet, vous pourrez passer sans problème à d’autres services d’hébergement d’applications comme celui de Kinsta.
Laisser un commentaire