如何从 WordPress 迁移到 Eleventy 静态站点生成器

已发表: 2022-03-10

快速总结 ↬如果您是一名具有 HTML 和 JavaScript 中级知识的设计师或开发人员，并且熟悉 GitHub 和命令行，那么本教程适合您。我们将逐步将 WordPress 站点转换为从 Markdown 生成的静态站点。

Eleventy 是一个静态站点生成器。我们将深入研究为什么要使用静态站点生成器，深入了解将简单的 WordPress 站点转换为 Eleventy 的细节，并讨论以这种方式管理内容的利弊。我们走吧！

什么是静态站点生成器？

几十年前，我在 1990 年代中期开始了我的 Web 开发生涯，当时 HTML 和 CSS 是让网站启动和运行所需的唯一东西。那些简单的静态网站快速且响应迅速。然而，快进到今天，一个简单的网站可能非常复杂。

在 WordPress 的情况下，让我们考虑一下渲染网页需要什么。 WordPress 服务器端 PHP，在主机服务器上运行，执行查询 MySQL 数据库以获取元数据和内容的繁重工作，选择存储在静态文件系统上的正确版本的图像，并将其全部合并到基于主题的模板中将其返回给浏览器。这是每个页面请求的动态过程，尽管我看到的大多数由 WordPress 生成的网页并不是真正动态的。大多数访问者（如果不是全部）都体验到相同的内容。

静态站点生成器将模型翻转回几十年前的方法。静态站点生成器不是动态组装网页，而是以 Markdown 的形式获取内容，将其与模板合并，然后创建静态网页。当用户浏览您的网站时，此过程发生在请求循环之外。所有内容均已预先生成，并在每次请求时以闪电般的速度提供服务。 Web 服务器确实在做他们宣传的事情：服务。没有数据库。没有第三方插件。只是纯 HTML、CSS、JavaScript 和图像。这种简化的技术堆栈也相当于黑客的攻击面更小。有一点服务器端基础设施可供利用，因此您的网站本质上更安全。

领先的静态站点生成器也具有丰富的功能，这可以为放弃作为现代内容管理系统标志的技术堆栈提出令人信服的论据。

如果您已经在这个行业工作了一段时间，您可能还记得 Macromedia 的（Adobe 之前的）Dreamweaver 产品。我喜欢图书馆项目和模板的概念，特别是它们如何让我在多个网页之间创建一致性。在 Eleventy 的情况下，模板、过滤器、简码和插件的概念非常相似。在阅读了有关 Smashing 的企业转换为 JamStack 的信息后，我开始了整个旅程。我还在 JAMstack 上阅读了 Mathias Biilmann 和 Phil Hawksworth 的名为 Modern Web Development 的免费书籍，并且知道我已经准备好卷起袖子转换自己的东西了。

跳跃后更多！继续往下看↓

为什么不使用静态站点生成器？

静态站点生成器需要一些学习曲线。您将无法轻松地将编辑功能传递给输入内容，并且特定用例可能会阻止您使用。我将展示的大部分工作都是在 Markdown 中通过命令行完成的。也就是说，有很多选项可以将静态站点生成器与动态数据、电子商务、评论和评级系统结合使用。

您也不必一次转换整个网站。如果您有一个复杂的设置，您可能会从小处着手，看看您对静态站点生成的感受，然后再制定计划以解决企业规模的问题。您还可以继续使用 WordPress 作为一流的无头内容管理系统，并使用 SSG 来提供 WordPress 内容。

我如何选择 Eleventy 作为静态站点生成器

快速搜索流行的静态网站生成器，您会发现很多不错的选择：Eleventy、Gatsby、Hugo 和 Jekyll 是我名单上的主要竞争者。如何选择？我做了自然而然的事，并问了一些朋友。在我的 Twitter 民意调查中，Eleventy 是一个明显的领导者，但最重要的是一条评论说：“如果一个人不知道自己在做什么，@eleven_ty 感觉非常平易近人。” 嘿，就是我！我会不高兴地陷入分析瘫痪。不是今天……根据民意调查和评论选择 Eleventy 感觉很好。从那时起，我已经将四个 WordPress 站点转换为 Eleventy，使用 GitHub 存储代码并使用 Netlify 安全地提供文件。这正是我们今天要做的，所以让我们卷起袖子开始吧！

入门：引导初始站点

Eleventy 收集了大量的入门项目。我们将使用 Dan Urbanowicz 的 11-netlify-boilerplate 作为起点，宣传为“使用 Eleventy 构建简单博客网站并将其部署到 Netlify 的模板。包括 Netlify CMS 和 Netlify 表单。” 单击“部署到 netlify”开始。系统将提示您将 Netlify 连接到 GitHub，为您的存储库命名（我将我的存储库命名为 smasing-eleventy-dawson），然后“保存并部署”。

完成后，发生了一些事情：

样板项目已添加到您的 GitHub 帐户。
Netlify 为项目分配了一个动态名称，构建并部署了它。
Netlify 将项目配置为使用 Identity（如果您想使用 CMS 功能）和 Forms（一个简单的联系表单）。

Netlify 的初始部署屏幕 — 这是 Netlify 的屏幕，显示我们的初始部署已完成。（大预览）

如屏幕截图所示，您可以获取或映射域到项目，还可以使用 HTTPS 保护站点。后一个功能对我来说是一个非常引人注目的卖点，因为我的主机一直在收取高昂的 SSL 费用。在 Netlify 上，它是免费的。

我单击站点设置，然后单击更改站点名称为我的站点创建一个更合适的名称。尽管我很喜欢 jovial-goldberg-e9f7e9，但 elizabeth-dawson-piano 更合适。毕竟，这是我们正在转换的网站！当我访问 elizabeth-dawson-piano.netlify.app 时，我看到了样板内容。惊人的！

没有自定义的 11 个 Netlify 样板 — 我们的网站已经建成，现在可以进行定制了。（大预览）

让我们将新的存储库下载到我们的本地机器，以便我们可以开始自定义站点。这个项目的 GitHub 存储库为我提供了 git clone 命令，我可以在 Visual Studio Code 的终端中使用它来复制文件：

克隆 git →

然后我们按照样板文件的 README 文件中的剩余说明在本地安装依赖项，编辑_data/metadata.json文件以匹配项目并在本地运行项目。

npm install @11ty/eleventy
npm install
npx eleventy --serve --quiet

使用最后一个命令，Eleventy 在localhost:8080启动本地开发站点并开始监视更改。

保留 WordPress 帖子、页面和图像

我们要转换的站点是 elizabethrdawson.wordpress.com 上的现有 WordPress 站点。尽管该站点很简单，但最好尽可能多地利用现有内容。没有人真的那么喜欢复制和粘贴，对吧？ WordPress 可以轻松使用其导出功能。

WordPress 导出内容屏幕 — WordPress 允许您导出内容和图像。（大预览）

导出内容给了我一个包含站点内容的 XML 提取的 zip 文件。导出媒体库为我提供了网站图像的 zip 文件。我选择用作本练习模型的站点是一个简单的 3 页站点，它托管在 Wordpress.com 上。如果您是自托管的，您可以转到工具 > 导出以获取 XML 提取，但根据您的主机，您可能需要使用 FTP 来下载图像。

如果您在编辑器中打开 XML 文件，它对您几乎没有用处。我们需要一种将单个帖子导入 Markdown 的方法，这是我们将与 Eleventy 一起使用的语言。幸运的是，有一个用于将 WordPress 帖子和页面转换为 Markdown 的包。将该存储库克隆到您的计算机并将 XML 文件放在同一目录中。您的目录列表应如下所示：

WordPress XML 目录列表 — WordPress-export-to-markdown 的目录列表，包括 WordPress 的 XML 文件。（大预览）

如果您想从 XML 中提取帖子，这将是开箱即用的。但是，我们的示例站点有三个页面，所以我们需要做一个小的调整。在parser.js的第 39 行，将“post”更改为“page”，然后再继续。

显示 wordpress-export-to-markdown 更改的代码片段 — 配置`wordpress-export-to-markdown`以导出页面，而不是帖子。（大预览）

确保在wordpress-export-to-markdown目录中执行“npm install”，然后输入“node index.js”并按照提示进行操作。

该过程为我创建了三个文件： welcome.md 、 about.md和contact.md 。在每一个中，都有描述页面标题和日期的正面内容，以及从 XML 中提取的内容的 Markdown。 'Front matter' 对您来说可能是一个新术语，如果您查看“pages”目录中示例.md文件顶部的部分，您会在文件顶部看到一段数据。 Eleventy 支持各种前端内容来帮助定制您的网站，而标题和日期只是开始。在示例页面中，您将在前端部分看到这一点：

 eleventyNavigation: key: Home order: 0

使用此语法，您可以将页面自动添加到站点的导航中。我想在我的新页面中保留它，因此我将页面内容复制并粘贴到现有的样板 .md 文件中，用于 home、contact 和 about。我们的示例站点暂时没有博客，所以我也从“posts”目录中删除了.md文件。现在我的本地预览站点看起来像这样，所以我们到了那里！

自定义内容后的本地网站预览 — 现在我们已经自定义了一些内容，我们的本地环境显示了站点的当前状态。（大预览）

这似乎是提交更新并将更新推送到 GitHub 的好时机。当我提交更新时会发生一些事情。收到来自 GitHub 的更新通知后，Netlify 运行构建并更新实时站点。这与更新和保存文件时在本地发生的过程相同：Eleventy 将 Markdown 文件转换为 HTML 页面。事实上，如果您在本地查看_site目录，您会看到您网站的 HTML 版本，已准备好进行静态服务。因此，当我在提交后不久导航到 elizabeth-dawson-piano.netlify.app 时，我看到了与本地看到的相同的更新。

添加图像

我们将使用来自原始站点的图像。在.eleventy.js文件中，您会看到静态图像资源应位于 static/img 文件夹中。每个页面都会有一个英雄形象，这就是前面的内容非常有效的地方。在每页的前面部分，我将添加对英雄图像的引用：

 hero: `/static/img/performance.jpg`

Eleventy 将页面布局保存在_includes/layouts文件夹中。 base.njk被所有页面类型使用，因此我们将在导航下方添加此代码，因为这是我们想要英雄形象的地方。

 {% if (hero) %} <img class="page-hero" src="{{ hero }}" alt="Hero image for {{ title }}" /> {% endif %}

我还在 About 页面上为 Elizabeth 的图片添加了一个图像标签，使用 CSS 类对其进行对齐并为其提供适当的填充。现在是提交并查看到底发生了什么变化的好时机。

使用插件嵌入 YouTube 播放器

主页上有一些 YouTube 视频。让我们使用一个插件来自动创建 Youtube 的嵌入代码。十一插件YouTube嵌入是一个很好的选择。安装说明非常清楚：使用 npm 安装包，然后将其包含在我们的.eleventy.js文件中。无需任何进一步更改，这些 YouTube URL 就会转换为嵌入式播放器。（见提交）

使用集合和过滤器

我们不需要此站点的博客，但我们确实需要一种让人们了解即将发生的事件的方法。我们的活动——出于所有意图和目的——将就像博客文章一样。每个都有标题、描述和日期。

我们需要几个步骤来创建这个新的基于集合的页面：

在我们的 pages 目录中创建一个新的events.md文件。
在我们的帖子目录中添加一些事件。我为假日音乐会、春季音乐会和秋季音乐会添加了.md文件。
在.eleventy.js中创建一个集合定义，以便我们可以将这些事件视为一个集合。下面是集合的定义方式：我们收集帖子目录中的所有 Markdown 文件，并过滤掉任何没有在前面指定位置的内容。

 eleventyConfig.addCollection("events", (collection) => collection.getFilteredByGlob("posts/*.md").filter( post => { return ( item.data.location ? post : false ); }) );

向我们的events.md文件添加对集合的引用，将每个事件显示为表中的一个条目。下面是对集合进行迭代的样子：

 <table> <thead> <tr> <th>Date</th> <th>Title</th> <th>Location</th> </tr> </thead> <tbody> {%- for post in collections.events -%} <tr> <td>{{ post.date }}</td> <td><a href="{{ post.url }}">{{ post.data.title }}</a></td> <td>{{ post.data.location }}</td> </tr> {%- endfor -%} </tbody> </table>

但是，我们的日期格式看起来很糟糕。

幸运的是，样板文件.eleventy.js文件已经有一个名为 readableDate 的过滤器。对 Markdown 文件和模板中的内容使用过滤器很容易：

 {{ post.date | readableDate }}

现在，我们的日期格式正确！ Eleventy 的过滤器文档更深入地介绍了框架中可用的过滤器，以及如何添加自己的过滤器。（见：提交）

使用 CSS 润色网站设计

好的，现在我们创建了一个非常可靠的站点。我们有页面、英雄图像、事件列表和联系表。我们不受任何主题选择的限制，所以我们可以对网站的设计做任何我们想做的事情……天空就是极限！让您的网站具有高性能、响应性和美观性完全取决于您。我对样式和标记进行了一些更改，以使我们最终提交。

现在我们可以告诉全世界我们所有的辛勤工作。让我们发布这个网站。

发布网站

哦，但是等等。已经发布了！我们一直在这个很好的工作流程中工作，我们对 GitHub 的更新会自动传播到 Netlify 并重新构建为新鲜、快速的 HTML。更新就像 git push 一样简单。 Netlify 检测来自 git 的更改，将 markdown 处理为 HTML，并为静态站点提供服务。当您完成并准备好使用自定义域时，Netlify 允许您免费使用现有域。访问站点设置 > 域管理以获取所有详细信息，包括如何将 Netlify 的免费 HTTPS 证书用于您的自定义域。

高级：图像、联系表格和内容管理

这是一个只有几张图片的简单网站。不过，您可能有一个更复杂的网站。 Netlify 的大媒体服务允许您将全分辨率图像上传到 GitHub，并在大媒体中存储指向图像的指针。这样一来，您的 GitHub 存储库就不会挤满图像数据，您可以轻松地将标记添加到您的站点，以便在请求时请求优化的图像裁剪和大小。我在我自己的大型网站上尝试过这个，并且对响应速度和易于设置感到非常满意。

还记得随我们的样板一起安装的联系表吗？它只是工作。当您提交联系表格时，您会在 Netlify 的管理部分看到提交的内容。为您的网站选择“表格”。您可以将 Netlify 配置为在收到新表单提交时向您发送电子邮件，还可以在表单代码中添加自定义确认页面。例如，在您的站点中创建一个页面/contact/success ，然后在您的form标签中（在form.njk中），添加action="/contact/success"以在表单提交后重定向用户。

样板文件还将站点配置为与 Netlify 的内容管理器一起使用。将其配置为适用于非技术人员超出了本文的范围，但您可以定义模板并将 Netlify 的内容管理器中所做的更新同步回 GitHub 并触发您网站的自动重新部署。但是，如果您对在 markdown 中进行更新并将其推送到 GitHub 的工作流程感到满意，那么您可能不需要此功能。

最终转换的网站（结果）
GitHub 存储库