Un guide illustré pour configurer votre site Web à l'aide de GitHub et Cloudflare

Vous devriez lire ceci si…

  1. Vous souhaitez installer gratuitement des redirections personnalisées ou d'autres configurations de serveur
  2. Vous souhaitez obtenir votre site sur HTTPS mais vous ne savez pas par où commencer
  3. Vous êtes submergé par la quantité de choix disponibles (comme Netlify, Surge, BitBalloon, Now)

Pourquoi Github?

  1. Facile à configurer et à démarrer avec Github Pages
  2. Déploie instantanément en poussant un nouveau code

Pourquoi Cloudflare?

  1. C'est gratuit
  2. Il est livré avec une prise en charge prête à l'emploi pour SSL (HTTPS). (Voici pourquoi HTTPS est important.)
  3. Gestion DNS super simple
  4. Possibilité de définir l'expiration du cache du navigateur pour les actifs
  5. Réduisez automatiquement vos actifs statiques
  6. Règles de page personnalisées pour la configuration des redirections, toujours HTTPS, etc.
  7. HTTP2 / SPDY pour les navigateurs pris en charge
  8. Permet de configurer HSTS (HTTP Strict Transport Security)

Avant de commencer, vous aurez besoin de quelques éléments:

  1. Un compte Github
  2. Un compte Cloudflare
  3. Accès à un domaine personnalisé. Vous pouvez l'acheter à partir de n'importe quel registraire de noms de domaine comme: Namecheap, GoDaddy, BigRock, etc.

Si tout cela a éveillé votre intérêt, alors commençons!

Étape 1: Créez un dépôt Github avec votre code

Sélectionnez l'option Site de projet pour commencer
  • Accédez à https://pages.github.com
  • Sélectionnez l'option Site de projet pour trouver les instructions sur la façon de créer une page de base à partir de zéro ou un thème personnalisé

Étape 2. Configurer les pages Github pour le référentiel

Accédez aux paramètres de votre référentielChoisissez de servir votre site Web à partir de la branche principale

Accédez aux paramètres de votre référentiel. Dans la section Pages Github, choisissez la branche principale à partir de laquelle votre site Web sera diffusé. Une fois que vous avez fait cela, vous pouvez aller sur https: // .github.io / repository pour voir votre site Web en action comme indiqué ci-dessous.

Étape 3. Ajouter un domaine personnalisé

Ajoutez un domaine personnalisé pour votre site Web

Ajoutez le domaine personnalisé que vous avez acheté et enregistrez-le. Votre site Web est maintenant prêt avec votre propre domaine personnalisé WOOT!

Nous avons donc tout configuré sur Github. Nous commencerons par configurer Cloudflare pour dynamiser votre site Web avec toutes les fonctionnalités puissantes que j'ai mentionnées au début de cet article.

Étape 4: configurez votre domaine sur Cloudflare

Connectez-vous à Cloudflare. Si vous l'utilisez pour la première fois, vous devriez voir un écran comme l'image ci-dessus. Si vous l'avez déjà utilisé, vous pouvez cliquer sur l'option Ajouter un site dans la barre de navigation en haut à droite pour ajouter un nouveau domaine. Entrez le domaine que vous souhaitez gérer et cliquez sur Commencer l'analyse.

Étape 5: Configurer les enregistrements DNS pour votre domaine

Gauche: Configurer les enregistrements DNS pour le domaine apex. Il est désigné par @. À droite: liste finale des enregistrements DNS

Dans cette étape, nous informons Cloudflare de pointer notre domaine vers le serveur Github Pages en utilisant deux entrées DNS A Record: 1. 192.30.252.153 2. 192.30.252.154

Une fois que vous avez configuré cela, toutes les demandes vers votre domaine personnalisé, c'est-à-dire votredomaine.com seront acheminées vers votre site Web sur Github à l'étape 3.

Il nous reste une étape à franchir avant de passer à l'étape suivante. Souvent, vous souhaiterez utiliser un sous-domaine comme www pour votre site Web, c'est-à-dire www.yourcustomdomain.com Pour cela, vous devrez ajouter une entrée DNS d'enregistrement CNAME qui pointera votre sous-domaine (www) vers votre domaine de pointe (@).

Une fois que vous avez configuré cela, toutes les demandes vers votre sous-domaine personnalisé, à savoir www.votredomaine.com, seront acheminées vers votre site Web sur Github à l'étape 3.

REMARQUE: n'essayez pas d'accéder immédiatement à votre domaine personnalisé. Ça ne marchera pas. Nous n'avons fait que la configuration de Cloudflare vers Github. Nous devons encore faire le DNS Registrar -> Cloudflare setup. Cela apparaîtra à l'étape 7.

Cliquez sur Continuer pour passer à l'étape suivante.

Étape 6: Choisissez le plan Cloudflare gratuit

Le plan gratuit pour Cloudflare fournit de nombreuses options sophistiquées, comme indiqué dans la rubrique Pourquoi Cloudflare? section au début.

Cliquez sur Continuer pour passer à l'étape suivante.

Étape 7: Mettre à jour les serveurs de noms sur votre registraire DNS

Copiez ces deux serveurs de noms en surbrillance dans les paramètres du serveur de noms de votre registraire DNS

Une fois que vous êtes sur cette page, gardez-le ouvert dans un onglet et ouvrez le site de votre registraire DNS (l'endroit d'où vous avez acheté votre domaine) dans un autre. Si vous utilisez l'un des bureaux d'enregistrement suivants, les liens pour comprendre comment changer le serveur de noms sont:

  1. Gros rocher
  2. Namecheap
  3. Allez papa

Vous devez remplacer les serveurs de noms existants dans vos paramètres de domaine par ceux de la page Cloudflare qui est ouverte dans l'autre onglet.

Un exemple de ce à quoi cela ressemblerait après avoir mis à jour les paramètres de votre serveur de noms dans votre bureau d'enregistrement DNS

YASSS! Vous avez correctement configuré votre domaine personnalisé pour utiliser Cloudflare en tant que fournisseur DNS. Vous pouvez accéder à l'option Présentation en haut et vous constaterez qu'il attend toujours le traitement de la modification de votre serveur de noms.

Gauche: le changement de serveur de noms est toujours en cours de traitement. À droite: le changement de serveur de noms est traité !!

Une fois que l'onglet Présentation indique Statut: Actif, vous pouvez maintenant essayer de visiter votre site en utilisant votre domaine personnalisé, ET IL DEVRAIT JUSTE TRAVAILLER!

Étape 8: configurer la minification

Dans les paramètres de vitesse, dans la section Réduction automatique, choisissez l'option pour tout réduire automatiquement: Javascript, CSS, HTML. Cela sera fait par Cloudflare à la volée une fois, puis mis en cache. Chaque fois que l'un de vos actifs change, Cloudflare le fera à nouveau pour vous.

L'avantage de la minification est que la taille du fichier livré à votre navigateur est bien moindre car elle supprime les espaces et commentaires indésirables.

Étape 9: Configurer l'expiration du cache du navigateur

Expiration du cache définie sur 1 mois

Si vous faites défiler vers le bas sur la même page que la réduction automatique, vous trouverez la section Expiration du cache du navigateur. Il devrait être réglé sur 30 jours / 1 mois, idéalement, pour que WebpageTest ne vous donne pas d'avertissement. Ce que cette heure indique, c'est que, une fois que votre site est chargé dans un navigateur, le navigateur ne demandera aucun actif pour la deuxième fois jusqu'à l'expiration de la période de cache du navigateur pour ces actifs.

Exemple: l'image iphone.png se charge à partir de votre serveur pour la première fois (22,3 Ko en 349 ms) Toutes les demandes ultérieures pour récupérer cette ressource sont servies à partir du cache disque, ce qui signifie qu'elle est presque instantanément disponible (en 5 ms)

Avant de passer à l'étape suivante, veuillez vérifier les paramètres Crypto sur Cloudflare. Il devrait indiquer Active Certificate dans la section SSL. (Remarque: essayez de recharger la page. Parfois, elle ne se met pas à jour). Au cours des deux prochaines étapes, nous allons toujours faire en sorte que votre site soit diffusé via HTTPS. Pour que cela fonctionne sans problème, il est important que vous ayez un certificat actif sur Cloudflare.

La section SSL affiche l'autorisation du certificat une fois que les modifications de votre serveur de noms ont été traitées. Une fois qu'un certificat SSL a été émis pour vous, ce message devient Active Certificate.

Étape 10: configurer les règles de page

Dans cette étape, nous allons faire deux choses:

  1. Redirigez toutes les demandes pour www.votredomaine.com vers votredomaine.com
  2. Redirigez toutes les demandes de http://yourcustomdomain.com vers https://yourcustomdomain.com

Accédez au paramètre Règles de page et cliquez sur Créer une règle de page.

Pour gérer le www.votredomaine.com vers votre redirection vers votre domaine.com, remplacez tweetify.io par votre nom de domaine.com. Cliquez sur Enregistrer et déployer.

Pour gérer la redirection http://votredomaine.com vers https://votredomaine.com, remplacez tweetify.io par votre nom de domaine.com. Cliquez sur Enregistrer et déployer.

Étape 11: Configurer HSTS

Accédez aux paramètres Crypto et faites défiler jusqu'à la section HTTP Strict Transport Security (HSTS). Cliquez sur Activer HSTS. Cela vous demandera de reconnaître que vous savez ce que vous faites. Avant de sélectionner Je comprends, laissez-moi vous expliquer pourquoi nous devons activer ce paramètre:

Si un utilisateur a ouvert votre site Web dans le passé, chaque fois que l'utilisateur essaie d'accéder à votre site Web, il sera toujours redirigé vers la version HTTPS de votre site. Cela rend votre site un peu plus rapide lors des visites suivantes car la redirection HTTP vers HTTPS se produit sur le client et non via la règle de page Cloudflare que nous avons ajoutée à l'étape 10.

Une fois que vous passez à l'étape suivante, vous devez activer tous les paramètres comme indiqué ci-dessous. Vous pouvez lire plus de détails sur ces options ici et ici

Capture d'écran des paramètres HSTS dans CloudflareEn-têtes ajoutés par Cloudflare aux demandes de votre domaine après avoir configuré HSTS comme indiqué ci-dessus

C'est ça. Vous êtes prêt à montrer votre site Web au monde! Si vous avez trouvé cela utile, veuillez le partager et le partager.

Karan Thakkar est le Lead Frontend chez Crowdfire - Votre partenaire marketing super intelligent. Son article a déjà été présenté dans le Huffington Post. Il aime essayer de nouvelles technologies pendant son temps libre et a construit Tweetify (en utilisant React Native) et Show My PR's (en utilisant Golang).

Autres articles écrits par lui: