triumphmayflowerclub.com

triumphmayflowerclub.com

2018年3月推出的Triumph Mayflower Club的新網站

鏈接•版本•路線圖•開髮指南•部署•聯繫•版權

Triumph Mayflower Club是一個致力於保存1950年代經典汽車The Mayflower的組織，英國汽車製造商Triumph。該俱樂部本身成立於1974年，並於2005年對萬維網進行了最初的限制，然後我（安迪，項目維護人員）於2017年被委託，在我的父母成為會員時從頭開始創建一個新網站。如果您有興趣閱讀有關汽車和俱樂部的更多信息，請單擊此處。

這個新網站是用Vanilla HTML5編寫的，用於文檔的標記，CSS3用於造型，少量JavaScript（ES6），並使用Jekyll作為靜態站點生成器構建，以最大程度地減少代碼重複。它旨在在任何主要的“常綠”瀏覽器（即基於鉻的Microsoft Edge，Google Chrome，Mozilla Firefox，Apple Safari或Opera），桌面或移動設備中運行。

當前生產網站的當前託管狀況僅適用於託管靜態HTML站點（是的，是利基俱樂部的預算限制），因此除了託管以外的任何內容並不是很可行允許更複雜的客戶端服務器解決方案。

目錄

• 鏈接
• 版本
  • 編號
  • 主要版本
• 路線圖
  • 內容
  • 特徵
  • 技術的
• 開髮指南
  • 先決條件
    • Microsoft Windows
    • Windows的git
    • GitHub設置
    • 本地存儲庫
      • 複製
      • 配置
    • 傑基
  • 本地運行網站
  • 推薦工具
    • 基於鉻的瀏覽器
    • Visual Studio代碼
    • Microsoft Word
    • Adobe Photoshop
  • 貢獻
• 部署
• 接觸
• 版權

鏈接

該網站的不同託管版本可以在以下位置找到，在以下位置，金絲雀服務器是基於最新master自動生成的github頁面網站，分期區域是直播網站的一個子域，當我們想測試新功能時，我們可以手動部署該網站，而生產網站是當前的公開開發網站（也是當前的公開可用網站）（也是部署到手動的）：

• ？金絲雀： https：//stack-in-a-box.github.io/triumphmayflowerclub.com
• ？登台： https：//beta.triumphmayflowerclub.com/
• 生產： https：//www.triumphmayflowerclub.com/

哦，只是為了樂趣，這就是舊網站的比較！

• ☠遺產： https：//legacy.triumphmayflowerclub.com/

版本

GitHub版本系統用於遞增標籤和發布版本的版本，並且是當前版本的真實性來源。在存儲庫的文件中沒有明確保存版本號。

由於該代碼庫是一個網站，因此顯然無需維護任何發布分支來進行Backport Fimes進行修復，因為只有一個實時網站將始終對其進行最新的更改。

當通過GitHub發布新版本的網站時，該網站將在運行時查詢特定的GitHub API端點，以獲取最新版本的版本編號和發布日期，然後將其顯示給每個頁面的最終用戶。

編號

SEMVER被用作網站的版本編號方案。根據以下類型的更改代碼庫，將主要，次要零件和補丁零件碰撞以釋放：

• 專業：對所使用的基本技術已更改的網站的完整或重大重寫，例如從基於jekyll的靜態網站轉移到聲明性react.js Web應用程序，甚至通過將ASP.NET Core Server應用程序引入組合中。該網站視覺效果的主要設計更新也將屬於這一類別。
• 未成年人：用於專業（即新聞價值）功能更新版本。我傾向於在俱樂部AGM之間研究一些主要的新功能（在功能或網站的新部分方面），因此這些更新的頻率通常也是每年的。
• 補丁：對於其他所有內容，包括但不一定限於：發布新聞文章，新內容，修復錯別字，修復錯誤和折斷鍊接，修復不正確的信息和較小的新功能。

主要版本

到目前為止，已經發布了兩個主要版本，下面列出了它們的主要更改，以及下一個主要更新的目前正在進行的哪些功能 - 自從使用該新網站的live以來，都可以在“發行版”頁面上找到。

• V1.0 - 新網站的啟動：
  • 全新的基於Jekyll的現代靜態網站，用於常綠桌面瀏覽器。
  • 從地面建造，完全取代了老化的遺產。
  • 視覺設計遵循模仿工作台的古怪skeuomormormormormormormormorphic語言。
  • 部分包括有關歷史，新聞，事件，照片，文檔，商店，聯繫人和鏈接。
  • 使用命令行的jekyll單步構建。
• v1.1 - 新聞檔案和完成視覺效果：
  • 一個檔案系統，用於組織我們不斷增長的新聞文章清單。
  • 完成並集成了通過v1.0發布不完整的圖形資產。
  • 將剩餘的內容添加到頁腳中，最初也用於V1.0。
  • 由安迪（Andi）和馬克·史密斯（Mark Smith）（宣傳官）創建的新Facebook頁面。
  • 新聞文章模板文檔，以幫助貢獻者提交新聞內容。
  • 可編輯成員為PDF，這是朝著完全在線註冊的一步。
  • 完整的GDPR合規性和支持新聞文章。
  • 2019年年度股東大會會議紀要。
• VNEXT - 僅會員區域（WIP）：
  • ...

路線圖

這是我想在未來開發中添加的東西的無盡清單，沒有特別的順序。顯然，這可能會發生變化，但應該很好地表明即將發生的事情。當他們完成後，我會打勾。我最終想進入一個我提供了足夠的工具的階段，以便大多數內容可以由其他人發布，以便我可以釋放主要努力添加新功能。

內容

• 俱樂部雜誌的每一期的完整檔案。
• 全面的技術文檔和指南集合。
• 歷史年度會議記錄提供。
• 高質量歷史照片的庫。
• 許多成員的照片要添加。

特徵

• 簡單的客戶驅動搜索。
• 僅會員區域。
• 論壇系統。
• 會員目錄。
• 移動優化的佈局。
• 定制CMS風格的創作工具。
• 電子商務集成（會員，備件等）。
• PDF和圖像的預先生成的OCR。
• 功能強大的服務器端搜索引擎。
• 新內容更新的推送通知。
• 郵寄列表註冊和交付系統。
• 開放圖集合以共享與社交媒體共享。
• 自動標題錨（出現在懸停）上。
• 次要功能：
  • 會員編號徽章。
  • 單擊圖片上的Zoom。
  • 社交媒體飼料小部件。
  • 共享鏈接。

技術的

• 降低文件而不是HTML的新新聞文章。
• 開發自動部署腳本。
• 連續交付（CD）使用github動作。
• 新穎的客戶端用戶驗證系統。
• 增強的語言，例如sass，typeScript，c♯。
• 從靜態站點生成到react.js應用。
• 遷移到客戶端服務器體系結構。
• 符合可訪問性標準。
• 資產和交付優化。
• 強制一致的瀏覽器緩存行為（如果可能的話）。
• 通過使用更多jekyll進行重構來減少代碼重複， “包括”和“佈局” 。
• 使此倉庫成為剛剛起步的Web開發人員砍伐牙齒的好地方。
• 通過將新開發的技術旋轉到獨立項目中來為開源做出貢獻。
• 通過HTTP而不是HTTP傳遞（僅在靜態站點時至關重要）。

開髮指南

我試圖以這樣的方式撰寫此讀數，以至於那些不一定熟悉編碼的人有一場戰鬥的機會，如果他們願意的話，就可以為網站的開發做出貢獻；例如俱樂部成員。因此，如果您已經是開發人員，那麼其中一些說明似乎有些過於厭食，因此您可能會跳過一些元素。相反，如果您不太精通技術，我建議您閱讀所有內容，如果您想能夠為我們提供幫助 - 順便說一句，您絕對歡迎您在這裡（如果有的話），那麼為什麼我試圖用指令盡可能明確，因此如果看起來不知所措，請不要感到或基！如果您想參與其中，請給我發送電子郵件，但可以開始手入門，我很樂意讓您前進。

先決條件

在大多數情況下，這些是上升和運行的最低要求。

Microsoft Windows

雖然不是嚴格的要求，但我個人就自己在Windows上開發，因此自然而然地，本指南是為在Windows PC上建立開發環境而量身定制的。如果您在Windows上，那麼我強烈建議您升級到Windows 10，如果您還沒有這樣做：

• 在此處獲取Windows 10： https：//www.microsoft.com/windows/get-windows-10
• 升級常見問題解答： https：//support.microsoft.com/help/12435/windows-10-10-upgrade-faq

假設您知道自己在做什麼，並且堅持使用Windows風格的線路結尾（ CR+LF ），我對使用MacOS或Linux開發的貢獻者沒有問題。如果您想在其他平台上開發的人們有足夠的需求，我將來可能會擴展這些說明 - 如果您是這樣的開發人員，請隨時提交拉動請求以使用上述說明更新讀書文件！

Windows的git

Git是所謂的版本控制系統（VCS），這是世界上每天使用數以百萬計的開發人員來管理其代碼庫。它提供了對源代碼存儲庫進行更改的全面歷史記錄，以及幫助多個開發人員從地球上任何地方遠程遠程遠程瀏覽的工具。當前，新的Triumph Mayflower網站正在使用GIT作為VC開發，以為我們的開發過程提供堅實的骨幹。請按照以下步驟安裝Windows：

1. 從其網站下載並運行Windows安裝程序的git：
   • https://www.gitforwindows.org/
2. 在“調整路徑環境”頁面上，選擇“從命令行，也從第三方軟件中選擇Git” 。
3. 在“選擇HTTPS傳輸後端”頁面上，選擇“使用OpenSSL庫” 。
4. 在“配置線路結束轉換”頁面上，選擇“結帳as-is，commit as-is” 。
5. 完成設置嚮導的其餘部分。

GitHub設置

該網站的源代碼託管在GitHub（您當前正在閱讀的網站上）上。為了下載和更改源代碼，您需要註冊GitHub帳戶：

1. 轉到https://www.github.com/。
2. 在GitHub主頁上，選擇一個用戶名並輸入電子郵件地址和密碼，然後單擊“註冊GitHub” 。
3. 按照下一頁上的說明驗證您的帳戶，然後單擊“加入免費計劃” 。
4. 在“歡迎到GitHub”頁面上輸入最適用的選項。
5. 檢查您的電子郵件中是否有驗證電子郵件（確保它不在您的“垃圾”/“垃圾郵件”文件夾中），然後單擊“驗證電子郵件地址”鏈接。
6. 加載git bash並運行以下命令 - 輸入空的密碼詞很好。
   • ssh-keygen
7. 通過運行：複製公共SSH密鑰文件的內容：
   • cat ~/.ssh/id_rsa.pub > /dev/clipboard
8. 返回GitHub網站，單擊右上角的用戶圖標，然後單擊“設置” 。
9. 在左側菜單上，單擊“ SSH和GPG密鑰”，然後單擊“新SSH鍵” 。
10. 將剪貼板的內容粘貼到“鍵”字段中，然後單擊“添加SSH鍵” 。
11. 現在，當您通過上述客戶與Github通信時，您的Git Bash客戶端將自動對您進行身份驗證 - 換句話說，每次嘗試與之互動時，您都不需要輸入用戶名和密碼！

本地存儲庫

對於那些不熟悉的人，簡稱GIT “存儲庫”或“ repo”是一組源代碼文件（通常存儲在集中式的“遠程”服務器上）以及特定的由特定的Git管理的git管理的元數據文件，其中包含有關遠程服務器可以在Internet上找到遠程服務器的信息（或本地網絡）的各種階段，並且在所有階段中都有特定的特定範圍，這些階段是所有的變化，這些都可以更改為所有內容。製造的，誰製作了它們，以及如何將它們集成到臨時“分支”的主要代碼流中，開發人員可以在代碼的孤立副本上工作，而無需干擾其他在同一代碼庫上工作的開發人員。

複製

為了更改網站並查看這些更改的影響，您需要將源代碼下載到所謂的“克隆”操作中。這將將源代碼存儲庫的副本下載到您的文件系統中，並允許它通過git進行管理：

1. 創建文件系統某個地方的目錄（文件夾），而沒有路徑中任何空格字符（開發人員之間的常見約定是C:dev ;我個人將存儲庫保留在C:DevelopmentRepositories中。
2. 加載git bash並輸入以下命令，將工作目錄更改為新創建的文件夾（假設您選擇C:dev ）：
   • cd /c/dev
3. 通過輸入以下命令來克隆網站存儲庫：
   • git clone [email protected]:Stack-in-a-box/triumphmayflowerclub.com.git
4. 當被問及是否要繼續連接到GitHub時，輸入yes並點擊[Enter] 。
5. 克隆操作完成後，輸入以下命令將工作目錄更改為本地存儲庫的根目錄：
   • cd triumphmayflowerclub.com

配置

當您下載了存儲庫的本地副本時，您需要配置git，以使您自動將您視為您所做的任何代碼的作者：

1. 通過運行以下命令來設置您的名字，並用您的名字和姓氏替換<name> ：
   • git config --local user.name "<name>"
2. 通過運行以下命令來設置您的電子郵件地址，然後用您用來註冊GitHub帳戶的電子郵件地址替換<email> （您不需要電子郵件地址的任何一側的引號，例如在上一步中設置您的名字，因為它不包含任何空間）：
   • git config --local user.email <email>

傑基

傑基爾（Jekyll）就是所謂的“靜態站點建設者” 。它使我們可以通過“考慮”頁面的常用部分（例如標題圖像，導航欄，頁面頁腳，主要樣式等）中的單個文件來減少整個代碼庫中的重複代碼量，這些部分簡單地在特定頁面中引用；然後，當jekyll運行到“構建”站點時，它將將貨的代碼重新插入引用它的每個源文件中，創建一個重建的一組文件集，然後將其部署到實時服務器並在Web瀏覽器中打開。

（注意：在撰寫本文時，即2020年7月，Jekyll並沒有完全支持WSL 2，因為它沒有接收所有文件系統更新事件，這些文件是jekyll serve功能所需的所有文件系統更新事件，該事件允許在源文件更改時自動觸發重建，因此請遵守WSL 1的時間。

1. 通過在任務欄上的搜索框中搜索“ PowerShell” （假設Windows 10），然後按[Shift + Enter]作為管理員運行它，以打開高架PowerShell實例。
2. 通過在提示這樣做時在高架PowerShell提示中運行以下命令，啟用Windows子系統的Linux（WSL）功能：
   • Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
3. 打開Microsoft商店，搜索Ubuntu應用程序，安裝它，然後在安裝後單擊“啟動” 。
4. 該應用程序一旦打開，將需要幾分鐘才能執行一些初始的下面設置…
5. 提示時，輸入處理WSL時使用的用戶名和密碼（不必與Windows登錄憑據相同）。
6. 在bash提示符上，看起來應該像<username>@<machine>:~$ ，運行以下命令以更新可以安裝的軟件包列表，並從提示中安裝它們以安裝它們（在提示時輸入UNIX密碼）。這將需要一段時間才能完成：
   • sudo apt-get update -y && sudo apt-get upgrade -y
7. 通過運行以下4個命令來安裝Ruby：
   • sudo apt-add-repository ppa:brightbox/ruby-ng （按[Enter]確認）
   • sudo apt-get update
   • sudo apt-get install ruby2.7 ruby2.7-dev build-essential （當詢問時輸入y” ）
   • sudo gem update
8. 最後，通過運行以下操作來安裝jekyll：
   • sudo gem install jekyll

本地運行網站

Jekyll在Ubuntu終端會話中完成安裝後，並假設您選擇C:dev作為存儲存儲庫的位置，請執行以下步驟來啟動本地開發服務器實例：

1. 通過輸入以下命令將工作目錄更改為本地存儲庫的根目錄：
   • cd /mnt/c/dev/triumphmayflowerclub.com
2. 在“觀察”模式下運行jekyll，以便每當源文件更改時重建網站，通過發出以下命令：
   • jekyll serve
3. 等待一會兒以進行初始構建，然後Server running... press ctrl-c to stop.將顯示。此時，打開Web瀏覽器並導航到http：// localhost：4000/以查看從您的本地源代碼副本本地運行的網站。
4. 每當您更改文件並保存文件時，Jekyll都會對此進行拾取，並自動觸發新的構建。要查看您在本地託管站點中的更改，請查看終端並等待重生完成（ ...done in x seconds.將顯示，其中x是生成新更改所需的秒數）。此時，您可以刷新加載到瀏覽器中的頁面，並且更改將顯示在網站上。

（注意： Jekyll並不總是注意到何時創建全新文件，因此，如果刷新瀏覽器並且該頁面無法訪問，請嘗試關閉Jekyll並再次運行它，然後將新頁麵包含在構建中。）

推薦工具

我推薦了一些您可能要用於開發的工具。這些都不需要，它們可能只是使在網站上的工作更加容易。

基於鉻的瀏覽器

您需要一個Web瀏覽器，最好是基於鉻的網絡瀏覽器，例如Microsoft Edge（包括Windows 10）或Google Chrome，以便在將其投入到代碼庫之前對網站進行測試。

Visual Studio代碼

如果您要修改網站的源代碼，則需要一個好的文本編輯器。我建議使用Visual Studio代碼作為現代，輕巧，跨平台，並且具有許多功能，您通常會在諸如語法突出顯示，代碼完成，IntelliSense和大型插件生態系統中找到這些功能。為了使用Vanilla HTML，CSS和偶爾的JavaScript進行簡單的網站開發，它應該可以很好地運行，而無需更改任何配置或其他插件：

1. 從其網站下載並運行Visual Studio代碼安裝程序：
   • https://code.visualstudio.com/
2. 繼續穿過安裝嚮導直到結束。默認選項很好。

Microsoft Word

不是必需的，但是在創作新聞文章或內容以將其包含在網站上時，它會很有用，因為它自動添加了我們的代碼標準所需的印刷統一字符（將來要記錄在某個時候），例如“智能報價” ，En dashes等。顯然，Word的完整版本是付費的軟件，可以作為Office Suite of Applications of Applications of Applications of Applications，但有很多不錯的功能。

Adobe Photoshop

Photoshop是我用於照片編輯的方法，但是大多數編輯都應該在簡單的編輯任務方面做得很好。

貢獻

隨著它的發展，我對這個項目的願景是，它將開始吸引一個小型的開發人員和非技術貢獻者團隊，以便它成為一個希望通過一些開源網站開發來弄髒手的人，可以這樣做。擁有更多的團隊成員也將使我釋放我從事功能添加，主要的重構和集成新技術的工作。

最終，如果我有時間開發一套簡單，定制的CMS風格的創作工具，這將是很棒的，這些工具將允許非技術俱樂部成員作者作者，並提交新聞文章和其他內容，以最少甚至零技術干預措施將其納入該網站。就目前而言，該網站將需要在可預見的未來通過技術意識的人手動更新，但希望有一天我們將進入這個階段。

部署

要部署分期或實時站點，請執行以下操作：

1. 確保您的本地存儲庫處於乾淨狀態，並檢查要部署的更改。
2. 在Ubuntu中發出以下命令以構建源代碼：
   • jekyll build
3. 從Microsoft Store下載並安裝WINSCP。
4. 提示時，將以下詳細信息輸入到“會話”窗格中：
   • 文件協議- SFTP
   • 主機名- triumphmayflowerclub.com
   • 端口號- 22
   • 用戶名- （從網站管理員獲取）
   • 密碼- （從網站管理員獲取）
5. 當Winscp詢問您是否還可以連接到未知服務器並將其主機密鑰添加到緩存中時，請說“是” 。
6. 在左側面板中，導航到您存儲庫根的_site目錄，因為這是Jekyll從站點生成過程中輸出輸出的地方。
7. 在右側面板中，根據您是分別部署到分段還是實時站點，請訪問beta.triumphmayflowerclub.com或public_html子目錄。
8. 在右側面板中，刪除index.html並重命名updating.html為index.html 。理想情況下，這將是一種原子操作，以最大程度地減少某人無法加載主頁的風險，但是發生這種情況的時間表，而訪問我們網站的相對較少的人則意味著這在實踐中並不是一個問題。一旦我們開始使用github操作進行連續部署，這將正確解決。
9. 除了index.html外，選擇左側源面板中的所有文件，然後將其拖動到右側目標面板。
10. 當提示開始文件傳輸時，單擊“是” 。
11. 當要求確認覆蓋是否還可以時，請單擊“是”按鈕右側的小箭頭，然後單擊“僅較新” 。這將開始轉移。
12. 轉移完成後，將index.html從源面板複製到目標一個以覆蓋它。部署現已完成。

接觸

如果您需要與我接觸（Andi Emma Davies-Wilcox - 首席開發人員），請在以下電子郵件地址上進行：[email protected]

版權

版權所有©stack-in-a-box軟件2017–2021

版權所有©Triumph Mayflower Club 2005-2021