Si vous envisagez de créer un blog, l’une des premières décisions que vous devez prendre est de savoir où l’héberger. Si vous souhaitez vous concentrer uniquement sur l’écriture, optez parfaitement pour des plateformes de blogs prêtes à l’emploi. Cependant, si vous avez des connaissances de base en HTML et CSS, créer un site Web pour votre blog à partir de zéro est un bon moyen de grandir en tant que développeur.

Vous trouverez ci-dessous la liste de 10 choses que vous devez apprendre lors de la création d’un site Web pour son blog 📚:

1. Eleventy et modèles liquides

Si vous n’avez jamais utilisé de générateurs de sites statiques auparavant, c’est l’occasion d’en essayer un. Eleventy est tellement amusant pour créer plus de sites statiques avec, notamment qu’il est un truc technologique préféré en 2020.

2. Lighthouse

Essayer Lighthouse, c’est génial. Il va vous aide à éviter les pièges les plus courants en exécutant une série d’audits sur votre site et en générant des rapports soignés avec des liens vers des supports d’apprentissage sur chaque problème. S’attaquer à tous et atteindre ce précieux score de «100» n’est pas une mince affaire, mais cela améliorera certainement l’expérience utilisateur de votre site et assurera un chargement rapide. À propos, Eleventy a un classement des performances des sites construits avec. Vous pouvez soumettre votre site pour participer et il sera classé en fonction du score Lighthouse.



3. Couleurs accessibles

En essayant de cocher toutes les cases de l’audit d’accessibilité de Lighthouse, on appris les normes de contraste de couleur. Les couleurs accessibles, un outil génial qui peut recommander les ajustements nécessaires à votre palette de couleurs pour rendre le rapport de contraste suffisamment élevé afin que votre contenu soit discernable pour les personnes souffrant de toutes sortes de déficiences visuelles.

4. Images réactives et responsives

Une image vaut mille mots comme le dit un vieil adage. Casser un long post avec une image illustrant l’idée est une meilleure chose à faire. Mais ce serait un gaspillage de servir de grandes images à des clients avec de petits écrans tels que des smartphones. Saisissez des images réactives. Avec une balise , on peux servir différentes images en fonction de la taille de l’écran.

5. Variables CSS

Prenez l’habitude de travailler avec des préprocesseurs CSS dans son travail. CSS n’a pas cessé de se développer et il y a beaucoup de choses que CSS prend en charge nativement maintenant, ce qui n’était possible que par le biais de préprocesseurs auparavant. Un exemple serait les variables. L’implémentation de la bascule du mode sombre / clair sur un site repose sur des variables CSS.

6. Polices variables

Mise en œuvre le mode sombre, donne lieu à une remarque que le même poids de police semblait trop épais lorsqu’il s’agissait de texte blanc sur fond sombre. La solution de ce problème qui utilise une police variable consiste à réduire le poids de la police via CSS. Contrairement aux polices normales, qui ne prennent pas en charge les valeurs de poids de police inférieures à 400, les polices variables autorisent tout nombre dans la plage de largeurs de la police comme valeur de poids de police.

Pour pouvoir ajuster l’épaisseur de la police en mode sombre, le choix d’utiliser une police Web est indispensable. Glyphhanger est un excellent outil pour cela. Après l’avoir utilisé pour son blog et vu une diminution impressionnante de la taille du fichier de police, on ne cesse plus d’utiliser les polices Web.

7. Systemd

Pour maintenir mon serveur HTTP Node.js en marche, Apprendre à enregistrer des services avec Linux init system – systemd. Passer à NGINX de Node.js est toujours présent, mais cela rend son travail obsolète, mais bon, c’était toujours une expérience intéressante et informative.

8. CDN

CDN est une partie importante de Jamstack, donc Apprendre à utiliser CDN si vous voulez importer des bibliothèques populaires à partir de serveurs CDN au lieu de les servir depuis votre hôte. Pour un blog, cependant, le trafic vers un serveur donné soit géré par Cloudflare CDN. Pour ce faire, mettre à jour les enregistrements NS de son domaine avec les serveurs de noms Cloudflare est nécessaire. Ces serveurs de noms renvoient les adresses IP Cloudflare lors de la recherche DNS pour son domaine. Le trafic proxy arrive aux serveurs de périphérie Cloudflare, puis ils transmettent la demande à son serveur. Cela vous aide à améliorer le temps de chargement de la page de son site Web en diffusant des versions mises en cache des pages. Bien que ce soit génial, cela a apporté de nouveaux défis, comme un problème de purge du cache.

9. Services Web Amazon

L’hébergement de son blog sur AWS EC2 vous oblige à fouiller dans la documentation AWS et à tout faire soi-même, à commencer par l’enregistrement d’un domaine sur leur Route 53 jusqu’à l’apprentissage de l’utilisation des services CodeDeploy et CodePipline pour configurer CI / CD afin que vous puissiez redéployer simplement en appuyant sur le code dans la branche principale… Après avoir fait tout cela, vous vous sentez beaucoup plus à l’aise avec la console AWS.

10. SEO

Créer des applications Web à usage interne qui ne sont pas exposées à Internet, et par conséquent, l’optimisation des moteurs de recherche n’est pas une chose à laquelle nous pensons. Construire un site Web pour un blog est différent car, généralement, vous voulez que vos articles soient découverts par les moteurs de recherche. Apprendre au moins des choses de base sur le référencement, comme ajouter une description dans les balises méta ou générer un plan du site pour les robots d’exploration, ou ce qu’est un lien canonique, sont des choses primordiales.