{"id":66750,"date":"2023-02-27T14:02:00","date_gmt":"2023-02-27T13:02:00","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=66750&preview=true&preview_id=66750"},"modified":"2024-09-20T09:55:49","modified_gmt":"2024-09-20T08:55:49","slug":"pages-github","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/pages-github\/","title":{"rendered":"\u00c0 vos marques, pr\u00eats, partez : Cr\u00e9ation d’un site statique avec GitHub Pages"},"content":{"rendered":"

Avec tous les outils et frameworks de d\u00e9veloppement eb en vogue actuellement, la cr\u00e9ation d’un site devient de plus en plus compliqu\u00e9e. Mais parfois, vous n’avez pas besoin de beaucoup d’interactivit\u00e9 sur votre site. Si vous vous concentrez sur la transmission des informations \u00e0 l’internaute et que vous n’avez pas besoin de fonctionnalit\u00e9s complexes, un site statique pourrait \u00eatre le bon choix.<\/p>\n\n

Dans ce tutoriel, vous apprendrez ce qu’est un site statique, y compris ses avantages, ses limites, et comment cr\u00e9er et d\u00e9ployer un site web personnel simple cr\u00e9\u00e9 avec HTML et Bootstrap gratuitement \u00e0 l’aide de GitHub Pages.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Que sont les pages GitHub ?<\/h2>\n

GitHub<\/a> est une plateforme Web permettant d’h\u00e9berger des d\u00e9p\u00f4ts Git et de collaborer \u00e0 des projets logiciels. Elle offre des outils de partage et de suivi des modifications du code, de gestion et de r\u00e9vision du code, ainsi que la possibilit\u00e9 d’ouvrir et de r\u00e9viser des demandes de retrait.<\/p>\n

Ne confondez pas Git et GitHub<\/a>! GitHub est un service d’h\u00e9bergement qui permet la collaboration entre d\u00e9veloppeurs, tandis que Git est le logiciel de contr\u00f4le de version local que vous utilisez pour enregistrer des instantan\u00e9s de l’\u00e9tat de votre projet logiciel.<\/p>\n

GitHub Pages<\/a> est l’une des meilleures fonctionnalit\u00e9s de GitHub. Il s’agit d’un service qui vous permet d’h\u00e9berger un site web statique <\/a>directement \u00e0 partir d’un d\u00e9p\u00f4t GitHub. Cela signifie que vous pouvez utiliser votre d\u00e9p\u00f4t 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\u00e9der en ligne.<\/p>\n

En r\u00e9sum\u00e9, GitHub Pages est un moyen rapide et facile de mettre en place votre site web, et il est particuli\u00e8rement utile pour pr\u00e9senter votre portfolio<\/a>, vos projets open-source ou tout autre contenu statique.<\/p>\n

Sites web statiques ou dynamiques<\/h3>\n

Comme nous l’avons vu, GitHub Pages offre un moyen de d\u00e9ployer des sites web statiques<\/a>. Mais quelle est la diff\u00e9rence entre un site web statique et un site web dynamique ?<\/p>\n

Commen\u00e7ons par parler du contenu de ces sites.<\/p>\n

Le contenu statique fait r\u00e9f\u00e9rence aux \u00e9l\u00e9ments du site web qui restent les m\u00eames pour tous les utilisateurs, ind\u00e9pendamment 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\u00e9 \u00e0 l’utilisateur exactement comme il est stock\u00e9.<\/p>\n

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.<\/p>\n

Par exemple, un site web qui affiche une image fixe d’un produit montrera toujours la m\u00eame image \u00e0 chaque utilisateur (statique). D’autre part, un site web qui affiche l’heure actuelle montrera une heure diff\u00e9rente \u00e0 chaque utilisateur en fonction de sa localisation (dynamique).<\/p>\n

En g\u00e9n\u00e9ral, on peut dire qu’un site web est statique s’il ne contient que du HTML, du CSS et du JavaScript<\/a> sur l’interface publique<\/a>, sans technologies de serveur comme PHP ou Python<\/a> qui interagissent avec une base de donn\u00e9es.<\/p>\n

\"Twitter
Twitter est un site dynamique.<\/figcaption><\/figure>\n

Bien qu’il ne soit pas possible de cr\u00e9er des sites Web dynamiques \u00e0 l’aide de GitHub Pages, vous pouvez facilement cr\u00e9er le v\u00f4tre \u00e0 l’aide d’un CMS<\/a> tel que WordPress<\/a>, ou de g\u00e9n\u00e9rateurs de sites statiques tels que Gatsby<\/a> ou Hugo<\/a>.<\/p>\n

Caract\u00e9ristiques principales de GitHub Pages<\/h3>\n

Voyons les points forts de GitHub Pages en tant que service d’h\u00e9bergement :<\/p>\n

    \n
  1. Configuration et publication faciles :<\/strong> GitHub Pages permet de d\u00e9marrer facilement en quelques \u00e9tapes simples. Vous pouvez activer GitHub Pages pour votre d\u00e9p\u00f4t et sp\u00e9cifier la source des fichiers de votre site web, et GitHub publiera automatiquement votre site web et le rendra disponible \u00e0 une URL bas\u00e9e sur votre nom d’utilisateur et le nom du d\u00e9p\u00f4t.<\/li>\n
  2. Domaines personnalis\u00e9s :<\/strong> Avec GitHub Pages, vous pouvez utiliser un nom de domaine personnalis\u00e9 pour votre site Web au lieu de l’URL par d\u00e9faut fournie par GitHub. Cela vous permet d’utiliser votre propre image de marque et de faciliter la recherche et l’acc\u00e8s des utilisateurs \u00e0 votre site.<\/li>\n
  3. Prise en charge de HTTPS :<\/strong> Les pages GitHub prennent en charge le protocole HTTPS, qui permet des connexions s\u00e9curis\u00e9es \u00e0 votre site Web. Ceci est crucial pour renforcer la confiance de votre site.<\/li>\n
  4. Prise en charge de Jekyll :<\/strong> GitHub Pages prend en charge Jekyll, un g\u00e9n\u00e9rateur de sites statiques qui vous permet de cr\u00e9er des sites web sophistiqu\u00e9s \u00e0 l’aide de mod\u00e8les et d’autres fonctionnalit\u00e9s. Il est ainsi facile de cr\u00e9er des sites web d’aspect professionnel sans avoir \u00e0 \u00e9crire tout le code \u00e0 partir de z\u00e9ro.<\/li>\n<\/ol>\n

    Limitations<\/h3>\n

    Comme indiqu\u00e9 pr\u00e9c\u00e9demment, vous ne pouvez cr\u00e9er des sites statiques qu’avec les pages GitHub. Si vous voulez construire un projet complexe avec de nombreuses fonctionnalit\u00e9s, vous aurez besoin d’autres services d’h\u00e9bergement<\/a>. Vous devez \u00e9galement garder \u00e0 l’esprit que vous ne pouvez pas utiliser GitHub Pages \u00e0 des fins commerciales, comme la gestion d’une entreprise en ligne ou le commerce \u00e9lectronique<\/a>.<\/p>\n

    GitHub Pages ne permet pas \u00e0 votre site d’avoir une taille sup\u00e9rieure \u00e0 1 Go, ce qui signifie que les fichiers de votre r\u00e9f\u00e9rentiel ne peuvent pas d\u00e9passer cette quantit\u00e9 de m\u00e9moire. La plupart du temps, 1 Go est plus que suffisant pour un site statique ; veillez simplement \u00e0 compresser vos images<\/a>.<\/p>\n

    Il a \u00e9galement une limite de bande passante souple de 100 Go par mois. Cette quantit\u00e9 de bande passante serait suffisante pour distribuer votre site web \u00e0 quelques milliers de personnes par mois, donc, \u00e0 moins que vous n’ayez un public \u00e9norme, vous pourrez vous en sortir.<\/p>\n

    Cr\u00e9er et d\u00e9ployer avec les pages GitHub : Guide \u00e9tape par \u00e9tape<\/h2>\n

    La cr\u00e9ation d’une page GitHub est un processus simple et direct pour h\u00e9berger un site statique. Gardez \u00e0 l’esprit que si vous avez besoin d’une sorte de connexion \u00e0 une base de donn\u00e9es, vous devez disposer d’un fournisseur de base de donn\u00e9es<\/a> externe.<\/p>\n

    Dans le guide suivant, vous apprendrez \u00e0 cr\u00e9er une page GitHub \u00e0 partir de z\u00e9ro. Cela inclut la cr\u00e9ation d’un d\u00e9p\u00f4t distant, la construction d’un site personnel responsive avec HTML<\/a>, et le d\u00e9ploiement sur le web avec GitHub.<\/p>\n

    C’est parti !<\/p>\n

    1. S’inscrire sur GitHub<\/h3>\n

    Pour commencer, vous devez avoir un compte GitHub actif. Si vous n’en avez pas, rendez-vous sur leur page d’inscription<\/a>. Cela ne devrait pas prendre plus de deux minutes pour remplir le formulaire.<\/p>\n

    \"Page
    Page d’inscription de GitHub.<\/figcaption><\/figure>\n

    Apr\u00e8s vous \u00eatre inscrit, vous devriez \u00eatre en mesure de cr\u00e9er un d\u00e9p\u00f4t distant.<\/p>\n

    2. Cr\u00e9er un d\u00e9p\u00f4t distant<\/h3>\n

    Un d\u00e9p\u00f4t est un r\u00e9pertoire dans lequel vous stockez tout le code li\u00e9 \u00e0 un projet particulier.<\/p>\n

    Depuis la page d’accueil de GitHub, cliquez sur le bouton \u00ab Nouveau \u00bb ou \u00ab Cr\u00e9er un d\u00e9p\u00f4t \u00bb situ\u00e9 dans le panneau gauche du site. Cela vous redirigera vers un formulaire o\u00f9 vous remplirez les informations relatives \u00e0 votre d\u00e9p\u00f4t.<\/p>\n

    \"Cr\u00e9er
    Cr\u00e9er un d\u00e9p\u00f4t GitHub.<\/figcaption><\/figure>\n

    Ces prochaines \u00e9tapes sont cruciales :<\/p>\n

      \n
    1. D\u00e9finissez le nom de votre d\u00e9p\u00f4t sur \"yourusername\".github.io<\/code>.Cochez le bouton public. Vous devez d\u00e9finir le r\u00e9f\u00e9rentiel sur Public<\/strong> pour publier votre site.<\/li>\n
    2. Ajoutez un README.<\/li>\n<\/ol>\n

      Vous ne pouvez avoir un d\u00e9p\u00f4t que pour un compte personnel ou une organisation donn\u00e9e. C’est pourquoi le nom du r\u00e9f\u00e9rentiel est votre nom d’utilisateur et le domaine github.io<\/code>. Plus tard, nous verrons comment configurer un site \u00e0 partir d’un d\u00e9p\u00f4t.<\/p>\n

      \u00c0 moins que vous ne disposiez de GitHub Pro, vous ne pouvez publier une page GitHub que si le r\u00e9f\u00e9rentiel est public. Gardez cela \u00e0 l’esprit si vous ne souhaitez pas partager publiquement le code source de votre site.<\/p>\n

      Apr\u00e8s cela, vous devriez avoir quelque chose comme ce qui suit :<\/p>\n

      \"Forme
      Forme du d\u00e9p\u00f4t GitHub.<\/figcaption><\/figure>\n

      Si vous disposez d\u00e9j\u00e0 du code source de votre site, vous pouvez ignorer le flux de travail habituel de Git<\/a> et d\u00e9poser les fichiers directement dans le d\u00e9p\u00f4t.<\/p>\n

      Pour cela, cliquez sur le menu Add file<\/code> dans votre d\u00e9p\u00f4t, et s\u00e9lectionnez l’option T\u00e9l\u00e9verser des fichiers<\/strong>. S\u00e9lectionnez ensuite les fichiers de votre site web, avec le fichier HTML principal nomm\u00e9 index.html<\/code>. N’oubliez pas de placer \u00e9galement tous vos fichiers CSS et JavaScript dans le d\u00e9p\u00f4t.<\/p>\n

      Enfin, cliquez sur le bouton Valider les modifications<\/strong>.<\/p>\n

      \"T\u00e9l\u00e9verser
      T\u00e9l\u00e9verser les fichiers sur GitHub.<\/figcaption><\/figure>\n

      Dans la section suivante, nous allons cr\u00e9er un site web personnel simple avec HTML et Bootstrap. Nous le t\u00e9l\u00e9chargerons ensuite sur GitHub et le configurerons comme une page publique GitHub avec un domaine personnalis\u00e9.<\/p>\n

      3. Construire un site personnel<\/h3>\n

      Nous allons commencer par cloner le repo GitHub que nous venons de cr\u00e9er. Pour cela, assurez-vous que le client Git<\/a> est d\u00e9j\u00e0 install\u00e9 sur votre ordinateur. (Si ce n’est pas le cas, jetez un coup d’\u0153il \u00e0 notre tutoriel sur Git et GitHub<\/a>).<\/p>\n