Article original : An Illustrated Guide for Setting Up Your Website Using Github & Cloudflare
Par Karan Thakkar
Vous devriez lire ceci si…
- Vous souhaitez configurer des redirections personnalisées ou d'autres configurations de serveur gratuitement
- Vous souhaitez mettre votre site en HTTPS mais ne savez pas par où commencer
- Vous êtes submergé par le nombre de choix disponibles (comme Netlify, Surge, BitBalloon, Now)
Pourquoi Github ?
- Facile à configurer et à démarrer avec Github Pages
- Déploiements instantanés lors de l'envoi de nouveau code
Pourquoi Cloudflare ?
- C'est gratuit
- Il offre un support SSL (HTTPS) prêt à l'emploi. (Voici pourquoi HTTPS est important.)
- Gestion DNS super simple
- Possibilité de définir l'expiration du cache du navigateur pour les ressources
- Minification automatique de vos ressources statiques
- Règles de page personnalisées pour configurer des redirections, toujours HTTPS, etc.
- HTTP2/SPDY pour les navigateurs supportés
- Permet de configurer HSTS (HTTP Strict Transport Security)
Avant de commencer, vous aurez besoin de quelques éléments :
- Un compte Github
- Un compte Cloudflare
- 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 curiosité, alors commençons !
Étape 1 : Créer un dépôt Github avec votre code
- Allez sur https://pages.github.com
- Sélectionnez l'option Site de projet pour trouver les instructions sur la création d'une page de base à partir de zéro ou avec un thème personnalisé
Étape 2 : Configurer Github Pages pour le dépôt
Allez dans Paramètres pour votre dépôt. Dans la section Github Pages, choisissez la branche master pour servir votre site web. Une fois que vous avez fait cela, vous pouvez aller sur https://_.github.io/repository pour voir votre site web en action comme montré ci-dessous.
É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 à 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 : Configurer votre domaine sur Cloudflare
Connectez-vous à Cloudflare. Si vous l'utilisez pour la première fois, vous devriez voir un écran comme l'image montrée 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 Démarrer 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 en utilisant deux entrées DNS A Record :
- 192.30.252.153
- 192.30.252.154
Une fois que vous avez configuré cela, toutes les requêtes vers votre domaine personnalisé, c'est-à-dire votredomainepersonnalise.com, seront acheminées vers votre site web sur Github à l'Étape 3.
Il y a une étape supplémentaire avant de passer à l'étape suivante. Souvent, vous souhaiterez utiliser un sous-domaine comme www pour votre site web, c'est-à-dire www.votredomainepersonnalise.com. Pour cela, vous devrez ajouter une entrée DNS CNAME record qui pointera votre sous-domaine (www) vers votre domaine apex (@).
Une fois que vous avez configuré cela, toutes les requêtes vers votre sous-domaine personnalisé, c'est-à-dire www.votredomainepersonnalise.com, seront acheminées vers votre site web sur Github à l'Étape 3.
NOTE : N'essayez pas d'accéder à votre domaine personnalisé tout de suite. Cela ne fonctionnera pas. Nous avons seulement fait la configuration Cloudflare vers Github. Nous devons encore faire la configuration Registraire DNS -> Cloudflare. Cela viendra à l'Étape 7.
Cliquez sur Continuer pour passer à l'étape suivante.
Étape 6 : Choisir le plan gratuit de Cloudflare
Le plan gratuit de Cloudflare offre de nombreuses options sophistiquées comme discuté dans la section Pourquoi Cloudflare ? au début.
Cliquez sur Continuer pour passer à l'étape suivante.
Étape 7 : Mettre à 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 registraires suivants, voici les liens pour comprendre comment changer les serveurs de noms :
Vous devez remplacer les serveurs de noms existants dans les paramètres de votre domaine par ceux sur la page Cloudflare qui est ouverte dans l'autre onglet.
YASSS ! Vous avez réussi à configurer votre domaine personnalisé pour utiliser Cloudflare comme fournisseur DNS. Vous pouvez aller dans l'option Aperçu en haut et vous verrez qu'il attend toujours que votre changement de serveurs de noms soit traité.
Une fois que l'onglet Aperçu indique Statut : Actif, vous pouvez maintenant essayer de visiter votre site en utilisant votre domaine personnalisé, ET ÇA DEVRAIT JUSTE MARCHER ! ??
Étape 8 : Configurer la minification
Dans les paramètres Vitesse, dans la section Minification automatique, choisissez l'option pour minifier automatiquement tout : 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 beaucoup plus petite 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 Minification automatique, vous trouverez la section Expiration du cache du navigateur. Elle doit être définie à 30 jours/1 mois, idéalement, pour que WebpageTest ne vous donne pas d'avertissement. Ce que ce temps indique, c'est que, une fois votre site chargé dans un navigateur, celui-ci ne demandera aucune ressource une seconde fois jusqu'à ce que la période d'expiration du cache du navigateur pour ces ressources expire.
Avant de passer à l'étape suivante, veuillez vérifier les paramètres Crypto sur Cloudflare. Il devrait indiquer Certificat actif dans la section SSL. (Note : Essayez de recharger la page. Parfois, elle ne se met pas à jour). Dans les deux prochaines étapes, nous allons faire en sorte que votre site soit toujours servi via HTTPS. Pour que cela fonctionne sans problème, il est important que vous ayez un certificat actif sur Cloudflare.
Étape 10 : Configurer les règles de page
Dans cette étape, nous allons faire deux choses :
- Rediriger toutes les requêtes pour www.votredomainepersonnalise.com vers votredomainepersonnalise.com
- Rediriger toutes les requêtes pour http://votredomainepersonnalise.com vers https://votredomainepersonnalise.com
Allez dans les paramètres Règles de page et cliquez sur Créer une règle de page.
Pour gérer la redirection de www.votredomainepersonnalise.com vers votredomainepersonnalise.com, remplacez tweetify.io par le nom de votredomainepersonnalise.com. Cliquez sur Enregistrer et déployer.
Pour gérer la redirection de http://votredomainepersonnalise.com vers https://votredomainepersonnalise.com, remplacez tweetify.io par le nom de votredomainepersonnalise.com. Cliquez sur Enregistrer et déployer.
Étape 11 : Configurer HSTS
Allez dans les paramètres Crypto et faites défiler jusqu'à la section HTTP Strict Transport Security (HSTS). Cliquez sur Activer HSTS. Cela vous demandera de confirmer 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 que l'utilisateur essaiera 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 fait 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 montré ci-dessous. Vous pouvez lire plus de détails sur ces options ici et ici
C'est tout. Vous êtes prêt à montrer votre site web au monde ! ?? Si vous avez trouvé cela utile, veuillez le ❤️ et le partager.
Karan Thakkar est le responsable frontend chez Crowdfire - Votre assistant marketing super-intelligent. Son article a été précédemment mis en avant sur The 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 :
Comment je suis passé de 300 à 5k abonnés en seulement 3 semaines _#GrowthHacking mon compte Twitter pour @Crowdfire Twitter Premier League_blog.markgrowth.comUtiliser le Certbot de Let's Encrypt pour obtenir HTTPS sur votre boîte Amazon EC2 NGINX _Let's Encrypt est une nouvelle autorité de certification qui fournit des certificats SSL gratuits (jusqu'à une certaine limite par semaine). Il…_medium.freecodecamp.com