Développement d'un flux de travail de générateur de sites statique

Générateur de sites Web statique: un outil puissant pour améliorer le flux de travail des pages de destination

Points de base:

• Les générateurs de sites Web statiques tels que Hugo offrent de nombreux avantages, notamment un contrôle complet sur le contenu et la conception Web, les améliorations de la vitesse et les améliorations de la flexibilité. Contrairement aux systèmes de gestion de contenu tels que WordPress créent des pages chaque fois qu'un visiteur demande, le générateur de sites Web statique construit des pages Web lors de la création ou de l'édition de nouveaux contenus.
• La migration vers un générateur de sites Web statique peut simplifier le processus d'hébergement. Usersnap utilise avec succès Netlify, qui fonctionne bien avec GitHub et fournit un processus de déploiement simple.
• Utilisation de GitHub pour la gestion du code source, des tests automatisés avec CodeShip et des tests manuels avec USERSNAP crée des flux de travail de développement puissants pour des sites Web statiques. Cette combinaison d'outils permet des rapports d'erreurs efficaces et des tests automatisés pour assurer un environnement sans erreur de haute qualité.

Dans cet article, le spécialiste technique de l'utilisateur Thomas Peham explique comment et pourquoi les générateurs de sites Web statiques peuvent vous aider avec votre flux de travail de page de destination.

Personne n'aime trouver des bugs. Pire, personne n'aime trouver des bugs lors de l'achat de produits numériques. C'est pourquoi, en tant qu'entreprise qui fournit des outils de suivi des bogues basés sur le Web pour des dizaines de milliers d'utilisateurs, nous devons assurer un environnement sans bug. À mesure que nos pages Web augmentent - et donc le nombre de lignes de code - nous sommes motivés à trouver des moyens d'améliorer les workflows internes. Dans cet article, je veux vous présenter le voyage que nous avons fait au cours des derniers mois pour modifier notre pile d'outils et comment nous générons et déploiement de nouvelles pages de destination.

La nouvelle pile d'outils de usersnap.com

Dès que nous décidons d'améliorer le flux de travail interne de la page de destination Usersnap.com, de nombreuses questions doivent être répondues. Quel système de gestion de contenu utiliser? Quels outils logiciels? Il y a plus de questions. Nous avons fini par utiliser Hugo comme principal framework du site Web pour usersnap.com. Cette décision a conduit à un changement radical dans la façon dont l'équipe collabore et se développe.

Avantages du générateur de sites Web statique

Alors, quel rôle joue Hugo dans les paramètres de notre site Web? Hugo est un générateur de sites Web statique open source. Le générateur de sites Web statique construit des pages Web lorsque vous créez un nouveau contenu ou modifiez du contenu. Au lieu de cela, les systèmes de gestion de contenu comme WordPress créent une page à chaque fois qu'un visiteur demande (bien qu'il existe diverses techniques de mise en cache disponibles). Il y a de nombreux avantages à choisir un générateur de sites Web statique comme Hugo au lieu d'un système comme WordPress. Et ces avantages ne sont pas seulement une question de performance. Les pages Web statiques créées avec Hugo vous donnent un contrôle à 100% sur votre contenu et votre conception Web. Si vous prévoyez de démarrer un site Web avec différents mises en page et types de contenu, il est logique d'envisager d'utiliser un générateur de site Web statique au lieu d'un système de gestion de contenu, car vous serez plus rapide et plus flexible. De plus, vous n'avez pas besoin de connaître toutes les fonctionnalités d'un CMS particulier, mais il vous suffit de connaître les bases de HTML et CSS. Hugo a été initialement lancé par Steve Francia en tant que projet parallèle. Aujourd'hui, la communauté Hugo compte plus de 165 contributeurs, 35 sujets et des milliers d'utilisateurs. Nous avons utilisé Hugo dans notre projet Bugtrackers.io, et nous savons que c'est aussi le framework que nous souhaitons utiliser pour usersnap.com.

Hébergement statique sur netlify

Après avoir décidé que CMS comme WordPress apporte plus de complexité que d'avantages, nous avons commencé à chercher des hôtes statiques. Les exigences sont simples et claires. Les hôtes statiques doivent fonctionner parfaitement avec GitHub, et nous devons être en mesure de créer un processus de déploiement que tout le monde dans l'entreprise peut effectuer. Lorsque Divshot (notre hôte dans Bugtrackers.io) est arrêté après avoir été acquis par Google, nous passons à NetLify. Nous sommes très satisfaits de Netlify, donc le choisir comme notre page de destination statique est également une décision naturelle et simple.

Utilisez GitHub pour le contrôle de version

Puisque nous avons utilisé GitHub dans plusieurs autres projets, nous savons que GitHub sera le lieu de notre gestion du code source. Il est très facile de configurer un référentiel privé pour notre nouvelle page de destination et de connecter GitHub à Netlify.

En particulier pour les générateurs de sites Web statiques comme Hugo, ce flux de travail devient encore plus puissant. En utilisant la commande hugo, vous pouvez configurer Hugo sur NetLify. Il vous suffit de choisir la façon dont le projet est construit et quel répertoire doit être hébergé publiquement. Chaque fois que vous le poussez vers GitHub, NetLify exécute vos commandes de build et déploie les résultats. Dans notre exemple, la configuration ressemble à ceci:

<code>Repository: usersnap/landing-pages
Branch: master

Build cmd: cd src && npm install &&node_modules/bower install && node_modules/brunch/bin/brunch 
build —production && cd .. && hugo

Public folder: /public</code>

(Nous exécutons d'autres outils pour JavaScript et le prétraitement CSS.)

Test à l'aide de CodeShip et Usersnap

En ce qui concerne les tests et l'assurance qualité, la plupart des gens semblent être occupés à éviter ce sujet. ;) Utilisation de CodeShip (pour les tests automatisés) et USERSNAP (pour les tests manuels), je pense que nous avons trouvé la chaîne d'outils parfaite qui nous permet de signaler les bogues à tout moment tout en ayant un filet de sécurité des tests automatisés. Ainsi, avant que notre code ne soit hébergé sur Netlify, il sera testé, préparé et déployé par CodeShip. De cette façon, nous avons mis en place un environnement de mise en scène et de production pour les sites Web statiques. Une fois déployé, nous utilisons USERSNAP (oui, nous utilisons nos propres produits) pour les tests manuels et l'assurance qualité, ou nous discutons simplement de nouvelles idées ou collectons des commentaires sur quoi que ce soit. En bref, le flux de travail de développement est le suivant:

Pour amener tout le monde dans l'équipe, nous avons connecté CodeShip et Usersnap to Slack. De nouvelles poussées seront affichées dans un canal Slack dédié. De plus, les développeurs recevront des notifications dans Slack sur les nouveaux rapports de bogues et les commentaires.

Gérer les bogues et faire le travail

recevoir des alertes et des notifications sur les nouveaux bugs et erreurs est la même chose. Les prioriser, les allouer et les réparer est une autre affaire. Nos équipes de produits et de développement s'appuient sur la feuille de route du produit, que nous appelons la matrice fonctionnelle. Cette matrice de fonctionnalités comprend toutes les fonctionnalités, les corrections de bogues et les demandes de modification sur lesquelles notre équipe travaille. En plus de la matrice fonctionnelle, nous utilisons également certains outils internes pour simplifier la communication et la vie. Nous aimons appeler Slack notre maison car cela nous permet de communiquer entre eux dans toute l'entreprise. Pour gérer de nouveaux projets et faire le travail, nous nous appuyons sur la fleur de l'outil de gestion des produits, ce qui nous permet de bien comprendre la situation dans son ensemble. Par exemple, nous avons une planche de fleurs pour nos produits, ce qui nous permet de bien comprendre l'état actuel des exigences de nouveaux produits. Nous avons également un tableau noir pour tous les projets de site Web statique.

Quelle est la prochaine étape?

En tant que startup croissante, nous continuons à réfléchir à de nouvelles façons d'améliorer l'efficacité. L'ajout de nouveaux employés à notre équipe de développement nous oblige également à repenser la façon dont nous travaillons et à identifier le travail qui doit être fait différemment. Grâce à notre nouveau flux de travail, nous avons trouvé un moyen d'être plus efficace pour déployer de nouvelles pages de destination. Pour l'avenir, nous pensons que DevOps devient de plus en plus importante pour le développement d'entreprises. L'infrastructure d'externalisation à des services comme AWS ou Azure est devenue la norme de facto pour la construction et la mise à l'échelle des logiciels. En conséquence, les opérations d'infrastructure deviennent moins importantes - bien que nous voyions une demande croissante de ressources, de compétences et d'outils qui gèrent vos opérations et services logiciels. Heureusement, il existe déjà divers services qui peuvent vous aider à accélérer DevOps.

(Le reste de l'article est FAQ et a été couvert dans les réponses précédentes, le contenu en double est omis ici)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!