Jamstack for Newbies: 轻松创建快速和安全的网站

Jamstack是现代Web开发架构。

它使开发人员能够创建安全、可扩展和易于管理的Web应用程序。

在本文中，我们将探讨Jamstack的基础知识。它将帮助他们创建轻量级和安全的网站。

让我们开始吧。

Jamstack是什么？

Jamstack（以前称为JAMstack）是可组合的Web架构。其组件包括JAM、J代表JavaScript、A代表应用程序编程接口（API）和M代表标记。

当结合在一起时，这些现有技术为Web开发人员提供了创建、管理和扩展Web应用程序的工具。在2016年，Matt Biilmann在他公司的演示中引入了Jamstack，这是一种新的Web开发架构。Netlify

要真正理解，首先必须了解“技术堆栈”。

技术堆栈结合了开发Web/软件应用程序的工具、理念和方法。它可以包括编程语言、相关框架、库等。

从技术上讲，Jamstack是一种专注于通过消除业务逻辑中的数据来解耦Web体验层的Web堆栈。这样做带来了多个好处，包括性能、灵活性、可扩展性和可维护性。

与其他技术堆栈不同，Jamstack是可配置的，您可以选择自己的工具。换句话说，它作为一种“工作方式”，为开发人员提供了可定制的路径。例如，Jamstack开发人员可以使用API来提供自定义逻辑和第三方服务。

Jamstack与传统Web开发有何不同？

让我们将Jamstack与传统Web应用程序进行比较。任何传统的Web应用程序，如CMS（内容管理系统），都需要慢速的Web服务器，并且容易受到恶意攻击和技术问题的影响。

另一方面，Jamstack通过使用可组合的Web架构将网站的前端与后端分离来解决这个问题。它通过在运行时预渲染它们并让CDN将它们提供给用户，从而提供了更快、更安全的提供网页的方式。

总结一下，Jamstack基于提供静态站点，但通过API和JavaScript具有动态元素。您可以使用该方法尽可能多地创建预构建的标记，并使用API来提供动态内容。该方法将Jamstack用于托管静态站点，并使用云函数来提供数据和动态功能。

Jamstack如何工作？

Jamstack在静态站点开发方面具有重要依赖。它从CDN托管开始，CDN托管您的HTML页面，提供出色的速度。

不仅如此，开发人员还能感受到他们可以多快地改变项目。他们编写代码，进行Git克隆，构建项目，并通过简单的Git推送将其部署到目标文件夹。

例如，您的Jamstack网站可能由多个HTML文件组成。将这些文件放入代码仓库中，并使用静态网站生成器进行构建和发布。在其他情况下，您可以创建脚本，根据用户需求构建站点到静态网站，然后将其推送到CDN以为用户提供服务。

要真正理解Jamstack及其工作原理，我们必须查看其三个主要组件及其各自的角色。

JavaScript和Jamstack

JavaScript是一种流行的脚本语言，在Jamstack中发挥着重要作用。

Jamstack将前端和后端分离。对于前端渲染，Jamstack使用CDN和标记。对于后端，它实现了JavaScript和API，允许开发人员包含动态响应，同时提供个性化的用户体验。

简而言之，Jamstack中的JavaScript可以让您做两件事：

• 根据用户输入在您的网站上包含动态功能。
• 提供实时的前端交互功能，如下拉菜单、表单验证、动画等。

作为开发者，您可以选择一个JavaScript框架来创建动态行为。这些包括Vue、React和Angular等。

标记语言和Jamstack

Jamstack利用标记语言提供静态前端内容。这意味着您可以使用HTML或Markdown等标记语言来构建您的Web应用的前端。

由于标记语言更快，它使Jamstack应用具有实际性能。如果您在编译器时间渲染静态内容，然后将其传递给您的HTTP服务器，它就属于Jamstack类别。另一方面，如果您在运行时渲染它，则不属于Jamstack类别。

因此，您可以使用React来编译静态内容，然后通过CDN进行传递。

这也意味着您可以为您的项目使用流行的静态网站生成器。这些包括Next.js、Jekyll、Nuxt、Hugo和Gatsby。

此外，您还可以使用标记语言来执行页面内的SEO。这将帮助Google索引和排名您的网站。

API和Jamstack

接下来是API。它代表应用程序编程接口。

API在Jamstack中发挥着关键作用。由于Jamstack应用不依赖于Web服务器，它们必须使用API来添加功能或与第三方服务进行连接。例如，您可以使用API将支付网关添加到您的网站上。它还可以帮助您操作客户端数据，提供独特的用户体验。

另一个例子是使用GraphQL端点生成内容并在Jamstack网站上呈现它。

而且，如果您感到有创意，您可以创建自己的API来添加自定义功能，例如从持续更新的来源提供照片。

然而，您可以使用Headless CMS来完成所有这些。它使开发者能够通过API传递内容，同时消除了前端和后端都提供内容的需要。

为了给您一个现实世界的视角，如果您在使用传统的WordPress时同时使用其前端和后端，它将不是一个无头CMS。但是，由于它是开源的，您可以将其用作无头CMS，这消除了使用基于git的工作流和标记语言（如Markdown）从后端与内容交互的需要。

Jamstack的用例和使用时间

Jamstack可以与CDN很好地配合使用，让您创建高性能的Web应用程序。这样，您可以快速部署您的应用程序并更快地提供服务。

Jamstack最适合静态或伪静态网站开发。它的最佳用例包括创建企业/SaaS网站、自定义落地页、个人博客和Web门户。

在教育、政府、电子商务、营销、健康、娱乐和SaaS等各个行业，许多Jamstack站点都在使用。

一些使用Jamstack Web架构的知名网站包括：

• Audible + Next.js
• Bang & Olufsen + Next.js
• Godot Tutorials + Hugo
• Hulu + Next.js
• Bitcoin.com + Gatsby
• Verge + Next.js
• National Geographic + Gatsby
• SendGrid +Gatsby

还有许多其他网站！

何时不使用Jamstack？

然而，Jamstack不能替代其他Web开发过程。如果您正在构建以下内容，则应避免使用Jamstack：

• 大部分时间生成非静态内容的网站。
• 使用Python或Ruby等编程语言的单体服务器驱动的Web应用程序。
• 使用Drupal或WordPress等传统CMS的网站。

此外，如果：

• 你没有处理Jamstack的技术知识。
• 你的企业没有预算来雇佣高技能的Jamstack开发人员。
• 你是一名开始探索Web开发并偶然发现了Jamstack的开发者。尽管Jamstack听起来很简单，但实际上需要经验才能有效使用。所以，如果你是初学者，最好避免使用Jamstack。
• 你依赖插件来为你的网站添加功能。Jamstack不采用这种方法，你可能会陷入困境。

Jamstack的好处

Jamstack的Web架构带来了多种好处，包括：

• 利用CDN和Jamstack托管提供商的强大功能，创建高度可扩展的Web应用程序，并处理大多数与扩展相关的请求。
• 开发人员可能会发现Jamstack应用程序易于维护，考虑到其前端和后端方面是解耦的。
• Jamstack的不可变部署使其更快速地部署和维护。
• Jamstack提供更好的安全性，因为它主要由静态文件组成，因此在其中漏洞的可能性较低。此外，其较少的解耦元素使其易于管理，降低了传统Web服务器攻击的机会。
• 由于网站加载更快，企业可以从提高用户留存率、转化率和用户体验中获益。
• Jamstack应用程序的成本低于传统应用程序，因为静态文件托管更便宜。CDN也可以在不需要投入大量资金的情况下进行扩展。
• 它还提供了更好的开发者体验，因为应用程序的开发、部署和维护更加流畅。
• Jamstack允许企业创建SEO友好的网站。你可以优化页面SEO，而无需依赖笨重的插件或流程来使你的网站可索引。

如何开始使用Jamstack？

要开始使用Jamstack，你需要选择工具。由于Jamstack是可配置的，你可以选择一个UI框架、静态网站生成器和用于前端开发的Web框架。接下来是选择用于管理内容的技术栈，包括API、CDN和云服务。

最后，你需要工具来部署你的Jamstack应用程序。目前，市场上有很多托管和部署选项。

让我们来看一下下面开始使用Jamstack的过程。

#1.选择一个Jamstack JavaScript框架

第一步是选择你自己的UI框架。然后，由于Jamstack的核心思想是提供静态HTML，你可以选择各种UI和JavaScript框架，包括Angular、Vue、React等。

这些UI框架使开发人员能够使用模块化组件构建应用程序。一旦创建完成，你必须将它们渲染为HTML和JavaScript，然后提供给浏览器。

这就导致了我们的第二步，选择一个静态网站生成器(SSG)。

#2.选择一个静态网站生成器

接下来，你需要选择一个静态网站生成器。有许多流行的静态网站生成器和Web框架可用于创建Jamstack应用程序，包括Next.js、Hugo、Jekyll、Nuxt.js、Astro等。

通过使用它，你可以预先构建静态页面并将其存储在CDN或云中。这意味着客户端无需等待生成，从而实现更快的加载时间。

#3.添加一个Headless CMS

你还可以给你的设置添加一个Headless CMS。Headless CMS将前端用户界面层与其后端内容管理系统解耦。在这里，头部指的是在浏览器上呈现给用户的内容。

如果您曾经使用过传统的内容管理系统（CMS），比如WordPress，您会注意到它将内容提供给网页浏览器。然而，通过使用无头CMS的选项，您可以将内容提供给不同的“头部”，例如应用程序、聊天机器人、内部系统等。

Jamstack支持许多无头CMS，包括Ghost、WordPress、Tina、Keystone等。

还可阅读：Best Open-Source Headless CMS to Try for Your Next Application

#4. 管理数据和后端功能

通过Jamstack，您可以使用不同的方法来管理站点的数据和后端功能。例如，您可以使用API或来自Azure、AWS或Google Cloud的自定义基础架构集成支付网关。另一个例子是使用Auth0为站点添加身份验证。可能性是无限的！

#5. 部署网站

部署网站的最佳方式是使用Netlify或Vercel等工具。它们提供了自动化的DevOps管道来部署您的项目。您只需连接您的Git存储库，这些工具会处理其余的事情。

一旦您部署，您将获得一个附加到主机名的唯一URL。当然，您也可以使用您的域名进行部署，以获得更好的曝光。

最后的思考

毫无疑问，Jamstack changes how we build apps是适用于Web的。其分离的方法意味着更好的安全性、速度和开发体验。

然而，您不应该将其与无服务器混淆，尽管它们可能具有某些相似之处。例如，您可以使用无服务器方法，在云中托管您的数据，但您也可以使用API来利用其他应用程序和服务，如WordPress（这并不是完全无服务器）。因此，两者是不同的。

总之，Jamstack是一种新而令人兴奋的现代架构。它提供了比缺点更多的好处，并允许开发人员建立自己的路径来开发快速、安全和可扩展的Web应用程序。

接下来，请查看用于个人和初创企业的static website templates。