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

本文将指导您如何利用强大的工具，将WordPress网站轻松转换为静态网站。我们将重点介绍从WordPress迁移到静态网站生成器的过程，并探讨一些替代方案，包括使用无头CMS。为什么要进行这种迁移？因为您可以大幅提升网站速度，从而改善搜索引擎排名，降低（甚至消除）托管费用，并显着增强安全性。

关键要点：

• 从WordPress迁移到静态网站生成器可以显着提高网站速度、安全性以及SEO性能，同时降低托管成本和维护工作量。
• 静态网站生成器（如Gatsby.js）可以将您的动态WordPress网站转换为静态网站，从而带来诸多优势，例如降低页面加载速度、简化管理以及提升安全性。
• WordPress迁移过程包括设置静态网站生成器、将WordPress文章/页面导出为Markdown以及生成静态资源。掌握React和GraphQL知识将有助于自定义和数据查询。
• 静态网站更安全，因为它们没有可被黑客攻击的数据库，WordPress管理面板中的任何潜在安全威胁都不会影响已部署的静态页面。
• 无头CMS可用于生成静态文件并将其同步到您的存储库，从而实现流程自动化。 WordPress可以用作静态网站的无头CMS，但也可以考虑其他现代内容管理方法。

静态网站的优势：

显着的速度提升并非唯一优势，将动态WordPress (WP)网站转换为静态网站还能带来以下好处：

• 降低页面加载速度：页面无需在运行时（用户请求时）进行预处理，内容无需从数据库中提取。因此，Web服务器的响应速度将大大加快（快10倍甚至更多）。
• 通过CDN降低延迟：您可以将这些静态页面直接部署到分布式内容交付网络 (CDN) 上，从而大幅缩短全球各地的响应时间。
• 简化管理：一旦您设置好工作流程（我们将在本文中介绍），您就会发现实际上无需再花费额外精力进行维护、WP升级或服务器更新。
• 大幅增强安全性：开箱即用的HTTPS，只有静态页面，不会运行在任何有问题的PHP版本或过时的WordPress上，甚至可能不会运行在Apache上。
• 提升SEO：Google不仅重视您的内容，还重视访问内容的便捷性和安全性。这实际上是如今仍然有效的少数搜索引擎优化方法之一：更快、更安全的网站在搜索引擎结果页面上的表现会更好。
• 安心无忧：无需升级PHP，无需担心WP未修补的安全漏洞，甚至无需管理Linux服务器。部署完成后，您可以轻松自如地享受您的咖啡/啤酒/茶/人参茶。

“WordPress安全吗？”答案很复杂……

WordPress开发人员遵循良好的标准和安全实践，尽管长期支持 (LTS) 仍然非常缺乏。但是，由于其架构本身的原因，有些事情是WP安全团队无法控制的，而直接由您负责：

• 更新您的服务器
• 安装WP更新
• 安装PHP更新
• 安装插件和主题的更新（如果可用）
• 定期管理WP和PHP（两者都没有LTS）的主要升级

所有这些都是一个持续的过程，插件并非微不足道的威胁，特别是未维护的插件。这些插件通常存在安全漏洞，攻击者可利用这些漏洞控制WordPress安装。这正是Automattic花费数年时间才在WordPress.com（WordPress的商业托管版本）上支持某些插件的原因。通过相当数量的有意识努力，WordPress可以安全。虽然您可以争辩说，这些是任何优秀的开发人员都应该付出的努力，但也可以肯定的是，您可以通过将WP网站转换为静态网站来减轻这些负担，同时重新定义其架构并永久消除几乎所有可能变成安全威胁的潜在点。毕竟，攻击者对普通的HTML、CSS文件和平面图像能做的不多。但是，您仍然需要注意跨站点脚本和跨站点请求伪造。 ?‍♂️

准备工作：静态网站生成器登场

来源：Netlify

我们在“100个Jamstack工具、API和服务助力您的网站”一文中简要回顾了静态网站生成器 (SSG)，并且还有大量未在此处介绍的SSG，因此请务必查看StaticGen以了解更多信息。某些SSG专门针对WordPress，例如WP2Static，但我们将重点介绍一个更通用的SSG，即Gatsby.js——“基于React的免费开源框架，可帮助开发人员构建超高速的网站和应用程序”。

WordPress迁移

我必须承认，尽管我希望这个过程非常简单，但有一些事情可能会使它变得更加繁琐和耗时，例如您可能已安装的现有插件（插件越少越好）以及您格式化文章的方式（越简单越好）。将此视为可能需要根据您的具体情况进行调整的指南。本质上，我们将执行以下操作：

1. 设置Gatsby.js
2. 将WP文章/页面导出为Markdown
3. 生成静态资源

步骤1：Fork Gatsby启动器

我们将首先fork Gatsby高级启动器或Gatsby Material启动器，这两个启动器都是针对Gatsby.js项目的经过调整的通用入门程序，第二个启动器使用“有主见的”Material Design模板（演示）。

这些启动器可以直接为您提供一个功能齐全的React驱动的渐进式Web应用程序 (PWA)，所有功能都已包含：

• 超快的加载时间（预渲染HTML，JS自动块加载）
• Markdown文章（代码语法高亮显示，嵌入YouTube视频，嵌入推文）
• 分页、标签、类别
• Disqus支持
• NetlifyCMS支持
• SEO功能（Google Analytics支持，站点地图和robots.txt生成，元标签，用于Google Rich Snippets的Schema.org JSON-LD，用于Facebook/Google /Pinterest的OpenGraph标签，用于Twitter Cards的Twitter标签）
• 同步Feed (RSS)
• 社交功能（Twitter、LinkedIn和Telegram分享按钮；Facebook和Reddit分享/分享计数）
• 开发工具（ESLint、Prettier、Remark-Lint，对GitHub Pages和Netlify的部署支持，CodeClimate配置文件和徽章）
• 等等！

据称，在成功迁移并部署到CDN后，您的网站性能应该如此出色，以至于使用Google Lighthouse进行审核应报告最佳结果：

安装和配置

您首先需要安装Gatsby.js和Node.js，以便您可以使用gatsby CLI和Node.js包管理器npm。对于Node.js，只需下载并安装即可，对于Gatsby.js，请参阅快速入门或设置您的开发环境。一旦您解决了这个问题，这就是您启动项目的方式（记住您也可以克隆gatsby-material-starter）：

gatsby new YourProjectName https://github.com/Vagr9K/gatsby-advanced-starter
npm run develop # 或 gatsby develop

高级（示例）和Material（示例）启动器的配置几乎相同。

如前所述，开箱即用地支持Netlify CMS，您可以通过编辑static/admin/config.yml来启用它，如下所示：

backend:
  name: github
  branch: master
  repo: your-user/your-repo

您还可以将Netlify CMS与GitLab或Bitbucket集成（请参阅后端配置）。

步骤2：导出WordPress文章

在某些情况下，您可以简单地使用ExitWP将包含所有文章和页面的已导出XML文件转换为Markdown文件。但是，根据您的WP设置和调整，此过程可能需要一些技巧；但仍然可行且值得去做。Tania Rascia在她的文章《一个时代的终结：从WordPress迁移到Gatsby》中很好地概述了她如何处理此过程的一部分。

步骤3：构建页面

鉴于Gatsby.js是一个React应用程序，成为React开发人员或至少是一位经验丰富的JavaScript程序员将对您进行Gatsby的紧密自定义大有帮助。了解一些GraphQL在进行查询和挖掘数据时也将非常方便，尤其是在这些页面不再由MySQL数据库提供服务的情况下。幸运的是，Gatsby.js的文档非常完善。以下是一些有用的资源：

• 通过数据以编程方式创建页面
• 创建和修改页面
• 通过数据以编程方式创建页面

现在您已经完成了页面生成，您可以安全地将资源（静态页面和图像）几乎放置在任何地方！查看我们“100个Jamstack工具、API和服务助力您的网站”列表的托管部分以获取一些想法，并查看我们关于使用自动化管道免费托管静态网站的文章。

安全性，一次到位！

即使您的WordPress管理员在互联网上（.htpasswd文件可以为您做很多事情），即使它未修补，即使您的WP备份被篡改，这些都不会影响您已部署的静态页面，因为前端已与之“分离”。不要误解我的意思，即使您在防火墙后面的本地局域网 (LAN) 上运行WordPress，您也应该定期更新它。由于主要且突然的PHP或WP升级，我看到我的网站被篡改或停止工作的次数超过我愿意承认的次数。但是，如果您的网站是静态的，这些安全问题就不复存在了！

失去我的头：无头CMS

如果您已经完成了这一步，您可能不再需要使用WordPress了。虽然您可以保留管理员来生成新的文章和页面，但另一种工作流程是使用另一个无头CMS为您生成静态文件并将其同步到您的存储库，所有这些都在一步内自动完成。这就是“无头CMS”——一个内容管理系统，它仍然作为后端实例在某个地方运行，但完全与实际的实时网站分离。WordPress是静态网站的常见无头CMS选择，实际上可能是大规模SSG部署中最常见的选择。虽然迁移方法可以涵盖许多情况，但您可能拥有过多的遗留内容或过多的内容流程内置于WordPress中，因此全面迁移可能无法立即实现。对于大型内容运营和数字媒体企业来说尤其如此。但是，如果您需要管理的历史较少，那么最好看看更现代的内容管理方法——远离动态服务网站的迁移是进行此类更改的好时机。我们已经实现的迁移支持Netlify CMS，尽管我们不会在此处介绍如何使用无头CMS。这是一个我们将在不久的将来用另一篇文章介绍的主题。

深入挖掘

在这样的文章中，我们只能介绍这么多内容，因此以下是一些关于使用SSG迁移WP的额外资源。

Gatsby.js

官方文档中心和博客非常全面且写得很好。以下是一些与WP相关的文章：

• 开始使用Gatsby和WordPress
• 从WordPress迁移到Gatsby.js和Jamstack
• 如何使用WordPress和Gatsby.js构建博客：第1部分、第2部分和第3部分

Hugo

Hugo基于Go编程语言，是另一个大型SSG名称，提供了大量可用的模板，并且是您可能考虑用于Gatsby.js的可靠选择。有一些工具可以将WordPress迁移到Hugo。如果您查看这些指南，您会发现虽然灵活性较低，但该过程应该比Gatsby.js简单得多：

• Chris Ferdinandi撰写的《从WordPress迁移到Hugo》
• Mattias Geniar撰写的《从WordPress迁移到Hugo的分步指南》
• Christopher Kirk-Nielsen撰写的《从WordPress切换到Hugo》

Jekyll

如果您设法设置了Ruby环境，Jekyll（可以将您的纯文本转换为静态网站和博客的SSG）甚至更易于使用，尽管它只会生成静态页面，而不是像Gatsby.js这样的Web应用程序。与Gatsby一样，您可以使用基于Python的ExitWP从WP生成Markdown。您还可以使用基于Windows的可执行文件wpXml2Jekyll从WP XML导出生成Jekyll就绪的Markdown文件。一些有用的文章：

• Sam Atkinson撰写的《将博客从WordPress迁移到Jekyll》
• Florian Courgey撰写的《从WordPress迁移到Jekyll：第1部分和第2部分》
• Mike Neumegen撰写的《面向WordPress开发人员的Jekyll》

软件即服务 (SaaS) 解决方案

Gatsby Cloud免费或付费提供对构建和维护Gatsby.js网站的支持，您可以轻松地自动化快速构建、访问预览、生成每日编辑以及轻松部署到Netlify、Cloudflare、AWS CloudFront或Akamai。HardyPress还会生成静态WordPress网站，并且付费后，您将拥有一个管理面板，您可以从中输入凭据以访问您的在线WP安装以当场管理所有内容：关闭已导入的实时WP安装，透明地部署到全球CDN、HTTPS、表单和搜索。其他具有商业支持的与WP相关的SSG包括Shifter、Strattic和Sitesauce。

结论和思考：王者已死？

对我来说，安心无忧非常重要，这也是我多年前停止开发WordPress网站的主要原因之一。我讨厌的是，错误可能会在任何给定时间出现（零日或其他），并且如果未及时修补，它会危及我的工作。相信我，由于主要且突然的PHP或WP升级，我看到我的网站被篡改或停止工作的次数超过我愿意承认的次数。但是，如果您的网站是静态的，这些安全问题就不复存在了！

在我看来，WordPress在2012年就已经达到了“石油峰值”的情况（请参阅Google趋势：WordPress 2004-至今）。如果它不非常快速地适应，它只会继续失去市场份额，而有利于能够以更好集成的流程完成更快、更安全工作的技术。WP的创建者兼Automattic首席执行官Matt Mullenweg也承认了这一点，因为他开始鼓励开发人员“深入学习JavaScript”，并通过引入Calypso大胆地放弃了WP的PHP后端，转而使用JavaScript（请阅读他对该过程的反思）。这给社区带来了冲击波（甚至恐慌），谣传WordPress将完全放弃PHP。Gutenberg只不过是朝着这个方向迈出的又一步。如果它设法重塑自我，那么国王最终可能会保留其王冠。如果不是，嘿，为近三分之一的互联网提供动力并非易事——国王万岁！?

阅读有关SitePoint如何在2020年将其前端迁移到由WordPress无头CMS支持的Gatsby的文章。

Jamstack基础知识

了解Jamstack。我们的Jamstack基础知识集合可帮助您迈出Jamstack的第一步，并且我们正在不断地向其中添加内容。我们将为您提供成为专业人士所需的教程。您始终可以参考我们的索引，因为它会在我们的Jamstack简介结尾处更新：➤

关于将WordPress迁移到静态网站生成器的常见问题解答 (FAQ)

将WordPress迁移到静态网站生成器有哪些好处？

将WordPress迁移到静态网站生成器具有多种好处。首先，静态网站通常比WordPress网站更快，因为它们不需要处理PHP或从数据库中提取数据。这可以显着提高网站的加载速度，这对SEO和用户体验至关重要。其次，静态网站更安全，因为它们没有可被黑客攻击的数据库。最后，静态网站的托管成本更低，维护也更容易，因此非常适合小型企业和个人博客。

如何确保从WordPress到静态网站生成器的顺利迁移？

为了确保顺利迁移，提前做好计划至关重要。首先备份您的WordPress网站，以便在出现任何问题时可以进行回退。然后，选择适合您需求的静态网站生成器。一些流行的选择包括Jekyll、Hugo和Gatsby。选择生成器后，您可以使用Simply Static或WP2Static等插件导出WordPress内容。导出后，您需要设置新的静态网站并导入您的内容。最后，彻底测试您的新网站，以确保一切正常运行。

迁移到静态网站生成器时，我可以保留我的WordPress主题吗？

不幸的是，您无法直接在静态网站生成器中使用您的WordPress主题。但是，您可以使用静态网站生成器的模板系统重新创建您的主题。这需要一些HTML、CSS和可能JavaScript的知识。或者，您可以选择一个与您的WordPress主题非常相似的预制主题。

迁移到静态网站生成器时，我的WordPress插件会发生什么情况？

迁移到静态网站生成器时，您将失去WordPress插件提供的功能。但是，许多静态网站生成器都有自己的插件或扩展程序，可以提供类似的功能。您需要在迁移后手动研究和安装这些插件。

我仍然可以在静态网站生成器中使用内容管理系统 (CMS) 吗？

是的，您仍然可以在静态网站生成器中使用CMS。一些流行的选择包括Netlify CMS、Forestry和Contentful。这些CMS允许您在一个用户友好的界面中管理您的内容，类似于WordPress。但是，它们会生成静态文件，这些文件可以由您的静态网站生成器提供服务。

如何在静态网站上处理表单？

在静态网站上处理表单可能有点棘手，因为静态网站没有后端来处理表单提交。但是，您可以使用Formspree或Netlify Forms等第三方服务来处理表单提交。这些服务提供一个URL，您可以将其用作表单中的action属性，它们将处理表单提交并将数据发送给您。

如何在静态网站上处理评论？

与表单一样，评论在静态网站上也可能是一个挑战，因为它们没有后端来存储和检索评论。但是，您可以使用Disqus或Commento等第三方服务来处理评论。这些服务提供一个JavaScript代码段，您可以将其添加到您的网站中，它们将处理评论功能。

我可以在不丢失SEO的情况下将WordPress网站迁移到静态网站生成器吗？

是的，您可以在不丢失SEO的情况下将WordPress网站迁移到静态网站生成器。关键是确保您的新静态网站保持与WordPress网站相同的URL结构。这样，搜索引擎仍然可以识别您的页面并保持其排名。此外，静态网站通常比WordPress网站更快，这实际上可以提高您的SEO。

我可以在发布静态网站之前预览它吗？

是的，大多数静态网站生成器都有一个内置的开发服务器，允许您在发布网站之前预览它。这是一种在网站上线之前测试网站并确保一切正常运行的好方法。

发布静态网站后，如何更新它？

更新静态网站与更新WordPress网站略有不同。您无需登录后端进行更改，而是需要更新网站的源文件，然后重建网站。可以使用Netlify或Vercel等持续集成/持续部署 (CI/CD) 服务来自动化此过程。

以上是如何从WordPress迁移到静态站点生成器的详细内容。更多信息请关注PHP中文网其他相关文章！