Le guide du programmeur paresseux pour maintenir un site Web personnel

De nombreux développeurs ont un site Web personnel ou aimeraient en avoir un.

Bien qu'il existe de nombreuses options intéressantes pour créer un beau site Web sans aucune compétence en matière de codage, nous sommes des développeurs de logiciels, nous voulons donc mettre en valeur nos compétences et créer quelque chose à partir de zéro.

Coder le site Web est une chose, et vous pourriez le faire en 1 à 2 jours. Mais une fois que votre site Web est en ligne, vous devez le maintenir pour vous assurer qu'il est disponible, à jour et sécurisé.

Dans ce qui suit, nous verrons donc comment créer et maintenir un site Web personnel avec un minimum d'effort en 10 étapes faciles. Parce que, même si nous aimons coder, nous aimons aussi passer du temps loin de l'ordinateur. 🌳🤸🍝

Je vais utiliser mon site Web que j'ai récemment reconstruit dans React comme exemple. Vous pouvez trouver le code source dans mon dépôt GitHub .

Les trucs et astuces suivants supposent un site Web statique super simple qui se compose uniquement d'une partie frontale. Cependant, vous pouvez facilement étendre ces concepts à des projets plus complexes, notamment un backend, une base de données ou d'autres éléments d'infrastructure.

Nous n'entrerons pas dans les détails pour aucune des technologies mentionnées, mais donnerons plutôt un aperçu de haut niveau pour le garder indépendant de la technologie.

1. Configurer un référentiel

Choisissez une plate-forme de développement comme GitHub ou GitLab et configurez un nouveau référentiel vide. Assurez-vous d'inclure une licence et d'ajouter un README, afin que la communauté sache ce qu'elle peut faire avec votre code.

2. Choisissez un framework JS

Choisissez un framework ou une bibliothèque JavaScript comme React, Vue ou Svelte à utiliser pour créer votre site Web. Ou ne le faites pas, et optez pour Vanilla HTML et JavaScript si c'est quelque chose que vous voulez essayer.

Lorsque vous choisissez le framework à choisir, le plus important est que ce soit quelque chose avec lequel vous aimez travailler.

Ceci est votre site Web et vous pouvez utiliser les outils que vous aimez. Vous pouvez choisir quelque chose que vous connaissez et aimez déjà, ou essayer quelque chose de complètement nouveau qui vous intéresse.

J'ai créé ma première page d'accueil personnelle dans Vue.js. Environ un an plus tard, je l'ai reconstruit dans React parce que je voulais acquérir plus d'expérience pratique sur React et essayer certaines bibliothèques React.

Utilisez les outils de construction de votre framework JS pour générer du code passe-partout et obtenez un exemple simple de style Hello World servi sur localhost.

3. Choisissez une bibliothèque de composants d'interface utilisateur

Cette étape est facultative, mais puisque nous parlons ici de minimiser l'effort, je recommanderais d'inclure une bibliothèque de composants d'interface utilisateur comme Material UI ou Bootstrap dans votre projet. J'ai choisi Chakra UI pour mon site Web.

Ces bibliothèques sont livrées avec un ensemble de composants d'interface utilisateur ainsi que des utilitaires pour la mise en page et le style et vous permettent de construire très rapidement.

Assurez-vous de choisir une bibliothèque de composants bien documentée, que vous trouvez visuellement attrayante, qui comprend de nombreux composants et qui peut être personnalisée facilement. Pour personnaliser l'apparence de la bibliothèque sur votre site Web, il peut être amusant de jouer avec les polices et les jeux de couleurs. 🎨

4. Construisez quelque chose de super simple

Pensez aux éléments d'information que vous souhaitez afficher sur votre page d'accueil, puis continuez et créez quelque chose en utilisant les composants de votre bibliothèque de composants d'interface utilisateur. N'y pensez pas trop.

L'objectif principal est désormais de faire vivre quelque chose rapidement, et comme Voltaire le savait déjà, la perfection est l'ennemie du bien.

Si vous avez beaucoup à dire et beaucoup d'idées sur ce qu'il faut montrer sur votre site Web, c'est génial ! Allez-y et construisez, mais faites d'abord un plan pour organiser votre contenu - pensez au routage, aux différentes vues, aux sections, à la mise en page, à la navigation, etc.

Mais si vous êtes comme moi, vous pourriez vous demander, à ce stade, ce qu'il faut mettre sur votre page d'accueil et pourquoi vous devriez en créer une parce que QUI S'EN soucierait MÊME ? ! 😳

Vos sentiments sont tout à fait valables, mais laissez-moi vous dire que vous n'avez besoin de la permission de personne ou d'un contenu fantaisiste pour avoir une présence en ligne.

Gardez-le super simple et partagez simplement certaines choses sur vous que vous vous sentez à l'aise de partager avec les visiteurs (qui peuvent être n'importe qui ayant accès à Internet - gardez cela à l'esprit).

Pour mon site Web, je l'ai gardé assez minimal avec une photo et un slogan sur moi-même, une liste de ma pile technologique, certaines choses que j'aime et quelques recommandations de livres. 📚 J'ai également inclus des liens vers mon LinkedIn et GitHub.

5. Ajoutez quelque chose d'amusant

À l'étape 4, nous avons construit quelque chose de super simple, mais simple ne doit pas signifier ennuyeux. Alors maintenant, soyons interactifs. 🚀

Essayez de trouver des façons simples de rendre la visite de votre site Web plus amusante et intéressante. Cela peut inclure des éléments tels que des animations, des interactions avec les utilisateurs ou des changements de schéma de couleurs. Ne réinventez pas la roue cependant.

Si vous avez une idée de ce qu'il faut faire, il y a de fortes chances qu'il existe déjà un paquet npm qui fait exactement cela.

Je suis allé avec une animation de défilement pour la barre de navigation, un bouton pour basculer entre les modes sombre et clair avec une belle transition, et un bouton d'icône qui démarre une fête de confettis surprise en utilisant

réagir-confettis .

Et ça y est, vous avez créé vous-même un site Web ! 🥳 Voyons ensuite comment le déployer et le maintenir.

6. Déployer

Il existe de nombreuses options pour déployer votre site Web sur Internet entièrement gratuitement, comme Netlify, Vercel ou GitHub Pages.

Les étapes exactes dépendront du fournisseur que vous choisissez, alors suivez les guides jusqu'à ce que votre site Web soit en ligne sous une URL.

Je suis allé avec Netlify et je l'ai trouvé incroyablement facile à configurer.

En tant qu'étape facultative, vous pouvez décider d'acheter un nom de domaine personnalisé et de le connecter au DNS de votre fournisseur pour remplacer l'URL arbitraire que vous avez obtenue. Vous n'êtes pas obligé de le faire, mais je trouve qu'un nom de domaine personnalisé est une bonne idée, et l'achat d'un domaine ne devrait pas coûter beaucoup plus de 10 $/an.

7. Configurer CI/CD

Maintenant que votre site Web est en ligne sur Internet, vous voulez vous assurer de ne pas le casser accidentellement avec de futurs commits. Vous souhaitez également déployer automatiquement la dernière version de votre branche main .

Votre plate-forme de développement peut déjà être livrée avec des outils CI/CD intégrés, comme GitHub Actions ou GitLab CI/CD.

J'utilise GitHub Actions car mon référentiel réside sur GitHub.

Pour l'intégration continue, vous pouvez configurer des vérifications automatisées pour chaque demande d'extraction et chaque fusion vers la branche main . Cela pourrait inclure des vérifications telles que le peluchage et le formatage ou les tests unitaires.

Il existe également de nombreux modèles disponibles, par exemple, j'utilise une action GitHub pré-construite pour découvrir les vulnérabilités avec CodeQL.

Pour le déploiement continu, vous pouvez configurer votre propre script de déploiement qui s'exécute à chaque poussée vers la main une fois toutes les vérifications terminées. Mais selon le fournisseur d'hébergement que vous avez choisi à l'étape 6, vous n'aurez peut-être rien à faire.

Netlify, par exemple, s'intègre parfaitement à GitHub afin que la branche main soit déployée automatiquement.

8. Utilisez Dependabot pour maintenir vos dépendances à jour

Nous avons créé un site Web, nous l'avons mis en ligne, et maintenant tout ce que nous voulons faire, c'est nous détendre. Mais l'écosystème JS évolue rapidement, tout comme ses vulnérabilités.

Nous voulons nous assurer que nos dépendances sont à jour pour assurer la sécurité de notre application, mais la gestion des dépendances npm peut être pénible, et nous ne voulons certainement pas vérifier les mises à jour tous les jours.

Heureusement, il existe un petit outil génial appelé Dependabot qui peut s'occuper de tout cela pour nous. 🤖 Dependabot est un outil créé par GitHub pour les mises à jour automatisées des dépendances. Une version pour GitLab est désormais disponible.

Tout ce que vous avez à faire est d'ajouter un fichier dependabot.yml et GitHub créera automatiquement des demandes d'extraction lorsqu'une nouvelle version des packages que vous utilisez est disponible. Vous pouvez configurer Dependabot dans le fichier YAML, pour définir par exemple le destinataire des PR et le nombre maximum de PR ouverts.

Étant donné que nous avons mis en place des contrôles automatisés pour les PR à l'étape 7, ceux-ci fonctionneront avec chaque PR Dependabot, et nous pouvons être sûrs qu'une nouvelle version ne cassera pas notre site Web.

Dans les paramètres de sécurité du référentiel, vous pouvez également configurer dependabot pour vous alerter de toute vulnérabilité dans vos dépendances.

9. Vérifiez les problèmes d'accessibilité

L'accessibilité est un sujet tellement étrange - c'est super important, mais souvent négligé, même s'il y a tellement de fruits à portée de main lorsqu'il s'agit d'améliorer l'accessibilité d'un site Web.

Si vous utilisez un framework JS et une bibliothèque de composants d'interface utilisateur, votre score d'accessibilité ne devrait pas être complètement terrible. Il peut probablement encore être amélioré, surtout si vous avez inclus des polices personnalisées ou des schémas de couleurs.

Vous pouvez exécuter un outil comme Lighthouse dans les outils de développement Chrome pour découvrir des améliorations potentielles. Lighthouse générera un rapport pour vous et suggérera des modifications pour améliorer l'accessibilité.

Ces suggestions sont généralement faciles à mettre en œuvre, comme augmenter la taille de la police, modifier le contraste entre le texte et l'arrière-plan ou réorganiser l'ordre des éléments HTML dans le DOM.

Lighthouse peut également générer des rapports sur les performances, les meilleures pratiques et le référencement. 🆒

10. Exécutez une tâche Cron pour envoyer un ping à votre site Web

Après avoir mis mon site Web en ligne, j'ai ressenti le besoin de vérifier au moins une fois par jour s'il était toujours là. 🕵️‍♀️

Au début, j'étais content à chaque fois que je voyais que mon site était toujours disponible, mais ensuite c'est vite devenu ennuyeux.

Pour vous assurer d'être averti automatiquement si votre site Web tombe en panne pour une raison quelconque, vous pouvez configurer une tâche cron qui envoie simplement un ping à l'URL de votre site Web à intervalles réguliers.

Si votre projet inclut un backend et une base de données, vous pouvez également configurer des tests de fumée de base qui exécutent, par exemple, des requêtes GET sur votre API.

Dans mon cas, je viens de configurer une autre action GitHub qui s'exécute une fois par jour et envoie un ping à ma page. Augmentez la fréquence comme bon vous semble pour votre page d'accueil et le type de trafic que vous attendez.

Conclusion

Et nous avons terminé ! Pour l'instant, du moins.

Pour moi, mon site web est avant tout un terrain de jeu pour tester des technologies qui m'intéressent, j'aime donc le modifier à l'occasion. Je vous encourage à revoir régulièrement le code de votre site Web et à vous amuser avec. 💃

J'espère que ce guide vous a donné une idée de la facilité avec laquelle il peut être de créer et de maintenir une page d'accueil personnelle. Vous pourriez probablement construire quelque chose de simple en 1-2 jours (si vous êtes comme moi, ajoutez encore deux jours pour obtenir la bonne mise en page CSS 🙄).

Le déploiement de votre site Web et l'ajout d'automatisation pour faciliter la maintenance peuvent être effectués en moins de 2 heures.

Au plaisir de voir tous les sites Web incroyables que vous allez créer ! 🤩