什么是 JAMStack JAMStack 让我们构建一个 JAMStack 应用 第一个文件 让我们添加一些样式。创建一个名为 style.css 的文件，然后输入以下代码。我选择了 Gatsby 使用的颜色。如果您不喜欢这些颜色，或者您有自己喜欢的颜色，那么请务必修改下面的代码以匹配您喜欢的颜色。Gatsby 和这篇文章有什么关系？快速补充说明

2025-06-07

什么是 JAMStack

JAMStack

让我们构建一个 JAMStack 应用程序

第一个文件

让我们添加一些样式。创建一个名为 style.css 的文件，然后输入以下代码。我选择了 Gatsby 使用的颜色。如果您不喜欢这些颜色，或者您有自己喜欢的颜色，那么请修改下面的代码以匹配您喜欢的颜色。

盖茨比与这篇文章有什么关系？

快速附注

JAMStack

JAMStack 代表
JavaScript
API
标记。
堆栈部分基本上就是你使用的工具。重点是 JAM。JAMStack 是一种强调只传输静态资源的 Web 设计方法。它消除了设置服务器（无论是使用 Node.js、Python 还是 Ruby 等）带来的麻烦和头痛。对于前端开发人员来说，使用 JAMStack 绝对是最佳选择。JAMStack 的优势包括：降低
复杂性、
降低成本、
加快交付速度
、增强自主性。

JAMStack 应用允许我们作为前端开发者仅使用 CDN，从而跳过服务器、数据库、负载均衡器等环节。CDN 价格低廉，通常免费。此外，降低的复杂性也减少了 DevOps 所需的时间和精力。更少的组件使得快速交付更容易，也更可靠。这在“它在我的机器上能用”这句话中，第一次体现出网站确实能用。简化的堆栈意味着单个开发人员就能完成项目从构思到部署的整个过程。这并不是说你不能组建一个团队来开发应用，而是因为你不需要一个全栈工程师或一个前端和后端开发人员来维护整个应用。

让我们构建一个 JAMStack 应用程序

首先，我们需要安装一些东西。虽然你不需要编写任何后端代码，但仍然需要安装 node 和 npm 来下载我们将要用到的一些工具。在本文中，我们将使用基本的 HTML 和 JavaScript 来构建这个简单的网站。

第一个文件

cd source\repos
mkdir JAMStackSite
cd JAMStackSite
Enter fullscreen mode Exit fullscreen mode 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>My First JAMStack Site</title>
</head>
<body>
  <main>
    <h1>Hello Dev.to Readers!</h1>
    <h2>Recently Updated Repos</h2>
    <div id="content">Loading...</div>
  </main> 
  <script type="module" src="./main.js"></script> 
</body>
</html>
Enter fullscreen mode Exit fullscreen mode 
cd <project folder>
npx serve
Enter fullscreen mode Exit fullscreen mode

我们现在有一个正在运行的网站，严格来说，它是一个 JAMStack 应用。现在你可以部署了……开玩笑的。这只是个开始。

让我们添加一些样式。创建一个名为 style.css 的文件，然后输入以下代码。我选择了 Gatsby 使用的颜色。如果您不喜欢这些颜色，或者您有自己喜欢的颜色，那么请修改下面的代码以匹配您喜欢的颜色。

html,
body {
   color: #555;
   font-family: sans-serif;
   font-size: 18px;
   margin: 0;
}

main {
   margin: 3rem auto;
   max-width: 90vw;
   width: 50ch;
}

h1 {
   color: #b17acc;
}

h2 {
    color: #639;
}
Enter fullscreen mode Exit fullscreen mode

现在我们需要将链接标签添加到样式表中。

<link ref="stylesheet" href="./style.css" />
Enter fullscreen mode Exit fullscreen mode

让我们添加一些基本的 JavaScript 代码，使其成为一个正式的 JAMStack 应用。我们将使用基本的 JavaScript 代码。熟悉 Babel 的人会惊讶地发现，我们不需要 Babel 就能让我们的现代 JavaScript 代码运行。让我们来看一下。

const listRepos = async username => {
    const repos = await fetch(
      `https://api.github.com/users/${username}/repos?type=owner&sort=updated`
    )
      .then(res => res.json())
      .catch(error => console.error(error));

    const markup = repos
      .map(
        repo => `
          <li>
            <a href="${repo.html_url}">${repo.name}</a>
            (⭐️ ${repo.stargazers_count})
          </li>
        `
      )
      .join('');

    const content = document.getElementById('content');

    content.innerHTML = `<ul>${markup}</ul>`;
  };

  listRepos('RedHoodJT1988'); // insert your GitHub username here or use mine if 
                             // if you don't have one.
Enter fullscreen mode Exit fullscreen mode

我知道这网站不太好用，但你现在正在使用 API 获取最近更新的 GitHub 仓库，并将它们渲染到页面上。如果你在刷新浏览器时因为某种原因没有看到内容，请重新运行以下命令：

npx serve
Enter fullscreen mode Exit fullscreen mode

盖茨比与这篇文章有什么关系？

目前还没有。如果有足够多的人询问或有兴趣了解更多关于 JAMStack 的信息，我一定会做一个系列教程，展示如何使用 Gatsby 和 JAMStack 构建一个非常棒的电商网站。Gatsby 绝不是唯一一个可以与 JAMStack 配合使用的静态网站生成器。你可以使用任何语言，从 Vanilla JavaScript（如本文所示）到你最喜欢的框架，例如 React 或 Angular。

快速附注

我并没有窃取或以任何方式盗版这段代码。我确实对 Jason Lengstorf 在 frontendmasters.com 上开设的 JAMStack 入门课程的内容进行了修改。如果您有能力支付订阅费用，强烈建议您去看看这门课程。我知道如果您刚开始学习 JavaScript，他们提供免费订阅。但是，这门课程不包含在内。我很喜欢 frontendmasters，希望他们不会因为这篇文章而感到不快。如果这篇文章让 frontendmasters 或 Lengstorf 先生的任何人感到不快，我很乐意将其删除。

希望您喜欢这篇文章，并像我一样享受编写和创建这个基本网站的乐趣。

干杯。

文章来源：https://dev.to/redhoodjt1988/what-is-the-jamstack-16em
Devto 翻译
PREV
如何使用 Mantine 和 Strapi 构建 React 管理面板
NEXT
给初级开发人员的职业建议