静态网站生成器——无人谈论的 WordPress 替代方案

我们都经历过。

网站突然无缘无故变慢，加载时间长达两位数，甚至出现令人恐惧的“建立数据库连接时出错”的错误。这可能取决于您使用的托管服务提供商、网站规模，甚至网站外观设计的复杂程度，但问题的关键在于：

WordPress 正在老化。

它运行的代码最初编写于 2003 年，设计初衷是为了应对互联网发展过程中网站加载时间不足几分钟的情况。那时我们对互联网的依赖程度还不高。但现在呢？随着科技一代越来越缺乏耐心，网站加载时间正成为网站设计过程中的一个关键因素，甚至被搜索引擎在排名时纳入考量。

那么这个问题的解决方案是什么？静态站点生成器！（惊喜啊，惊喜啊）。

但要了解 SSG 如何工作以及它们如何解决 WordPress 的问题，我们首先需要了解 WordPress 如何工作，以及为什么这会导致网站速度变慢。

WordPress 的工作原理

一个典型的、最基本的网站由 HTML（用于内容和结构）、CSS（用于设计）和 JS（用于逻辑或处理）组成。对于任何刚开始接触 Web 开发的人来说，通常的做法是为网站的每个页面编写一个单独的 HTML 文件。我们称之为静态网站。

非常简单：您可以轻松自定义，无需复杂的脚本来降低网站速度，网站紧凑，不占用太多空间。当然，这适用于只有 5 个页面的简单网站。但如果是一个拥有 50 篇文章的博客呢？或者一个拥有数百种产品的电商网站呢？我相信您能理解我的意思。通过这些示例，您可以复制粘贴博客文章模板，并在每次想要撰写新博客文章时编辑内容，但这会浪费您宝贵的时间。这些时间本可以用来撰写博客文章。

WordPress 解决这个问题的方法是（我这里用了过于简化的方式）将页面和博客文章数据存储在数据库中，与样式分开。当用户访问网站页面时，WordPress 会执行 PHP 代码，从数据库中检索数据，并将这些数据组装成 HTML 和 CSS。这就是我们所说的动态网站的一个例子。

所有这些代码都必须在网站呈现之前执行，而用户正在等待页面加载，在这种情况下，40％的人会放弃加载时间超过 3 秒的网站。

一个优化过的 WordPress 网站，如果使用最佳主机和最少的资源，加载时间大约需要 1-2 秒。但如果使用价格低廉的主机（我们大多数博主/作品集所有者可能会使用这种主机），加载时间大约需要 4-5 秒！

静态站点生成器

现在，我们不再需要在每次网站加载时从数据库检索数据并组装 HTML 和 CSS，而是在用户访问网站之前预先构建 HTML 和 CSS ，并将其存储起来。我们不再执行代码，而是在用户访问网站时按原样提供这些文件。此处理过程在用户访问网站之前进行，这意味着这些文件在发出请求后即可立即使用。

可以将 SSG 视为一个输入网站数据并输出包含所有 HTML、CSS 和资产的文件夹的应用程序。

因此，虽然在使用 WordPress 时我们关注的是加载时间，但使用静态站点生成器时，加载时间几乎可以忽略不计，我们将重点转移到构建时间上。

静态站点生成器相对较新 - 以下是搜索词“静态站点生成器”的流行度增长：

优点

表现

由于静态站点生成器在用户请求之前预先构建网站，因此加载时间从几秒钟缩短到几毫秒！

站内导航也快得令人难以置信。事实上，从一个页面导航到另一个页面几乎是瞬间完成的（立即体验！本网站由 SSG 提供支持）。这是因为我使用的 SSG（GatsbyJS）会预加载网站上其他页面的文件和资源，这样当您想要转到另一个页面时，所有内容都已准备就绪！

安全

数据库、服务器以及在其上运行的过时软件是黑客的梦想。一项研究发现，大约 70% 的 WordPress 网站存在安全漏洞！

原因很简单 - 涉及的服务器越多，服务器执行的进程和执行越多，发现的漏洞和脆弱性就越多。

但是通过预加载我们的页面，我们消除了执行任何逻辑和工作的需要，从而消除了黑客将恶意代码注入这些进程的风险。

成本

要运行一个自托管的 WordPress 网站，您平均每月需要花费 5-10 美元用于托管，每年还需要大约 10 美元的域名费用。总而言之，您每年的花费很容易超过 100 美元。使用静态网站生成器，这笔费用可以降至 0 美元（自定义域名每年只需 10 美元）。

由于不需要处理能力，您可以在免费托管服务提供商（如Netlify和GitHub Pages）上托管您的网站。

版本控制

大多数静态网站生成器网站都是通过将代码推送到远程 git 仓库来发布的，代码会在远程 git 仓库中自动构建和部署。这不仅简化了部署过程，还能让您在需要时轻松恢复到网站的先前版本。

但是，与任何事物一样，静态站点生成器也有一些：

缺点

学习曲线相当陡峭

（除非你已经是一名程序员）。

WordPress 如此受欢迎的原因之一是它的学习曲线相对较浅。它拥有图形用户界面 (GUI)、仪表盘和文本编辑器——几乎可以说是“所见即所得”的编辑器。

静态站点生成器需要用 Markdown 编写内容 - 对于普通人来说不是很直观。

再加上与 WordPress 相比，他们的社区相对较小，这使得学习曲线变得更加陡峭。

没有内置评论功能

不在服务器上运行的诸多副作用之一是，你无法获得任何需要处理的开箱即用服务。这意味着评论、搜索和大多数联系表单都需要第三方服务。Disqus 是一个流行的免费第三方评论服务。

更新和发布网站需要您计算机上的工具

这意味着您只能在安装了特定静态网站生成器（以及其他依赖项）的计算机上更新您的网站。但是，您可以从任何具有浏览器和互联网连接的计算机上编辑 WordPress 网站。

常见的静态网站生成器

1. 盖茨比

   GatsbyJS 基于 React 并在 Javascript 上运行，对于已经在使用 Javascript 的现有 Web 开发人员来说，过渡到 GatsbyJS 非常容易。它之所以受欢迎，是因为它可以用来制作渐进式 Web 应用程序 (PWA)，而且它的网站设计得对用户来说非常快。gatsby -plugin-image插件（及其前身gatsby-image）为 GatsbyJS 提供了开箱即用的图像优化功能，包括调整大小、模糊和预优化等功能。GatsbyJS 还拥有非常丰富的生态系统、清晰全面的文档，以及快速发展的 GitHub 社区。所有这些都有助于使 GatsbyJS 网站（如本站）比其他静态网站生成器制作的网站更快地为用户提供体验。

   由 GatsbyJS 提供支持的网站示例有：Airbnb 的工程和数据科学网站、Figma、ReactJS、Hopper。

   要开始使用 GatsbyJS，请前往Sitepoint 的教程、Scott Spence 的教程和 GatsbyJS 的官方快速入门页面

2. 雨果

   Hugo 的优势在于速度快。使用 Go 构建的 Hugo 网站通常只需几毫秒即可构建完成（而 GatsbyJS 则需要 30-60 秒）。这对于像 Netlify 这样的部署和托管服务来说非常有利，Netlify 每月提供 200 分钟的免费构建时间，超过 200 分钟则需要收费。然而，Go 在 Web 开发领域并不像 JavaScript 那样普及，因此这可能会让一些人望而却步。

   由 Hugo 提供支持的网站示例有：Bootstrap、Kubernetes、Ghost和CoreUI。

   要开始使用 Hugo，请转到The New Stack 的 Hugo 教程和 Hugo 的快速入门页面。

3. 杰基尔

   Jekyll 是早期静态网站生成器之一（创建于 2008 年），它普及了静态网站生成器的概念。它基于 Ruby 运行，学习成本低，且相对成熟，使其成为众多 Web 开发者的热门选择。尽管其他静态网站生成器层出不穷，但 Jekyll 在 Web 开发领域仍然广受欢迎。

   由 Jekyll 支持的网站示例有：Ruby on Rails和Frame AI。

   要开始使用 Jekyll，请前往开源的 Jekyll 教程、Tania Rascia 的教程和Jekyll 的官方教程。

4. 十一

   Eleventy自称是一款更简单的静态网站生成器，适合那些只想完成工作的用户。Eleventy 改进了 Hugo 和 Jekyll 等其他静态网站生成器的主要问题。Jekyll 已经存在一段时间了，但有些人认为它太慢了。Hugo 速度很快，但它需要使用 Go，而 Go 是一种大多数 Web 开发者不熟悉的编程语言。Eleventy 速度很快，并且使用 Javascript，而 Javascript 是大多数 Web 开发者都熟悉的语言。

   由 eleventy 提供支持的网站的一个例子是他们的网站。

   要开始使用 Eleventy，请转到Craig Buckler 的教程、Tatiana Mac 的教程和 Eleventy 的官方入门页面。

结论

您可以在staticgen.com上找到更详尽的静态站点生成器列表。如果您有兴趣将您的网站适配到静态站点生成器，或者创建一个全新的网站，请访问此页面，其中介绍了JAMstack、静态站点生成器背后的更宏大的发展，以及一种能够创建更快、更安全网站的全新 Web 开发方法。

订阅darrendube.com以获取更多类似文章