


Développement d'un flux de travail de générateur de sites statique
Feb 19, 2025 pm 01:01 PMGé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. Grace à 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!

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!

Article chaud

Outils chauds

Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Lors du développement de plateformes d'apprentissage similaires à Udemy, l'accent n'est pas seulement mis sur la qualité du contenu. Tout aussi important est la fa?on dont ce contenu est livré. En effet, les plateformes éducatives modernes reposent sur des médias accessibles, rapides et faciles à digérer.

Dans un monde où la confiance en ligne n'est pas négociable, les certificats SSL sont devenus essentiels pour chaque site Web. La taille du marché de la certification SSL était évaluée à 5,6 milliards USD en 2024 et se développe toujours fortement, alimentée par la montée en puissance du commerce électronique

Une passerelle de paiement est un élément crucial du processus de paiement, permettant aux entreprises d'accepter les paiements en ligne. Il agit comme un pont entre le client et le marchand, transférant en toute sécurité les informations de paiement et facilitant les transactions. Pour

Un nouveau modèle d'intelligence artificielle (IA) a démontré la capacité de prédire les principaux événements météorologiques plus rapidement et avec une plus grande précision que plusieurs des systèmes de prévision mondiaux les plus utilisés. Ce modèle, nommé Aurora, a été formé u

Dans ce qui semble encore un autre revers pour un domaine où nous pensions que les humains dépasseraient toujours les machines, les chercheurs proposent maintenant que l'IA comprend mieux les émotions que nous.

Qu'on le veuille ou non, l'intelligence artificielle fait partie de la vie quotidienne. De nombreux appareils - y compris les rasoirs électriques et les brosses à dents - sont devenus alimentés par l'IA, "en utilisant des algorithmes d'apprentissage automatique pour suivre comment une personne utilise l'appareil, comment le Devi

L'intelligence artificielle (IA) a commencé comme une quête pour simuler le cerveau humain, est-ce maintenant en train de transformer le r?le du cerveau humain dans la vie quotidienne? La révolution industrielle a réduit la dépendance à l'égard du travail manuel. En tant que personne qui fait des recherches sur l'application

Plus nous essayons de faire fonctionner les modèles d'IA, plus leurs émissions de carbone deviennent grandes - certaines invites générant jusqu'à 50 fois plus de dioxyde de carbone que d'autres, selon une étude récente.
