triumphmayflowerclub.com
ved Mark Smith's email address
Triumphmayflowerclub.com 
Le Triumph Mayflower Club est une organisation dédiée à la préservation de la voiture classique des années 1950, le Mayflower, par le fabricant de voitures britanniques Triumph. Le club lui-même s'est formé en 1974 et a fait son incursion initiale et limitée dans le World Wide Web en 2005, puis j'ai (Andi, responsable du projet) en 2017 pour leur créer un nouveau site Web à partir de zéro lorsque mes parents sont devenus membres. Cliquez ici si vous êtes intéressé à en savoir plus sur la voiture et le club.
Ce nouveau site Web est écrit dans Vanilla HTML5 pour le balisage des documents, CSS3 pour le style, une petite quantité de JavaScript (ES6) et est construit à l'aide de Jekyll comme générateur de site statique pour minimiser la duplication du code. Il est conçu pour s'exécuter dans n'importe quel navigateur «à feuilles persistantes» majeur (c.-à-d. Microsoft Edge basé sur le chrome, Google Chrome, Mozilla Firefox, Apple Safari ou Opera), le bureau ou le mobile, sans problème.
La situation d'hébergement actuelle pour le site de production ne convient vraiment que pour héberger un site HTML statique (yay, contraintes budgétaires d'un club de niche), il n'est donc pas vraiment pratique d'héberger autre chose que cela, par exemple une application ASP.NET Core Server pour des fonctionnalités plus avancées, donc je considère qu'il est quelque peu fait un défi en génie personnel pour voir le niveau de la hausse des limites des limites de ce qui peut être fait, des fonctionnalités, avec un site Web, avant d'avoir un niveau de plate Hébergement pour permettre une solution client-serveur plus complexe.
Les différentes versions hébergées du site Web se trouvent dans les emplacements suivants, où le serveur Canary est le site GitHub généré automatiquement basé sur le dernier master , la zone de mise en scène est un sous-domaine du site Web en direct que nous déployons manuellement lorsque nous voulons tester de nouvelles fonctionnalités et le site de production est le site Web actuel publiquement disponible (également déployé manuellement)::
Oh, et juste pour le plaisir, voici à quoi ressemblait l'ancien site Web pour la comparaison!
Le système de versions GitHub est utilisée pour incrémenter la version, Tag and Publish des versions, et est la seule source de vérité pour la version actuelle du site Web. Aucun numéro de version n'est explicitement maintenu dans les fichiers du repo.
Étant donné que cette base de code est un site Web, il n'est évidemment pas nécessaire de maintenir des succursales de version pour les correctifs de backport, car il n'y aura jamais qu'un seul site en direct qui aura toujours les derniers modifications.
Lorsqu'une nouvelle version du site est publiée via GitHub, le site Web interrogera un point de terminaison API GitHub spécifique lors de l'exécution pour obtenir à la fois le numéro de version de la dernière version et la date de publication, qui est ensuite affichée à l'utilisateur final dans le pied de page de chaque page.
SEMVER est utilisé, bien que vaguement, en tant que schéma de numérotation de version pour le site Web. Les pièces majeures , mineures et patchs sont heurtées pour une version conformément aux types de modification suivants dans la base de code:
Jusqu'à présent, deux versions majeures ont été publiées, qui sont répertoriées ci-dessous avec leurs modifications clés, ainsi que les fonctionnalités actuellement en cours pour la prochaine mise à jour majeure - chaque version historique jamais publiée depuis que le fait de vivre avec ce nouveau site peut être trouvé sur la page des versions:
Il s'agit d'une liste non exhaustive des choses que j'aimerais ajouter dans le développement futur, sans ordre particulier. Ceci est évidemment sujet à changement, mais cela devrait être une bonne indication de ce qui va arriver. Je vais cocher les choses au fur et à mesure qu'ils auront terminé. Je veux éventuellement arriver à une étape où j'ai fourni suffisamment d'outils afin que la plupart du contenu puisse être publié par d'autres personnes, afin que je sois libéré pour travailler principalement sur l'ajout de nouvelles fonctionnalités.
J'ai essayé d'écrire cette lecture de telle manière que ceux qui ne connaissent pas nécessairement le codage ont une chance de combattre de contribuer au développement du site Web s'ils sont si enclins; comme les membres du club. En tant que tel, si vous êtes déjà développeur, certaines de ces instructions peuvent sembler un peu trop verbale, vous pouvez donc probablement ignorer certains éléments. À l'inverse, si vous n'êtes pas trop averti, je vous recommande de tout lire si vous voulez pouvoir nous aider avec le site - d'ailleurs, vous êtes absolument le bienvenu ici quel que soit le niveau d'expérience (le cas échéant), d'où la raison pour laquelle j'ai essayé d'être aussi explicite que possible avec les instructions, alors ne vous sentez pas déposée si cela semble écrasant! Envoyez-moi un e-mail si vous souhaitez vous impliquer, mais que vous pourriez faire avec un démarrage de la main, et je serais heureux de vous faire avancer.
Pour la plupart, ce sont les exigences nues pour la mise en place du minimum.
Bien que ce ne soit pas strictement une exigence, je développe personnellement sur Windows moi-même, donc, naturellement, ce guide est adapté à l'établissement d'un environnement de développement sur un PC Windows. Si vous êtes sous Windows, je recommande fortement de passer à Windows 10 si vous ne l'avez pas déjà fait:
Je n'ai aucun problème avec les contributeurs qui se développent à l'aide de macOS ou Linux en supposant que vous savez ce que vous faites et que vous vous en tirez aux terminaisons de la ligne de style Windows ( CR+LF ). Je peux étendre ces instructions à l'avenir s'il y a suffisamment de demande pour les personnes qui souhaitent se développer sur d'autres plateformes - n'hésitez pas à soumettre une demande de traction pour mettre à jour le Readme avec lesdites instructions si vous êtes un de ces développeurs!
Git est ce que l'on appelle un système de contrôle de version (VCS) et c'est ce que les millions de développeurs que le monde utilisent chaque jour pour gérer leurs bases de code. Il fournit un historique complet de modifications apportées au référentiel de code source ainsi que des outils pour aider plusieurs développeurs à travailler ensemble sur la même base de code à distance depuis potentiellement n'importe où sur la planète. Le nouveau site Web Triumph Mayflower est actuellement en cours de développement en utilisant GIT comme VCS pour fournir une colonne vertébrale solide pour notre processus de développement. Suivez ces étapes pour installer Git pour Windows:
Le code source du site Web est hébergé sur GitHub (le site Web sur lequel vous lisez actuellement). Pour télécharger et modifier le code source, vous devrez vous inscrire à un compte GitHub:
ssh-keygencat ~/.ssh/id_rsa.pub > /dev/clipboardFor those unfamiliar, a Git “repository” , or “repo” for short, is a set of source code files (usually stored on a centralised “remote” server somewhere) alongside specific Git-managed metadata files which contain information about where the remote server can be found on the internet (or local network), various pieces of configuration information and, most importantly , a complete history tree of all changes made to the codebase – what specific changes were made at each stage, when they were made, Qui les a fait et comment ils ont été intégrés dans le flux principal de code à partir de «branches» temporaires où les développeurs peuvent travailler sur des copies isolées du code sans interférer avec d'autres développeurs travaillant sur la même base de code.
Afin d'apporter des modifications au site Web et de voir l'effet que ces modifications ont, vous devrez télécharger le code source sur votre machine locale dans ce qu'on appelle une opération de «clone» . Cela téléchargera une copie du référentiel de code source dans votre système de fichiers et permettra de la gérer par GIT:
C:dev ; Je garde personnellement mes références dans C:DevelopmentRepositories ).C:dev ):cd /c/devgit clone [email protected]:Stack-in-a-box/triumphmayflowerclub.com.gityes et appuyez sur [Entrez] .cd triumphmayflowerclub.comLorsque vous avez téléchargé une copie locale du référentiel, vous devez configurer GIT de telle sorte qu'il vous attribue automatiquement en tant qu'auteur de tout changement de code que vous apportez:
<name> par votre premier et votre nom:git config --local user.name "<name>"<email> par l'adresse e-mail que vous avez utilisée pour enregistrer votre compte GitHub (vous n'avez pas besoin des citations de chaque côté de l'adresse e-mail comme en définissant votre nom à l'étape précédente, car il ne contiendra aucun espace):git config --local user.email <email>Jekyll est ce que l'on appelle un «constructeur de sites statique» . Il nous permet de réduire la quantité de code répété dans toute la base de code, en «prise en compte» les parties couramment utilisées d'une page (telles que l'image de titre, la barre de navigation, le pied de page, les styles principaux, etc.) en fichiers uniques qui sont simplement référencés dans des pages spécifiques; Ensuite, lorsque Jekyll est exécuté pour «construire» le site, il réinsérera le code factorisé dans chacun des fichiers source qui le fait référence, créant un ensemble de fichiers reconstruit qui peut ensuite être déployé sur le serveur en direct et ouvert dans un navigateur Web.
( Remarque: au moment de la rédaction, qui est en juillet 2020, Jekyll ne prend pas en charge WSL 2, car il ne reçoit pas tous les événements de mise à jour du système de fichiers qui sont requis pour la fonction jekyll serve qui permet de reconstruire automatiquement chaque fois que les fichiers source changent, alors restez à WSL 1 pour le moment.)
Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linuxbash , qui devrait ressembler à quelque chose comme <username>@<machine>:~$ , exécutez la commande suivante pour mettre à jour la liste des packages qui peuvent être installés et des référentiels pour les installer (entrez votre mot de passe Unix lorsque vous êtes invité). Cela prendra un certain temps pour terminer:sudo apt-get update -y && sudo apt-get upgrade -ysudo apt-add-repository ppa:brightbox/ruby-ng (appuyez sur [Entrée] pour confirmer)sudo apt-get updatesudo apt-get install ruby2.7 ruby2.7-dev build-essential (entrez «y» à la demande)sudo gem updatesudo gem install jekyll Une fois Jekyll terminé l'installation, dans une session de terminal Ubuntu, et en supposant que vous avez choisi C:dev comme emplacement pour stocker vos référentiels, effectuez les étapes suivantes pour filmer une instance de serveur de développement local:
cd /mnt/c/dev/triumphmayflowerclub.comjekyll serveServer running... press ctrl-c to stop. sera affiché. À ce stade, ouvrez un navigateur Web et accédez à http: // localhost: 4000 / pour afficher le site Web exécuté localement à partir de votre copie locale du code source....done in x seconds. Sera montrée, où x est le nombre de secondes qu'il a fallu pour générer les nouveaux changements). À ce stade, vous pouvez actualiser la page chargée dans votre navigateur et les modifications apparaîtront sur le site.( Remarque: Jekyll ne remarque pas toujours lorsque de nouveaux fichiers sont créés, donc si vous actualisez votre navigateur et que la page n'est pas accessible, essayez de fermer Jekyll et de l'exécuter à nouveau, et la nouvelle page doit ensuite être incluse dans la version.)
J'ai recommandé certains outils que vous voudrez peut-être utiliser pour le développement. Aucun de ces éléments n'est nécessaire, ils pourraient bien que le travail sur le site soit plus facile.
Vous aurez besoin d'un navigateur Web, de préférence basé sur le chrome, comme Microsoft Edge (inclus avec Windows 10) ou Google Chrome, afin de tester toutes les modifications que vous apportez au site Web avant de les engager dans la base de code.
Si vous allez modifier le code source du site Web, vous aurez besoin d'un bon éditeur de texte. Je recommande d'utiliser le code Visual Studio car il est moderne, léger, multiplateforme et possède de nombreuses fonctionnalités que vous trouveriez généralement dans un IDE à part entière comme la mise en évidence de la syntaxe, l'achèvement du code, l'intellisense et un grand écosystème de plugins. Pour un développement de sites Web simples à l'aide de Vanilla HTML, CSS et JavaScript très occasionnel, il devrait fonctionner extrêmement bien hors de la boîte sans aucune modification de configuration ni plugins supplémentaires:
Ce n'est pas une nécessité, mais il peut être utile lors de la création d'articles de presse ou de contenu pour l'inclusion sur le site, car il ajoute automatiquement des caractères Unicode typographiques qui sont requis par nos normes de code (à documenter à un moment donné dans le futur), tels que des «citations intelligentes» , en tirets, etc. La version complète de Word est évidemment payante comme une partie de la suite de fonctions de bureau, mais il existe de nombreuses alternatives ouvertes, libres, gratuits.
Photoshop est ce que j'utilise pour le retouche photo, mais la plupart des éditeurs devraient faire un bon travail de tâches d'édition simples.
Ma vision de ce projet, à mesure qu'elle évolue, est qu'elle commencera à attirer une petite équipe de développeurs de développeurs et des contributeurs non techniques, de sorte qu'il devient un endroit idéal où ceux qui souhaitent se salir les mains avec un développement de sites Web open-source peuvent le faire. Le fait d'avoir plus de membres de l'équipe me libérera également pour travailler sur des ajouts de fonctionnalités, les principaux refacteurs et l'intégration de nouvelles technologies.
Finalement, ce serait formidable si j'avais le temps de développer un ensemble simple et sur mesure d'outils de création de style CMS qui permettraient à l'auteur des membres du club non technique et de soumettre des articles de presse et d'autres contenus d'inclusion sur le site avec une intervention technique minimale ou même nulle. Dans l'état actuel des choses, le site devra être mis à jour manuellement par des gens techniquement à l'esprit dans un avenir prévisible, mais j'espère que nous arriverons sur cette étape un jour.
Pour déployer le site de mise en scène ou de live, effectuez ce qui suit:
jekyll build_site dans la racine de votre dépôt, car c'est là que Jekyll place la sortie du processus de génération de site.beta.triumphmayflowerclub.com ou public_html , selon que vous vous déployez respectivement sur le site de mise en scène ou en direct.index.html et renommez updating.html vers index.html . Idéalement, ce serait une opération atomique pour minimiser le risque que quelqu'un ne soit pas en mesure de charger la page d'accueil, mais le délai dans lequel cela se produit et les relativement peu de personnes qui accèdent à notre site Web signifient que ce n'est pas vraiment un problème dans la pratique. Cela sera traité correctement une fois que nous commencerons à utiliser des actions GitHub pour un déploiement continu.index.html , et faites-les glisser vers le panneau de destination de droite.index.html du panneau source à la destination pour l'écraser. Le déploiement est maintenant terminé. Si vous avez besoin de vous mettre en contact avec moi (Andi Emma Davies-Wilcox - développeur principal), veuillez le faire à l'adresse e-mail suivante: [email protected]
Copyright © Stack-in-A-Box Software 2017–2021
Copyright © Triumph Mayflower Club 2005-2021
