triumphmayflowerclub.com
ved Mark Smith's email address
TriumphMayFlowerclub.com 
Der Triumph Mayflower Club ist eine Organisation, die sich der Erhaltung des klassischen Autos der 1950er Jahre, der Mayflower, durch den britischen Automobilhersteller Triumph gewidmet hat. Der Club selbst bildete sich 1974 und machte 2005 seinen ersten, begrenzten Einstieg in das World Wide Web, und dann wurde ich (Andi, Project Wartering) 2017 in Auftrag gegeben, um ihnen eine neue Website von Grund auf neu zu erstellen, als meine Eltern Mitglieder wurden. Klicken Sie hier, wenn Sie mehr über das Auto und den Club lesen möchten.
Diese neue Website ist in Vanilla HTML5 für das Markup der Dokumente, CSS3 für Styling, eine kleine Menge JavaScript (ES6) geschrieben und wird mit Jekyll als statischer Site -Generator erstellt, um die Code -Duplikation zu minimieren. Es wurde so konzipiert, dass es in einem wichtigen „Evergreen“ -Browser (IE Chrom-basierter Microsoft Edge, Google Chrome, Mozilla Firefox, Apple Safari oder Opera), Desktop oder Mobilgeräte ausgeführt wurde.
Die aktuelle Hosting-Situation für die Produktionsseite eignet sich nur sehr für die Hosting einer statischen HTML-Website (yay, Budgetbeschränkungen eines Nischenclubs). Daher ist es nicht wirklich praktisch, etwas anderes zu hosten, beispielsweise eine ASP.Ne-Kern-Serveranwendung, die auf dem Host-Host-Host-Host-Host-Host-Host-Host-Host-Host-Host-Host-Host-Host-Host-Host-Host-Dokument. um eine komplexere Client-Server-Lösung zu ermöglichen.
Die verschiedenen gehosteten Versionen der Website finden Sie an den folgenden Standorten, an denen der Kanarische Server die automatisch erzeugte Github-Seiten-Site ist, die auf dem neuesten master basiert. Der Staging-Bereich ist ein Subdomain der Live-Website, das wir manuell bereitstellen möchten, wenn wir neue Funktionen testen möchten, und die Produktionsseite ist die aktuelle öffentlich zugängliche Website (auch als manuell bereitgestellt):
Oh, und nur zum Spaß, so sah die alte Website zum Vergleich aus!
Das GitHub Releases -System wird verwendet, um die Version von Releases zu erhöhen, zu taggen und zu veröffentlichen, und ist die einzige Quelle der Wahrheit für die aktuelle Version der Website. In den Dateien des Repos werden keine Versionsnummern ausdrücklich aufgenommen.
Da es sich bei dieser Codebasis um eine Website handelt, müssen offensichtlich keine Release -Filialen für Backport -Korrekturen beibehalten werden, da es immer nur eine Live -Website geben wird, auf der immer die neuesten Änderungen vorhanden sind.
Wenn eine neue Version der Site über GitHub veröffentlicht wird, wird die Website zur Laufzeit einen bestimmten GitHub -API -Endpunkt abfragt, um sowohl die Versionsnummer des neuesten Version als auch die Veröffentlichung des Datums der Veröffentlichung des Endbenutzers auf jeder Seite zu veröffentlichen.
Semver wird, wenn auch locker, als Versionsnummerierungsschema für die Website verwendet. Die Haupt- , Neben- und Patch -Teile werden gemäß den folgenden Änderungen der Codebasis für eine Veröffentlichung gestoßen:
Bisher wurden zwei wichtige Veröffentlichungen veröffentlicht, die nachstehend mit ihren wichtigsten Änderungen aufgeführt sind und welche Funktionen derzeit für das nächste große Update im Gange sind. Jede historische Veröffentlichung, die jemals veröffentlicht wurde, seit sie mit dieser neuen Site mit dieser neuen Website gelebt haben, finden Sie auf der Seite der Veröffentlichungen:
Dies ist eine nicht exexhustive Liste der Dinge, die ich in einer zukünftigen Entwicklung in keiner bestimmten Reihenfolge hinzufügen möchte. Dies kann sich offensichtlich ändern, aber es sollte ein guter Hinweis darauf sein, was kommen wird. Ich werde die Dinge so ankreuzen, wenn sie fertig werden. Ich möchte irgendwann zu einer Phase gelangen, in der ich genug Werkzeuge bereitgestellt habe, damit die meisten Inhalte von anderen Personen veröffentlicht werden können, damit ich frei bin, hauptsächlich auf dem Hinzufügen neuer Funktionen zu arbeiten.
Ich habe versucht, diese Readme so zu schreiben, dass diejenigen, die nicht unbedingt mit der Codierung vertraut sind, eine kämpfende Chance haben, zur Entwicklung der Website beizutragen, wenn sie so geneigt sind. wie Clubmitglieder. Wenn Sie bereits Entwickler sind, können einige dieser Anweisungen etwas übermäßig vielverbose erscheinen, sodass Sie wahrscheinlich einige Elemente überspringen können. Wenn Sie nicht zu technisch versiert sind, empfehle ich, alles zu lesen, wenn Sie in der Lage sein möchten, uns mit der Website zu helfen. Übrigens sind Sie hier absolut willkommen, was auch immer die Erfahrung ist (falls vorhanden). Deshalb habe ich versucht, mit Anweisungen so explizit wie möglich zu sein. Senden Sie mir eine E -Mail, wenn Sie sich engagieren möchten, aber es könnte sich um einen Hand beginnen, und ich würde mich freuen, Sie zum Laufen zu bringen.
Dies sind größtenteils die Anforderungen an das Bare-Minimum für das Aufstehen.
Obwohl ich nicht ausschließlich erforderlich ist, entwickle ich mich persönlich selbst auf Windows, so dass dieser Leitfaden natürlich darauf zugeschnitten ist, eine Entwicklungsumgebung auf einem Windows -PC festzulegen. Wenn Sie unter Windows sind , empfehle ich das Upgrade auf Windows 10, wenn Sie dies noch nicht getan haben:
Ich habe kein Problem damit, dass sich die Mitwirkenden mit MacOS oder Linux entwickeln, vorausgesetzt, Sie wissen, was Sie tun, und halten sich an die Windows-Line-Endungen ( CR+LF ). Ich kann diese Anweisungen in Zukunft erweitern, wenn genügend Nachfrage nach Menschen besteht, die sich auf anderen Plattformen entwickeln möchten. Senden Sie sich gerne eine Pull -Anfrage, um die Readme mit diesen Anweisungen zu aktualisieren, wenn Sie ein solcher Entwickler sind!
Git ist das, was als Versionskontrollsystem (VCS) bezeichnet wird, und es ist das, was Millionen von Entwicklern auf der ganzen Welt über die Verwaltung ihrer Codebasen auf der ganzen Welt übertragen werden. Es bietet eine umfassende Vorgeschichte von Änderungen am Quellcode -Repository sowie an Tools, mit denen mehrere Entwickler an der gleichen Codebasis aus potenziell überall auf dem Planeten zusammenarbeiten können. Die neue Website von Triumph Mayflower wird derzeit mit Git als VCS entwickelt, um ein solides Rückgrat für unseren Entwicklungsprozess zu bieten. Befolgen Sie diese Schritte, um Git für Windows zu installieren:
Der Quellcode der Website wird auf GitHub gehostet (auf der Website, auf der Sie dies derzeit lesen). Um den Quellcode herunterzuladen und zu ändern, müssen Sie sich für ein GitHub-Konto anmelden:
ssh-keygencat ~/.ssh/id_rsa.pub > /dev/clipboardFür diejenigen Unbekannte ist ein Git "Repository" oder "Repo" zusammen eine Reihe von Quellcode-Dateien (normalerweise irgendwo auf einem zentralen "Remote" -Server gespeichert) sowie spezifische Git-verwaltete Metadaten-Dateien, die Informationen darüber enthalten, wo der Remote-Server im Internet (oder in den gesamten Konfiguration, in dem sie jeweils zu verändern waren, wie sich der Remote-Server anhand dessen. Made, wer sie gemacht hat und wie sie wieder in den primären Codefluss aus temporären „Zweigen“ integriert wurden, in dem Entwickler an isolierten Kopien des Codes arbeiten können, ohne dass andere Entwickler an derselben Codebasis arbeiten.
Um Änderungen an der Website vorzunehmen und zu sehen, wie sich diese Änderungen auswirken, müssen Sie den Quellcode in Ihren lokalen Computer in einer sogenannten "Klon" -Operation herunterladen. Dadurch wird eine Kopie des Quellcode -Repositorys in Ihr Dateisystem heruntergeladen und es von Git verwaltet:
C:dev ; ich habe meine Repos persönlich in C:DevelopmentRepositories aufbewahrt).C:dev entschieden):cd /c/devgit clone [email protected]:Stack-in-a-box/triumphmayflowerclub.com.gityes ein und klicken Sie auf [ENTER] .cd triumphmayflowerclub.comWenn Sie eine lokale Kopie des Repository heruntergeladen haben, müssen Sie GIT so konfigurieren, dass Sie automatisch als Autor von Codesänderungen, die Sie vornehmen, kreditiert:
<name> durch Ihren ersten und Nachnamen ersetzen:git config --local user.name "<name>"<email> durch die E -Mail -Adresse ersetzen, mit der Sie Ihr Github -Konto registriert haben (Sie benötigen keine Seite der E -Mail -Adresse, wie bei der Festlegung Ihres Namens im vorherigen Schritt, da sie keine Leerzeichen enthalten):git config --local user.email <email>Jekyll ist der sogenannte „statische Site Builder“ . Es ermöglicht uns, die Menge an wiederholten Code in der gesamten Codebasis zu reduzieren, indem wir die häufig verwendeten Teile einer Seite (z. B. das Titelbild, Navigationsleiste, Seitenfußzeile, Primärstile usw.) in einzelne Dateien „berücksichtigen“, auf die einfach auf bestimmten Seiten verwiesen wird. Wenn Jekyll dann ausgeführt wird, um die Website zu "erstellen" , wird der faktorisierte Code in jede der Quelldateien, die auf sie verweisen, erneut eingeleitet und ein rekonstruierter Satz von Dateien erstellt, die dann auf dem Live-Server bereitgestellt und in einem Webbrowser geöffnet werden können.
( HINWEIS: Zum Zeitpunkt des Schreibens, der Juli 2020 ist, unterstützt Jekyll nicht vollständig WSL 2, da nicht alle Datei-System-Update-Ereignisse empfangen werden, die für die Funktion jekyll serve , die automatisch den Wiederaufbau ermöglicht, wenn sich Quelldateien ändern.
Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linuxbash -Eingabeaufforderung, die so etwas wie <username>@<machine>:~$ aussehen sollte, den folgenden Befehl aus, um die Liste der Pakete zu aktualisieren, die installiert werden können, und Repositories, um sie aus zu installieren (geben Sie Ihr UNIX -Passwort ein, wenn Sie aufgefordert werden). Dies wird eine Weile dauern, bis es fertig ist:sudo apt-get update -y && sudo apt-get upgrade -ysudo apt-add-repository ppa:brightbox/ruby-ng (Drücken Sie [ENTER] , um zu bestätigen)sudo apt-get updatesudo apt-get install ruby2.7 ruby2.7-dev build-essential (Geben Sie "y" ein, wenn Sie gefragt werden)sudo gem updatesudo gem install jekyll Sobald Jekyll in einer Ubuntu-Terminalsitzung die Installation fertiggestellt hat und angenommen wird, dass Sie C:dev als Standort zum Speichern Ihrer Repositories ausgewählt haben, führen Sie die folgenden Schritte aus, um eine lokale Entwicklungsserverinstanz zu spinnen:
cd /mnt/c/dev/triumphmayflowerclub.comjekyll serveServer running... press ctrl-c to stop. wird angezeigt. Öffnen Sie zu diesem Zeitpunkt einen Webbrowser und navigieren Sie zu http: // localhost: 4000/, um die Website aus Ihrer lokalen Kopie des Quellcodes aus zu sehen....done in x seconds. Es wird gezeigt, wo x die Anzahl der Sekunden ist, die es brauchte, um die neuen Änderungen zu generieren). An diesem Punkt können Sie die in Ihrem Browser geladene Seite aktualisieren und die Änderungen werden auf der Website angezeigt.( HINWEIS: Jekyll ist nicht immer bemerkt, wann brandneue Dateien erstellt werden. Wenn Sie also Ihren Browser aktualisieren und die Seite nicht zugänglich ist, versuchen Sie, Jekyll zu schließen und erneut auszuführen, und die neue Seite sollte dann im Build enthalten sein.)
Ich habe einige Tools empfohlen, die Sie für die Entwicklung verwenden möchten. Nichts davon ist erforderlich, sie können einfach die Arbeit auf der Website erleichtern.
Sie benötigen einen Webbrowser, vorzugsweise einen Chrom-basierten, z.
Wenn Sie den Quellcode der Website ändern möchten, benötigen Sie einen guten Texteditor. Ich empfehle, Visual Studio Code zu verwenden, da es modern, leichte, plattformübergreifend ist, und bietet viele Funktionen, die Sie normalerweise in einer vollwertigen IDE wie Syntax-Highlight, Code-Abschluss, IntelliSense und einem großen Ökosystem von Plugins finden. Für eine einfache Website -Entwicklung mit Vanille -HTML, CSS und sehr gelegentlichem JavaScript sollte es ohne Konfigurationsänderungen oder zusätzliche Plugins sehr gut funktionieren:
Keine Notwendigkeit, aber es kann nützlich sein, wenn Nachrichtenartikel oder Inhalte für die Aufnahme auf der Website erstellt werden, da es automatisch typografische Unicode -Zeichen hinzufügt, die von unseren Code-Standards erforderlich sind (um irgendwann in Zukunft dokumentiert zu werden), wie z.
Photoshop ist das, was ich zur Fotobearbeitung verwende, aber die meisten Redakteure sollten gute Arbeit bei einfachen Bearbeitungsaufgaben erledigen.
Meine Vision für dieses Projekt ist, dass es sich weiterentwickelt, dass es ein kleines Kernteam von Entwicklern und nicht-technischen Mitwirkenden anzieht, so dass es ein großartiger Ort ist, an dem diejenigen, die sich mit einer Open-Source-Website-Entwicklung schmutzig machen wollen, die Hände schmutzig machen wollen. Mehr Teammitglieder werden mich auch befreien, um an Feature -Ergänzungen, wichtigen Refaktoren zu arbeiten und neue Technologien zu integrieren.
Schließlich wäre es großartig, wenn ich Zeit hätte, ein einfaches, maßgeschneidertes Satz von Autoring-Tools im CMS-Stil zu entwickeln, mit denen nicht-technische Clubmitglieder autorisieren und Nachrichtenartikel und andere Inhalte für die Aufnahme auf der Website mit minimalem oder gar keine technischen Intervention einreichen würden. Auf absehbare Zeit muss die Website auf absehbare Zeit manuell von technisch gesinnten Menschen aktualisieren, aber hoffentlich kommen wir eines Tages in diese Phase.
Um entweder die Staging- oder Live -Site bereitzustellen, führen Sie Folgendes durch:
jekyll build_site in der Wurzel Ihres Repo, da Jekyll die Ausgabe aus dem Prozess der Site-Erzeugung stellt.beta.triumphmayflowerclub.com oder zum Unterverzeichnis public_html , je nachdem, ob Sie auf der Staging- oder Live-Site eingesetzt werden.index.html und benennen Sie updating.html in index.html um. Im Idealfall wäre dies ein atomarer Betrieb, um das Risiko zu minimieren, dass jemand die Homepage nicht laden kann, aber der Zeitrahmen, in dem dies geschieht, und die relativ wenigen Personen, die auf unsere Website zugreifen, bedeuten, dass dies in der Praxis nicht wirklich ein Problem ist. Dies wird ordnungsgemäß behandelt, sobald wir mit GitHub -Aktionen für die kontinuierliche Bereitstellung beginnen.index.html aus und ziehen Sie sie zum rechten Zielfeld.index.html vom Quellfeld zum Ziel One, um es zu überschreiben. Die Bereitstellung ist jetzt abgeschlossen. Wenn Sie mit mir (Andi Emma Davies-Wilcox-Lead Developer) in die folgende E-Mail-Adresse eingehen müssen: [email protected]
Copyright © Stack-in-a-Box-Software 2017–2021
Copyright © Triumph Mayflower Club 2005-2021
