Comment configurer un site Web simple et gratuit avec des pages Github

0
92

Les sites Web sont de plus en plus faciles à héberger chaque jour, avec de nombreux services proposant des forfaits à partir de moins de 5 $ par mois. Mais, si vous voulez juste un site simple qui ne va pas voir une tonne de trafic, vous pourrez peut-être héberger gratuitement sur Github, même avec votre propre domaine.

Qu'est-ce que les pages Github ?

Github est un service d'hébergement de code qui fournit un contrôle de version via git. Bien qu'il soit couramment utilisé par les programmeurs, un cas d'utilisation courant pour eux consiste à exécuter de simples wikis, CV ou sites de documentation qui ne voient pas des tonnes de trafic quotidien et ont juste besoin d'un endroit pour mettre en place un site Web pour gratuit.

Pour cela, Github Pages a été créé, et il vous permet d'héberger gratuitement des fichiers HTML et d'autres actifs. Ce n'est pas très différent de l'hébergement de fichiers normal de Github, vous pouvez héberger des fichiers dans vos référentiels entièrement gratuitement, et héberger un site statique, c'est comme héberger des fichiers.

Vous peut avoir des pages pour votre nom d'utilisateur, ou des pages pour chaque référentiel. Par défaut, Github vous attribuera une URL de sous-domaine comme username.github.io ou username.github.io/repository. Cela peut être remplacé par n'importe quelle URL personnalisée.

Que sont les sites Web statiques ?

La chose importante à noter est que les pages Github sont uniquement destinées aux sites Web statiques. Cela ne signifie pas nécessairement que votre site Web ne peut pas être interactif, cela signifie simplement que votre site Web est hébergé directement à partir des fichiers HTML, JS et CSS.

Publicité

La principale restriction avec les sites Web statiques est qu'ils ne peuvent pas compter sur un serveur pour modifier le contenu de chaque requête, comme avec un langage comme PHP. Par exemple, si vous souhaitez que les utilisateurs se connectent et consultent un profil, ou hébergez WordPress (qui se connecte à un serveur de base de données), vous devrez héberger ailleurs.

Cependant, si vous servir des frameworks JavaScript côté client comme React, vous pouvez en fait héberger des applications Web entières à partir de pages Github ou de tout autre fournisseur d'hébergement de site Web statique. En effet, tout le contenu est généré sur l'appareil du client et la seule chose que vous diffusez est un fichier bundle.js contenant tout le code.

Restrictions des pages Github – Utilisation non commerciale

Bien sûr, cela vient avec quelques restrictions. Essentiellement, vous n'êtes pas censé utiliser les pages Github à des fins principalement commerciales. Plus précisément, ils disent qu'il est interdit d'être utilisé comme un “service d'hébergement Web gratuit pour gérer votre entreprise en ligne, votre site de commerce électronique ou tout autre site Web destiné principalement à faciliter les transactions commerciales”. 8221;.

Donc, si vous envisagez d'exploiter votre entreprise à partir des pages Github, vous voudrez probablement envisager d'autres alternatives. Deux “hébergements gratuits” très similaires Les méthodes utilisent des compartiments AWS Simple Storage Service pour héberger des sites Web statiques ou utilisent l'hébergement statique Firebase de Google. Les deux fonctionnent bien pour les déploiements de sites statiques amateurs et professionnels, et ont des niveaux gratuits qui peuvent vous éviter de payer 10 $ par mois pour héberger votre propre serveur.

CONNEXE :  Comment héberger un site Web statique sur Amazon S3

CONNEXE : Comment héberger gratuitement un site Web statique sur la plate-forme d'hébergement Firebase de Google

Les pages Github ont également des limites de taille et des limites de bande passante souples, bien qu'elles soient assez raisonnables. Votre site ne peut pas dépasser 1 Go (vous aurez probablement de toute façon un problème pour servir un site de cette taille) et si vous dépassez 100 Go de bande passante par mois, Github peut ne pas servir votre site. Pour référence, cette quantité de données vous coûterait environ 10 $ par mois sur AWS.

Configuration d'une page

Github Pages est assez simple à configurer, et si vous connaissez Github, cela devrait être encore plus facile.

Publicité

Fondamentalement, vous avez deux options pour les référentiels et les pages utilisateur ou les pages de projet. Si vous utilisez un domaine personnalisé, cela ne devrait pas avoir beaucoup d'importance, mais si vous voulez une belle URL, vous voudrez utiliser une page utilisateur, qui vous donnera une URL au format nom d'utilisateur.github.io. Si vous utilisez une page de projet, vous pouvez configurer plusieurs pages, mais chacune se trouvera sur username.github.io/repository.

Dans les deux cas, vous devrez créer un nouveau référentiel . Si vous créez une page utilisateur, définissez-la sur votre nom d'utilisateur plus .github.io. Assurez-vous qu'il est également public.

viceversagames.github.io

Après cela, vous aurez besoin d'un client Git pour vous connecter à Github et pousser votre site Web. Vous pouvez utiliser un terminal ou un client graphique comme Github Desktop. Utilisez l'URL qui vous a été donnée lors de la configuration rapide :

Ou, si vous &#8217 ; Lorsque vous utilisez l'application Github Desktop, vous pouvez simplement la rechercher par son nom :

Ensuite, vous devrez ajouter votre contenu. Si vous avez un modèle existant que vous souhaitez utiliser, copiez tous les éléments (HTML, CSS, fichiers JS, images) dans ce répertoire, qui est essentiellement le “webroot” d'où tout sera hébergé. La chose la plus importante est index.html, qui est la page principale de votre site.

Une fois que tout fonctionne localement, vous devrez valider les modifications et les publier sur Github.

Publicité

Vous verrez bientôt les nouveaux fichiers dans votre référentiel, mais vous devrez activer les pages Github pour que cela fonctionne pleinement. Sur la page du référentiel, cliquez sur “Paramètres” et faites défiler jusqu'à “Pages.” Sélectionnez la branche principale à partir de laquelle vous souhaitez diffuser votre site Web, puis cliquez sur “Enregistrer”.

Cela peut prendre quelques minutes pour que tout soit mis à jour, et il ne sera mis à jour que 10 fois par heure, alors n'apportez pas de modifications trop rapidement.

Vous voudrez également activer “Appliquer HTTPS” dans les paramètres des pages Github.

Ajouter un domaine personnalisé

Ajouter un domaine personnalisé est très simple. Vous devez d'abord en acheter un, ce que vous pouvez faire auprès de nombreux bureaux d'enregistrement différents. Quelques bons exemples sont Google Domains, Namecheap ou GoDaddy.

CONNEXE : Comment configurer un nouveau domaine avec Google Domains

Une fois inscrit, vous devrez faire pointer votre domaine vers votre page Github. Cependant, vous ne pouvez pas simplement coller l'URL ici ; vous devrez créer un enregistrement CNAME qui pointe vers username.github.io. Si vous envisagez d'utiliser www, définissez la valeur de l'hôte sur www. Si vous souhaitez utiliser le domaine de base seul, définissez la valeur Host sur @.

Après avoir attendu quelques minutes pour que les enregistrements DNS se synchronisent sur Internet, vous devriez pouvoir voir votre site Github Pages nouvellement créé à votre URL personnalisée, et le menu des paramètres devrait l'afficher comme connecté.