在 Novvum,我们是一家软件开发公司,专注于 React、GraphQL、TypeScript、Node 等等。因此,我们喜欢使用 Gatsby 等现代技术进行建筑。遗憾的是,到目前为止,我们的网站并没有遵循这一趋势。

几个月前,我们决定是时候对我们的网站进行急需的升级了。我们一直为为客户设计和构建尖端的 Web 应用程序而感到自豪,但我们并没有对我们的网站进行太多考虑,为了简单起见,我们仍在使用拖放编辑器。为什么?我们很想说我们只是忙于为我们的客户构建很棒的软件,这部分是正确的,但我们也不愿意升级,因为我们需要一个可以由我们团队的非技术成员编辑和设计的网站,同时仍然提供出色的性能和功能。

我们的要求和动机

最后,在从合作伙伴和朋友那里听说我们的网站无法反映我们的工作后,我们决定是时候冒险升级我们所有的网站了。当我们着手进行这个多网站重建时,我们对项目的代码库和维护工作流程有一些关键要求。

• 组件、配置和功能需要可在我们公司的所有站点中重复使用,并且可供未来站点轻松访问。

• 登陆页面

• 博客

• 内部文档

• 客户端/审核平台

• 每个站点都需要在不影响其他客户端的情况下自行部署、可编辑和可扩展

• 博客、审计和案例研究等内容需要由非技术团队成员轻松编辑,而无需深入代码库

• 所有站点的代码/逻辑都应该在一个单一的monorepo中可用,而内容(markdown/MDX)文件应该单独可用并从核心逻辑中抽象出来。

如您所知,大多数要求旨在简化跨不同站点组合功能的体验,同时仍保持每个域及其部署之间的关注点分离。我们还希望将非技术内容编辑与功能开发分开。为了解决这个问题,我们结合使用了以下工具和技术。我不会深入研究它们,但它会让您对我们的配置有一个不错的了解。

• 盖茨比主题

• 纱线工作区

• 个 Git 子模块

• CI/CD 与 Gitlab

在本文中,我将深入探讨 Gatsby 主题的构成,以及我们如何在简化所有网站的开发工作流程的同时满足这些要求。

盖茨比主题作为构建块

如果您还没有听说过 Gatsby,它是一个超快速的静态站点生成器,它允许您使用 GraphQL 来查询您站点的配置、资产和降价文件。它具有极高的性能和可定制性。 Gatsby 非常适合网站、博客、电子商务和其他以内容为中心的网站,因为包含内容的降价文件可以很容易地由技术和非技术团队成员编辑。此外,Gatsby 提供 Gatsby 主题,允许将站点功能打包为独立模块,以便轻松重用功能。所有默认配置都保存在 NPM 包中,而不是为您构建的每个网站使用启动器或模板,该包可以在独立项目之间更新和共享。这有助于我们在我们的主要网站/博客、客户门户和文档网站上提供一致但适应性强的体验。对基础主题的任何更改都将在所有当前和未来的网站上更新。提供无缝的开发工作流程。

以下是架构的映射方式:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--6oYqqGeP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co /2yWrY80/大黑暗地图.png)

该图概述了我们如何使用 Gatsby 主题在我们的网站套件中共享组件和功能。

base-theme:包含所有 Novvum 站点的许多核心功能。这包括主题、演示组件、实用程序等。将此视为更基本的构建块。

blog-theme:博客主题就是它听起来的样子,是所有博客特定功能的主题。这包括博客特定的组件和路由信息。

wiki-theme:这个主题特定于我们的内部文档站点,并处理显示内部文档所需的路由和组件。下面有更多关于这个主题及其抽象的动机。

auth-theme:更有趣的主题之一,该主题包括所有必要的身份验证模块。将其插入,您部署的网站具有身份验证。

作曲主题

最初,很容易假设 Gatsby 主题最适合用于样式和组件。然而,通过一些创意,盖茨比主题可以提供一种很好的方式来共享几乎任何东西的配置、功能和逻辑。这与仅部署单个 NPM 模块没有太大区别。

因此,我不想深入研究更基本的主题用例,例如使用它们来共享 UI 和组件,而是想快速回顾一下我们的auth-theme(绿色块)当前如何用于扩展我们的客户端门户和内部文档站点。此外,深入了解主题如何为以markdown和mdx编写的内容文件提供出色的抽象。这是我们以创造性的方式解决我们的要求的两种方式,可能会为您提供一些灵感。

共享逻辑+ui

有时共享站点逻辑可能会很痛苦,甚至可能需要跨网站的冗余代码。但是,通过使用基本的 Gatsby 主题概念,我们可以在所有站点之间共享我们的身份验证模块。

通过简单地将auth-theme添加到Client Portal和Internal Documentation``gatsby-configs,我们可以使用我们预先打包的一致身份验证模块扩展这两个站点。在这种情况下,为了简单起见,我们使用 Netlify Identity,但对于其他更自定义的实现,这个想法不会改变。在我们的案例中,auth 主题` 包括用于用户管理、登录模式、私有路由和其他关键身份验证功能的辅助功能。现在,如果我们想在任何其他网站上包含身份验证,我们只需将该主题添加到配置中,然后我们就可以开始运行了。这与基本 Gatsby 主题中的样式主题和组件相同。

从代码中抽象出内容

Gatsby Themes 的另一个强大功能是能够使用主题扩展主题。您可能已经注意到上面的blog-theme和wiki-theme模块内的蓝色块。那个蓝色块是我们的base-theme,它为我们所有的网站(包括内部文档和博客)提供基本的主题和组件。这可能看起来有点像主题概念,但让我解释一下我们的思考过程:

如果您还记得上面的内容,我们的要求之一是非技术团队成员能够编辑和添加博客文章和文档等内容,而无需访问整个代码库。

好吧,通过创建blog-theme或wiki-theme,我们可以将所有博客和文档逻辑从最终部署的站点中抽象出来。下面看一下最终内部文档站点的文件结构和gatsby-config文件:

├── public ├── content (all .md & .mdx files) | ├── assets | ├── guides | ├── index.mdx | └── projects ├── gatsby-config.js ├── netlify.toml ├── package.json ├── README.md

哇!没有src目录,这意味着没有 React 组件!这之所以成为可能,是因为所有这些代码都位于单独的wiki-theme中。这使得 repo 变得简单,同时仅公开了content文件夹中的降价文件。现在,内容创建者和非技术团队成员可以快速添加和编辑内容,而无需了解网站的工作原理。主题甚至可以处理路由,因此新的markdown(在我们的例子中为mdx)文件和文件夹会自动创建可以正确显示信息的新路由。可以在gatsby-config文件中找到对主题的唯一引用。

module.exports = { __experimentalThemes: [ { resolve: "@novvum/gatsby-theme-wiki" } ],

当然,达到这种抽象级别的另一种选择可能是使用像 Contentful 这样的 CMS。但是,对于中小型团队来说,这很有效。

好的,你如何一起处理所有这些抽象?

好吧,这就是 monorepo、子模块和 Gitlab CI/CD 的组合。使用当前设置,您可以通过几种方式与代码库进行交互。

1.您可以直接在个人reposblog、internal documentation中编辑内容

2. 您可以直接在各个存储库中编辑站点功能。

3. 您可以通过我们的 master monorepo 统一编辑所有代码库。这个 monorepo 包括每个部署的sites以及所有themes的子模块。这是文件夹结构:

├── clients | ├── audit (submodule) | ├── blog (submodule) | ├── web (submodule) | └── documentation (submodule) ├── themes | ├── base | ├── blog | ├── gatsby-theme-auth | └── gatsby-theme-wiki ├── lerna.json ├── package.json ├── README.md

这个 monorepo 提供了一个超级用户工作流程来添加、编辑和更改每个单独的主题和站点,同时仍然保持关注点分离。如果只首选编辑其中一个客户端,则可以克隆并在特定站点的存储库中工作,而无需访问底层主题。这提供了很多灵活性!

太好了,那现在怎么办?

现在,我们为 Novvum 网站套件提供了一个灵活、可扩展且强大的底层架构,我们的团队相信我们将能够轻松地迭代、协作和扩展我们的在线业务,而不会失去一致性。需要一个新网站?将它添加到 monorepo,扩展一个主题,你就可以运行了!

如果您有兴趣了解有关本文中任何基本概念的更多信息,我很乐意在我的下一篇博客中深入了解详细信息。或者,如果您对如何改进这一点有任何想法,我们很乐意听取您的意见。

要查看我们的新家,请访问novvum.io