Un guide illustré pour la configuration de votre site Web à l'aide de Github et Cloudflare

Vous devriez lire ceci si…

  1. Vous souhaitez configurer des redirections personnalisées ou une autre configuration de serveur gratuitement
  2. Vous souhaitez obtenir votre site sur HTTPS mais 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 les pages Github
  2. Déploiement instantané en poussant un nouveau code

Pourquoi Cloudflare?

  1. C'est gratuit
  2. Il est livré avec une prise en charge immédiate de 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 ressources 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 auprès de n'importe quel registraire de noms de domaine comme: Namecheap, GoDaddy, BigRock, etc.

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

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

  • Accédez à //pages.github.com
  • Sélectionnez l'option Site du 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érentiel. Dans la Pages Github section, choisissez le maître branche au service de votre site web à partir. Une fois que vous avez fait cela, vous pouvez accéder à //moi> .gith u b.io/repos itoire pour voir votre site Web en action comme indiqué ci-dessous.

Original text


Étape 3. Ajouter un domaine personnalisé

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

Donc, nous avons tout configuré sur Github. Nous allons commencer par configurer Cloudflare pour égayer 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 semblable à 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 Lancer l'analyse .

Étape 5: Configurer les enregistrements DNS pour votre domaine

Dans cette étape, nous informons Cloudflare de pointer notre domaine vers le serveur Github Pages à l'aide de 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 adressées à votre domaine personnalisé, c'est-à-dire yourcustomdomain.com, seront acheminées vers votre site Web sur Github à l' étape 3 .

Il y a encore une étape à franchir avant de passer à l'étape suivante. Souvent, vous voudrez 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 apex (@).

Une fois que vous avez configuré cela, toutes les demandes adressées à votre sous-domaine personnalisé, c'est-à-dire www. yourcustomdomain.com sera redirigé vers votre site Web sur Github à l' étape 3 .

REMARQUE: n'essayez pas d'accéder à votre domaine personnalisé tout de suite. Ça ne marchera pas. Nous n'avons fait que la configuration de Cloudflare vers Github. Nous devons encore effectuer la configuration du registre DNS -> Cloudflare. Cela viendra à 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 section Pourquoi Cloudflare? section au début.

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

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

Une fois que vous êtes sur cette page, gardez-la ouverte dans un onglet et ouvrez le site de votre registraire DNS (l'endroit 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 de serveur de noms sont:

  1. Gros rocher
  2. Namecheap
  3. Allez papa

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

YASSS! Vous avez correctement configuré votre domaine personnalisé pour utiliser Cloudflare en tant que fournisseur DNS. Vous pouvez aller à l' option Vue d'ensemble en haut et vous constaterez qu'il attend toujours que votre changement de serveur de noms soit 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 CELA DEVRAIT JUSTE FONCTIONNER ! ??

Étape 8: Configurer la minification

Dans les paramètres de vitesse , dans la section Auto Minify , choisissez l'option pour tout minifier 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 les commentaires indésirables.

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

Si vous faites défiler la même page que Auto Minify , vous trouverez la section Expiration du cache du navigateur . Il doit être défini sur 30 jours / 1 mois, idéalement, pour que WebpageTest ne vous donne pas d'avertissement. Ce que cette heure indique, c'est qu'une fois que votre site est chargé dans n'importe quel navigateur, le navigateur ne demandera aucun élément une seconde fois jusqu'à ce que la période de cache du navigateur expire pour ces actifs.

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

Étape 10: Configurer les règles de page

Dans cette étape, nous allons faire deux choses:

  1. Rediriger toutes les demandes de www.yourcustomdomain.com à yourcustomdomain.com
  2. Redirigez toutes les demandes de // votredomaine personnalisé.com vers // votredomaine personnalisé.com

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

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

Pour gérer la redirection //yourcustomdomain.com vers //yourcustomdomain.com , remplacez tweetify.io par le nom yourcustomdomain.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é, à partir de ce moment, chaque fois qu'il essaie d'accéder à votre site Web, il sera toujours redirigé vers la version HTTPS de votre site. Cela accélère le chargement de votre site 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 êtes passé à 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

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

Karan Thakkar est le Frontend Lead chez Crowdfire - Votre partenaire marketing super intelligent . Son article a déjà été publié 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 (en utilisant Golang).

Autres articles écrits par lui:

Comment je suis passé de 300 à 5000 abonnés en seulement 3 semaines

#GrowthHacking mon compte Twitter pour @Crowdfire Twitter Premier League blog.markgrowth.com Utilisation de Let's Encrypt Certbot pour obtenir HTTPS sur votre box Amazon EC2 NGINX

Let's Encrypt est une nouvelle autorité de certification qui fournit des certificats SSL gratuits (jusqu'à une certaine limite par semaine). C'est… medium.freecodecamp.com