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