如何构建您的第一个 JAMstack 网站：完整指南

2025-06-07

如何构建您的第一个 JAMstack 网站：完整指南

你是不是好奇 JAMstack 的炒作究竟是怎么回事？什么是 JAMstack 网站？如何搭建？在哪里部署？

如果您在过去几个月里遇到过类似的问题，那么这篇文章正适合您。我们将学习什么是 JAMstack，以及如何构建我们的第一个 JAMstack 博客。

如果您已经知道 JAMstack 站点是什么，则可以跳过本节并直接转到：

什么是 JAMstack？

JAMstack 不是一个框架或产品。它是一种做事方式，而且并不是什么新鲜事物。但将这个术语应用于这种建站方法有助于提升其受欢迎程度，所以我完全支持。JeremyMorgan.com 自 2010 年以来一直是 JAMstack 的网站。

JAMstack 是：

  • JavaScript
  • API
  • 标记

但这并没有告诉你太多。它们是如何协同工作的？

在我看来，JAMstack 最重要的部分是构建不那么静态的静态网站。为了解释这一点，我们需要稍微回顾一下。

以前的网站是什么样的

过去，我们的网站有两种类型：静态网站和动态网站。

静态网站

静态网站是仅由一堆基于文本的 HTML 文件以及通过 Web 服务器推送的 CSS 和图像组成的网站。

如何构建 JAMstack 网站

这就是网络的起源。由于网络服务器只是推送 HTML 文件，不进行任何处理，因此速度极快。缺点是它们无法更改。无论数据发生什么变化，HTML 文件都是一样的。数据发生变化时，你无法动态更新页面。

例如： 90 年代的大多数网页

动态网站

动态网站在后端运行应用程序，这些应用程序会动态生成 HTML 并将其传递给浏览器。我们大约 20 年来一直以这种方式构建网站。

如何构建 JAMstack 网站

动态网站的速度不如静态网站快，但它具有交互性。HTML 会被发送到浏览器，但用户可以与浏览器交互，并将消息发送回 Web 服务器。然后，服务器会生成新的 HTML 并返回。

例如： Wordpress、Drupal、Sitecore 以及大约一百万个其他网站

JAMstack 网站

JAMstack 网站兼具两者的优势。你可以享受静态文件服务的速度，但这些静态文件中还包含与 API 通信的 JavaScript。

如何构建 JAMstack 网站

因此，如果该图令人困惑，请让我稍微回顾一下以进行解释。

您无需编写静态 HTML 文件，静态站点生成器会为您生成这些文件。

如何构建 JAMstack 网站

工作流程的第一步是创建和编辑 Markdown 文件。如果您从未使用过 Markdown，这里有一些基础知识，以及一个很棒的课程。

完成后，您可以通过静态网站生成器运行这些文件。它会生成所有 HTML、CSS 和 JavaScript。然后，您可以将它们托管在任何静态文件 Web 服务器（最好是 CDN）上。

这些文件可以快速加载，因为它们只是文本。JavaScript 文件可以与 API 通信，从而获取动态数据。你甚至可以将其附加到数据库。

因此，与 Wordpress 模型不同，Wordpress 模型是一个连接到数据库并生成 HTML 页面的 PHP 服务，HTML 页面已经生成。然后 JavaScript 就可以与数据库进行通信了。

这是两全其美的。您可以通过数据库或其他 API 连接获得静态文件的极快速度。

这就是为什么人们现在如此热衷于谈论 JAMstack 网站。

有什么好处？

如何构建 JAMstack 网站

静态网站生成器和 JavaScript 与 API 通信已经存在一段时间了。正如我所说，JeremyMorgan.com已经以这种方式运营了 10 年。最显著的区别在于工具、工作流程和托管模型。

例如，现在我的网站是用Hugo构建的。我把它提交到GitHub仓库，它会自动拉取到Netlify上并构建。Netlify 会将缓存失效，因此网站是最新的，并使用 CDN 来提高速度。

十年前，我在 FreeBSD 虚拟机上安装了Octopress （Jekyll Wrapper）来生成网站。与我们现在的水平相差甚远。

以下是一些好处：

  • 速度——通过 CDN 提供静态资源非常快。非常快。你通过 CDN 提供预构建的资源
  • 安全性——由于您的站点大部分都是静态资产，因此“占用空间”较小。
  • 工作流程- 一旦设置完成，工作流程甚至比 Wordpress 或类似的设置更简单
  • 扩展- 如果你的网站突然登上 Hacker News 的头版，你的网站不会倒闭。它会扩展（如果你使用正确的服务）

因此，如果您对 JAMstack 的想法很感兴趣，让我们继续看看您需要什么样的工具。

JAMstack 静态站点生成器

如何构建 JAMstack 网站

要开始使用 JAMstack，你需要一个静态网站生成器。它可以将你的 Markdown 文件转换为 HTML。静态网站生成器太多了，无法一一列举，但这里列出了一些比较常用的。我以前用过很多这样的生成器。

  • Hugo - 我把它列在第一位，因为它是我最喜欢的。它基于 Go 语言，但你无需了解 Go 语言即可使用它。它的优势在于单一可执行文件和极快的页面生成速度。

  • Gatsby - 另一个很棒的生成器。它由 JavaScript 驱动。它最大的优势在于拥有大量令人惊叹的功能和不断壮大的社区。（你可以学习这门课程来快速上手）

  • Jekyll - 这个工具由 Ruby 驱动。我在 JeremyMorgan.com 上用过好几年了。它非常简单易用，配置也很简单。不过要注意 Ruby 依赖项。

  • Next.js - 一个 JavaScript 驱动的 SSG。它支持静态导出的 React 应用，也可以进行服务器渲染。

  • Pelican - 这款工具由 Python 驱动，非常稳定可靠。它拥有简洁的命令行界面 (CLI)，并且配置高度灵活。

  • Hexo - 另一个基于 JavaScript 的静态生成器，它越来越受欢迎。它速度很快，而且易于使用。

选择哪种静态站点生成器完全取决于您。这取决于您的技能水平和使用习惯。JS 开发者喜欢 Hexo。Python 开发者喜欢 Pelican。React 开发者喜欢 Gatsby。选择最适合您并能提高您效率的生成器。如果您想了解更多静态站点生成器，请访问StaticGen.com。

我选择哪一个？

我选择Hugo作为我的网站。这不仅仅是因为我是一名 Go 开发者。事实上，我没有修改任何 Go 代码来让它运行。然而，我花了很长时间评估各种解决方案，最终选择 Hugo 是因为：

  • 真的很快
  • 单个可执行文件（依赖性较少）
  • 高度可配置

到这里，我深入讲解了选择的过程。现在，我们来谈谈在哪里举办。

在哪里托管 JAMstack 网站

如何构建 JAMstack 网站

现在你已经选定了一个静态生成器，需要把它放到某个地方。你可以把它托管在任何静态主机上。你可以使用 Nginx 在线创建一个简单的虚拟机，并将其托管在那里。不过，JAMstack 网站的最佳实践是将其托管在有 CDN 的服务上。

以下是一些托管 JAMstack 网站的好地方

  • Netlify - 速度极快，由 CDN 支持，可连接到 GitHub 的服务。除非您需要分析或您的网站规模较大，否则免费。
  • Vercel - 速度也非常快，并且有 CDN 支持，已连接到 GitHub。在规模扩大之前也免费。
  • AWS Amplify - 一种快速、强大的部署静态站点（以及更多功能）的方法。
  • GitHub Pages - 一种免费发布静态页面的快速简便的方法。
  • Azure 静态 Web 应用- Azure 提供的一项用于托管静态页面的新服务。快速、强大且可扩展。

有很多可用的选项，但这些是目前流行的。

我选择哪一个？

经过一番深入的评估，我选择了Netlify。我评估了上述所有选项（除了 Azure），它们都很棒。在我的速度测试中，Netlify 在非洲和印度的表现始终更佳，这两个地区是我读者群的关键地区，我希望能够更好地服务他们。

它们的速度都非常接近，并且都很容易连接到 GitHub。

那么，您准备好构建您的第一个 JAMstack 站点了吗？

构建您的第一个 JAMstack 网站

对于我们的第一个网站，我们将使用Hugo。您需要安装：

这两个链接都涵盖了 Windows、Mac 和 Linux 系统。如果你使用的是 Pop!_OS（我的首选），这里有一个完整的 Hugo 设置教程。

安装 Hugo

第一步是安装 Hugo。以下是他们网站上的完整说明。

这非常简单。

自制

brew install hugo
Enter fullscreen mode Exit fullscreen mode

巧克力味

choco install hugo -confirm
Enter fullscreen mode Exit fullscreen mode

或来自来源：

mkdir $HOME/src
cd $HOME/src
git clone https://github.com/gohugoio/hugo.git
cd hugo
go install --tags extended
Enter fullscreen mode Exit fullscreen mode

创建 Hugo 网站

现在您需要创建一个新的 Hugo 网站：

hugo new site hellohugo
Enter fullscreen mode Exit fullscreen mode

现在您需要一个主题：

您可以在这里找到 Hugo 主题的列表。

找到你喜欢的版本后，复制链接到仓库。我选择“Hyde”作为示例：

cd themes
git clone https://github.com/spf13/hyde
Enter fullscreen mode Exit fullscreen mode

然后，您必须将以下内容添加到您的 config.toml 文件中：

theme = "hyde"
Enter fullscreen mode Exit fullscreen mode

现在创建一个新帖子：

hugo new helloworld.md
Enter fullscreen mode Exit fullscreen mode

您的帖子将如下所示：

---
title: "Post"
date: 2020-05-30T13:13:42-07:00
draft: false
---

Hello! This is the first blog post!
Enter fullscreen mode Exit fullscreen mode

添加一些内容，并确保在准备发布时将“草稿”更改为 false。

测试一下：

hugo serve
Enter fullscreen mode Exit fullscreen mode

Hugo 在 Pop!_OS 上

现在您就可以在 localhost:1313 上查看您的博客了：

Hugo 在 Pop!_OS 上

所有文件均在 /public 中生成，因此当您准备发布时运行：

hugo
Enter fullscreen mode Exit fullscreen mode

然后 /public 中的所有文件将成为您的新站点。

Hugo 在 Pop!_OS 上

现在它已经构建好了，让我们来部署它。

部署您的 JAMstack 站点

如何构建 JAMstack 网站

所以我们要把这个网站部署到 Netlify。首先，我们需要把它添加到 GitHub。

首先，在安装 Hugo 的文件夹中对其进行初始化。

注意： 我们不会构建工件并将其推送到 Netlify。我们会将源代码推送到 Netlify，然后 Netlify 会构建并托管这些工件。

git init
Enter fullscreen mode Exit fullscreen mode

现在我们需要将主题添加为子模块。在我的例子中，使用 Hyde 如下所示：

git rm --cached themes/hyde
git submodule add https://github.com/spf13/hyde themes/hyde
Enter fullscreen mode Exit fullscreen mode

现在，前往 Github 并创建一个存储库。

如何构建 JAMstack 网站

现在让我们添加原点：

git remote add origin https://github.com/JeremyMorgan/HugoTestBlog.git
Enter fullscreen mode Exit fullscreen mode

然后拉它：

git pull origin master
Enter fullscreen mode Exit fullscreen mode

现在我们将添加新的变化。

git add .
Enter fullscreen mode Exit fullscreen mode

并承诺。

git commit -m "initial commit"
Enter fullscreen mode Exit fullscreen mode

现在可以推送到 GitHub 了：

git push --set-upstream origin master
Enter fullscreen mode Exit fullscreen mode

现在我们去 Netlify。如果你还没有账户，可以免费创建一个。

在 Netlify 中，我们想从 git 创建一个新站点：

如何构建 JAMstack 网站

然后我们将从 GitHub 创建一个新的持续部署：

如何构建 JAMstack 网站

接下来，您需要允许 Netlify 安装 GitHub 的 Netlify 应用程序，并授予对您想要发布的存储库的访问权限。

如何构建 JAMstack 网站

在这里，您可以选择基本的构建设置。我们这里有 Hugo 和 Public。您可以点击“部署站点”，它就会进行部署。

如何构建 JAMstack 网站

现在您可以获取生成的 URL 并访问您的新网站！

如何构建 JAMstack 网站

但是，根据您选择的主题，您可能会看到类似这样的样式：不存在。这是因为基本网址设置为“example.org”。我们不知道基本网址是什么。

就我而言，Netlify 在https://awesome-carson-bc7cd2.netlify.app/创建了我的网站，因此我只需将其添加到我的 config.toml 中：

baseURL = "https://awesome-carson-bc7cd2.netlify.app/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "hyde"
Enter fullscreen mode Exit fullscreen mode

我会添加它然后提交。现在我的网站如下所示：

如何构建 JAMstack 网站

如果您一直在关注：恭喜！您刚刚部署了一个 JAMstack 站点！

当然，现在我们还没有将 API 部分实现到这个例子中，但我将在以后的文章中介绍它。

结论

希望以上内容能帮助您理解 JAMstack 的工作原理。本文介绍了

  • JAMstack 是什么
  • 为什么它很棒
  • 您可以使用的静态站点生成器
  • JAMstack 主机
  • 建立了我们自己的 JAMstack 网站。

希望以上内容对您有所帮助。如果您想成为 JAMstack 的超级明星，这里有一些很棒的课程可以帮您学习：

如果你最终搭建了一个 JAMstack 网站，请与我分享！我很想听听你的反馈以及进展情况。

文章来源：https://dev.to/pluralsight/how-to-build-your-first-jamstack-site-a-complete-guide-1810
Devto 翻译
PREV
如何顺利通过下一次编程面试
NEXT
WSL 入门