wordpress生成静态
In this article, you’ll learn how to turn your WordPress-driven site into a static site with just a handful of powerful tools. We’ll focus on migrating from WordPress to a static site generator, and cover some of the alternatives including using a headless CMS.
在本文中，您将学习如何使用少量强大的工具将WordPress驱动的站点转变为静态站点。 我们将集中精力从WordPress迁移到静态网站生成器，并介绍一些替代方法，包括使用无头CMS。
Why would you do this? Because you can get massive speed gains and therefore boost your site’s performance in search engines, and also reduce (or eliminate) your hosting bill and dramatically improve your security.
你为什么要这样做？ 因为您可以大大提高速度，从而提高网站在搜索引擎中的性能，还可以减少(或消除)托管费用，并显着提高安全性。
Fantastic speedups are certainly no small feat, but that isn’t all you can get from turning your dynamic WordPress (WP) site install into a static one.
惊人的加速当然不是一件容易的事，但这并不是将动态WordPress(WP)网站安装转变为静态网站所能获得的全部。
Let’s summarize:
让我们总结一下：
Reduced page load speed. Pages aren’t preprocessed at runtime (user’s request), and content isn’t pulled from the database. As a result, the web server will respond a lot faster (10x and even more).
页面加载速度降低 。 页面不会在运行时(用户的请求)进行预处理，并且内容不会从数据库中提取。 其结果是，Web服务器将响应速度快了很多 (10倍甚至更多)。
Reduced latency through CDN’s. You can just drop these now-static pages on a distributed content delivery network (CDN), hugely improving response times all around the world.
通过CDN减少了延迟 。 您可以将这些当前静态的页面放在分布式内容分发网络(CDN)上，从而极大地缩短了全世界的响应时间。
Easier management. Once you’ve set your workflow — which is what we’ll do here — you’ll see that you actually won’t need to spend any additional effort in maintenance, WP upgrades or server updates.
更轻松的管理 。 设置好工作流程后(这就是我们在这里要做的工作)，您将看到实际上不需要在维护，WP升级或服务器更新上花费任何额外的精力。
Dramatically enhanced security. HTTPS out of the box with only static pages that aren’t being run by some bogus PHP version or an outdated WordPress, and most probably not even by Apache.
大大增强了安全性 。 HTTPS开箱即用，仅包含一些伪造PHP版本或过时的WordPress，甚至很可能不是由Apache都不运行的静态页面。
Improved SEO. Google values not only your content but how easy and secure the access to it is. This is, in fact, one of the few search engine optimizations still valid these days: a faster, more secure site will perform better on the search engine results page.
改进的SEO 。 Google不仅重视您的内容，而且重视访问的简便性和安全性。 实际上，这是目前仍有效的少数搜索引擎优化之一：更快，更安全的网站将在搜索引擎结果页面上表现更好。
Peace of mind. No need to upgrade PHP, no unpatched WP concerns, even no Linux servers being managed. Just relax and have your coffee/beer/tea/ginseng after your deployment.
安心 。 无需升级PHP，无需打补丁的WP，甚至无需管理Linux服务器。 部署后，放松一下，喝杯咖啡/啤酒/茶/人参。
WordPress developers follow good standards and security practices, although a long-term support (LTS) is still very much missing. However, because of its very architecture, there are things that are out of the WP Security Team’s hands and transferred directly into yours:
WordPress开发人员遵循良好的标准和安全规范 ，尽管仍然缺少长期支持 (LTS)。 但是，由于其本身的体系结构，有些事情不在WP安全团队的掌控之下，而是直接转移到您的手中：
updating your server 更新您的服务器 installing WP updates 安装WP更新 installing PHP updates 安装PHP更新 installing updates for plugins and themes (if available, at all) 安装插件和主题的更新(如果有的话) managing WP and PHP (neither of which has LTS) mayor upgrades every once in a while 管理WP和PHP(均不提供LTS)，偶尔进行市长升级All of this is a constant process, and plugins are not a minor threat, especially unmaintained ones. These often have security holes by which attackers take control of WordPress installations. That is precisely why it took Automattic years to support some plugins on WordPress.com, the commercial, managed version of WordPress.
所有这些都是一个持续不断的过程，插件并不是一个小的威胁，尤其是未维护的威胁。 这些漏洞通常带有安全漏洞，攻击者可以利用这些漏洞控制WordPress的安装。 这就是为什么Automattic花了几年的时间来支持WordPress.com(商业化的WordPress托管版本)上的某些插件的原因。
WordPress could be secure with a fair amount of conscious effort. And while you could argue that these are efforts any decent developer should put in, it’s also true that you can potentially lift this weight off your shoulders by turning your WP site into a static one, and while doing so redefining its architecture and removing for good nearly all of the available spots that could turn into a security threat. After all, there isn’t much an attacker can do with plain HTML, CSS files and flat images.
通过大量的有意识的努力，WordPress 可能是安全的。 尽管您可能会说这些是任何体面的开发人员都应该付出的努力，但也确实可以通过将WP网站变成静态站点，并重新定义其体系结构并永久删除，从而潜在地减轻负担。几乎所有可能变成安全威胁的可用位置。 毕竟，攻击者对纯HTML，CSS文件和平面图像无能为力。
However, you’ll still need to take care of cross-site scripting and cross-site request forgery. 🤷♂️
但是，您仍然需要注意跨站点脚本编写和跨站点请求伪造 。 ♂♂️
Provided: Netlify
提供：Netlify
We briefly reviewed static site generators (SSGs) on our list of 100 Jamstack tools, APIs and services to power your sites article, and there are tons more than we’ll cover here, so make sure to check StaticGen to learn more.
我们简要回顾我们的静态网站发生器(的SSG) 的100 Jamstack工具，API和服务，以支持您的站点列表的文章，并有吨以上，我们将讨论在这里，所以一定要检查StaticGen了解更多信息。
Some SSGs are specifically targeted at WordPress, such as WP2Static, but we’ll focus on a more general-purpose one, Gatsby.js — the “free and open source framework based on React that helps developers build blazing fast websites and apps”.
一些SSG专门针对WordPress，例如WP2Static ，但我们将专注于更具通用性的工具，即Gatsby.js — “基于React的免费开放源代码框架，可帮助开发人员构建快速的网站和应用程序” 。
I’ll have to admit that, as much as I wanted this process to be dead simple, there are a number of things that could make it a little more cumbersome and time consuming, such as the existing plugins you may have installed (the fewer the easier) and the way in which you’ve formatted your posts (the simpler the better). Think of this as a guideline that you might need to adjust to your specific case.
我必须承认，尽管我希望这个过程变得简单，但有很多事情可能会使它变得更加麻烦和耗时，例如您可能已经安装的现有插件(越容易)以及帖子的格式设置(越简单越好)。 将此视为您可能需要针对特定情况进行调整的准则。
Essentially, this is what we’ll do:
本质上，这就是我们要做的：
set up Gatsby.js 设置Gatsby.js export WP posts/pages to Markdown 将WP帖子/页面导出到Markdown generate the static assets 产生静态资产We’ll start by forking either the Gatsby Advanced Starter or the Gatsby Material Starter, both of which are tweaked general purpose primers for a Gatsby.js project, the second one with an “opinionated” Material Design template (demo).
我们将从分叉Gatsby Advanced Starter或Gatsby Material Starter开始 ，这两个都是Gatsby.js项目的经过调整的通用入门 ，第二个带有“经过优化”的Material Design模板( 演示 )。
Right off the bat these starters will get you a fully featured React-powered progressive web application (PWA) with all batteries included:
这些入门程序马上就能为您提供功能齐全的React驱动的渐进式Web应用程序 (PWA)，其中包括所有电池：
blazing fast loading times (pre-rendered HTML, JS auto-chunk loading) 快速的加载时间(预渲染HTML，JS自动批量加载) Markdown posts (code syntax highlight, embed YouTube videos, embed Tweets) Markdown帖子(代码语法突出显示，嵌入YouTube视频，嵌入推文) pagination, tags, categories 分页，标签，类别Disqus support
Disqus支持
NetlifyCMS support
NetlifyCMS支持
SEO goodies (Google Analytics support, Sitemaps and robots.txt generation, meta tags, Schema.org JSON-LD for Google Rich Snippets, OpenGraph Tags for Facebook/Google+/Pinterest, Twitter Tags for Twitter Cards)
SEO好东西( Google Analytics ( 分析)支持， Sitemaps和robots.txt生成，元标记，Google Rich Snippets的Schema.org JSON-LD ，Facebook / Google + / PinterestOpenGraph 标记 ，Twitter卡的Twitter标记 )
syndication feeds (RSS) 联合供稿(RSS) social features (Twitter, LinkedIn and Telegram share button; Facebook and Reddit share/share count) 社交功能(Twitter，LinkedIn和Telegram共享按钮； Facebook和Reddit共享/共享计数)development tools (ESLint, Prettier, Remark-Lint, deploying support for GitHub pages and Netlify, CodeClimate config file and badge)
开发工具( ESLint ， 更漂亮 ， 备注皮棉 ，部署支持GitHub的页面和Netlify ， CodeClimate配置文件和徽章)
and more! 和更多！The claim is that after a successful migration and deployment to a CDN, your site should be so performant that an audit with Google Lighthouse should report the best results possible:
据称，在成功迁移和部署到CDN之后，您的网站应具有出色的性能，以至于Google Lighthouse的审核应报告可能的最佳结果：
You’ll first need to install Gatsby.js and Node.js so that you can use the gatsby CLI and the Node.js packet manager npm. For Node.js just download and install, for Gatsby.js see the Quick Start or Set Up Your Development Environment.
首先，您需要安装Gatsby.js和Node.js，以便可以使用gatsby CLI和Node.js数据包管理器npm 。 对于Node.js，只需下载并安装 ，对于Gatsby.js，请参阅快速入门或设置您的开发环境 。
Once you sort that out, this is how you start a project (remember you can also clone gatsby-material-starter):
整理好之后，这就是开始项目的方式(请记住，您也可以克隆gatsby-material-starter )：
gatsby new YourProjectName https://github.com/Vagr9K/gatsby-advanced-starter npm run develop # or gatsby developThe configuration for the Advanced (example) and Material (example) starters are pretty much the same.
Advanced( 示例 )和Material( 示例 )启动器的配置几乎相同。
As mentioned, there is Netlify CMS support right out-of-the-box which you can sync with your Git repository enable by editing static/admin/config.yml as follows:
如前所述，Netlify CMS支持开箱即用，您可以通过编辑static/admin/config.yml来与Git存储库启用同步，如下所示：
backend: name: github branch: master repo: your-user/your-repoYou can also integrate Netlify CMS with GitLab or Bitbucket (see Backend Configuration).
您还可以将Netlify CMS与GitLab或Bitbucket集成(请参阅后端配置 )。
In some cases you might be able to convert an XML exported file with all of the posts and pages into Markdown files by simply using ExitWP.
在某些情况下，您可以仅通过使用ExitWP将包含所有帖子和页面的XML导出文件转换为Markdown文件。
However, depending on your WP setup and tweaks, this process can demand a bit of craft; but still manageable and worth doing.
但是，根据您的WP设置和调整，此过程可能需要一些技巧。 但仍可管理且值得一做。
Tania Rascia wrote a good overview about how she dealt with this part of the process on her article The End of an Era: Migrating from WordPress to Gatsby.
Tania Rascia在她的文章《时代的终结：从WordPress迁移到Gatsby》中很好地概述了如何处理流程的这一部分。
Given that Gatsby.js is a React app, being a React developer or at the very least a seasoned JavaScript programmer will help you a great deal in order to customize Gatsby tightly. Knowing some GraphQL will also become very handy in making queries and digging through your data, especially now that those pages aren’t served by a MySQL database.
鉴于Gatsby.js是React应用程序，因此作为React开发人员或至少是经验丰富JavaScript程序员，将为您提供很多帮助，以紧密地自定义Gatsby。 知道一些GraphQL在查询和挖掘数据方面也将非常方便，尤其是现在这些页面不再由MySQL数据库提供服务时。
Fortunately, Gatsby.js is very well documented. Here are some useful resources:
幸运的是，Gatsby.js的文档非常丰富。 以下是一些有用的资源：
Programmatically create pages from data
通过数据以编程方式创建页面
Creating and Modifying Pages
创建和修改页面
Creating Pages from Data Programmatically
以编程方式从数据创建页面
Now that you’re done with pages generation, you can securely drop the assets (static pages and images) pretty much anywhere! Check the Hosting section of our list of 100 Jamstack tools, APIs and services to power your sites for some ideas, and take a look at our article on hosting static sites for free with an automated pipeline.
现在您已经完成了页面生成，您可以在几乎任何地方安全地放置资产(静态页面和图像)了！ 请查看我们的100个Jamstack工具，API和服务列表中的Hosting(托管)部分， 以为您的站点提供动力，以获取一些想法，并查看有关通过自动化管道免费托管静态站点的文章。
Even if your WordPress admin is on the Internet (and there’s a lot an .htpasswd file could do for you), and even if it’s unpatched, and even if your WP backed gets defaced, none of this will affect your already deployed static pages, as the front end is “detached” from it.
即使您的WordPress管理员在Internet上(而且.htpasswd文件可以为您做很多事情)，即使未打补丁，甚至您的WP支持被污损， 这些都不会影响您已经部署的静态页面 ，因为前端与它“分离”。
Don’t get me wrong, even if you run WordPress on a local area network (LAN) behind a firewall, you should still update it regularly.
不要误会我的意思，即使您在防火墙后的局域网(LAN)上运行WordPress，也应该定期对其进行更新。
If you’ve got up until this point, you may not need to use WordPress anymore. While you can keep the admin to generate new posts and pages, another workflow would be using another headless CMS to generate the static files for you and sync them to your repository, all automated and in a single step.
如果您到目前为止还没有起床，则可能不再需要使用WordPress。 尽管可以让管理员生成新的帖子和页面，但另一个工作流程将使用另一个无头CMS为您生成静态文件并将它们同步到您的存储库，这些操作自动化且自动化。
Enter the “headless CMS” — a content management system that still runs as a back-end instance somewhere, but that is completely detached from the actual live website.
输入“ 无头CMS ”-一种内容管理系统，该系统仍在某个地方作为后端实例运行，但与实际的实时网站完全分离。
WordPress is a common choice of headless CMS for static sites, and may in fact be the most common for large-scale SSG deployments. While a migration approach can cover many situations, you may have too much legacy content or too much of your content process built into WordPress for a wholesale migration to be immediately feasible. This is particularly true for large content operations and digital media businesses. If you have less history to manage, though, it’ll serve you well to look at more modern approaches to content management — the migration away from a dynamically served site is as good a time as any to make this kind of change.
对于静态站点，WordPress是无头CMS的常见选择，实际上，对于大型SSG部署，WordPress可能是最常见的选择。 尽管迁移方法可以解决许多情况，但您可能有太多的旧内容或WordPress中内置的内容处理太多，以使批量迁移立即可行。 对于大型内容运营和数字媒体业务而言尤其如此。 但是，如果您要管理的历史记录较少，那么可以更好地了解更现代的内容管理方法-从动态服务的站点迁移到进行此类更改的时间是一样的。
The migration we implemented already supports Netlify CMS, although we won’t cover how to use a headless CMS here. This is a topic we’ll return to with its own article in the near future.
我们实施的迁移已经支持Netlify CMS，尽管我们在此不介绍如何使用无头CMS。 这是一个主题，我们将在不久的将来再写一篇文章。
There’s only so much that we can cover in an article like this, so here are some additional resources on the topic of migrating WP with an SSG.
我们只能在这样的文章中介绍很多内容，因此这里有一些有关使用SSG迁移WP的主题的其他资源。
The official documentation hub and blog are very comprehensive and very well written.
官方文档中心和博客非常全面且编写得很好。
Here are some WP-related articles:
以下是一些与WP相关的文章：
Getting Started with Gatsby and WordPress
Gatsby和WordPress入门
Migration to Gatsby.js and Jamstack from WordPress
从WordPress迁移到Gatsby.js和Jamstack
How to Build a Blog with WordPress and Gatsby.js: Part 1, Part 2 and Part 3
如何使用WordPress和Gatsby.js构建博客： 第1 部分 ， 第2 部分和第3部分
Based on the Go programming language, Hugo is another big name for SSGs with plenty of templates available, and a solid option you might consider to Gatsby.js.
基于Go编程语言， Hugo是SSG的另一个大名，它具有许多可用的模板 ，您可以考虑对Gatsby.js进行选择。
There are tools to migrate WordPress to Hugo. If you check out these guides, you’ll see that while you’ll have less flexibility, the process should be quite a bit simpler that with Gatsby.js:
有一些工具可以将WordPress迁移到Hugo 。 如果您查看这些指南，将会发现虽然灵活性较低，但是使用Gatsby.js的过程应该要简单得多：
Migrating From WordPress to Hugo by Chris Ferdinandi
克里斯· 费迪南迪 (Chris Ferdinandi) 从WordPress迁移到雨果(Hugo)
A step-by-step guide on migrating from WordPress to Hugo by Mattias Geniar
Mattias Geniar撰写的从WordPress到Hugo迁移的分步指南
Switching From WordPress To Hugo by Christopher Kirk-Nielsen
Christopher Kirk-Nielsen 从WordPress切换到Hugo
If you manage to set up the Ruby environment, Jekyll, the SSG that can transform your plain text into static websites and blogs, is even more straightforward to use, although it will only generate static pages, not web applications like Gatsby.js.
如果您设法设置Ruby环境， Jekyll (可以将纯文本转换为静态网站和博客的SSG)使用起来更加简单，尽管它只会生成静态页面，而不会生成Gatsby.js之类的Web应用程序。
Just as with Gatsby, you can use the Python-based ExitWP to generate Markdown out of WP. And you also have the Windows executable wpXml2Jekyll to general Jekyll-ready Markdown files from a WP XML export.
与Gatsby一样，您可以使用基于Python的ExitWP从WP生成Markdown。 而且您还具有Windows可执行文件wpXml2Jekyll ，可从WP XML导出将其转换为通用的Jekyll就绪Markdown文件。
Some useful articles:
一些有用的文章：
Migrating a blog from WordPress to Jekyll by Sam Atkinson
由Sam Atkinson 将博客从WordPress迁移到Jekyll
Migrate from WordPress to Jekyll: Part 1 and Part 2 by Florian Courgey
从WordPress迁移到Jekyll： 第1 部分和第2部分 by Florian Courgey
Jekyll For WordPress Developers by Mike Neumegen
Jekyll对于WordPress开发人员 ，作者Mike Neumegen
Gatsby Cloud offers support to build and maintain Gatsby.js sites for free or for a fee, where you could automate your fast builds, access to previews, generate daily edits, and fire deployments with ease to Netlify, Cloudflare, AWS CloudFront or Akamai.
Gatsby Cloud提供免费或付费建立和维护Gatsby.js网站的支持，您可以在其中自动进行快速构建，访问预览，生成每日编辑以及轻松部署Netlify，Cloudflare，AWS CloudFront或Akamai。
HardyPress also generates static WordPress sites, and for a fee you’ll have an admin panel from where you can enter the credentials to access your online WP installations to manage everything on the spot: shut down live WP installs that were already imported, transparently deploy to a global CDN, HTTPS, forms, and search.
HardyPress还会生成静态WordPress网站，并且需要付费才能获得一个管理面板，您可以从中输入凭证来访问在线WP安装，以现场管理一切：关闭已导入的实时WP安装，透明地部署到全局CDN，HTTPS，表单和搜索。
Other WP-related SSGs with commercial support are Shifter, Strattic, and Sitesauce.
其他具有商业支持的与WP相关的SSG包括Shifter ， Strattic和Sitesauce 。
Peace of mind is huge for me, and it’s one of the main reasons why I stopped developing WordPress sites years ago. I hated that a bug might come up (zero day or otherwise) at any given time and that, if not patched in time, it would jeopardize my work. And believe me, the amount of times I’ve seen my websites defaced or simply stop working because of a major — and sudden — PHP or WP upgrade, are more than I care to admit. But these security concerns are gone if your site is static!
内心的平静对我来说是巨大的，这是几年前我停止开发WordPress网站的主要原因之一。 我讨厌在任何给定的时间( 零天或其他时间)都会出现错误，并且如果不及时修补，它将危害我的工作。 并且相信我，由于重大或突然PHP或WP升级，我看到我的网站被破坏或停止工作的次数超出了我的意愿。 但是， 如果您的站点是静态的，这些安全问题将消失 ！
In my opinion, WordPress already reached its “peak oil” situation in 2012 (see Google Trends: WordPress 2004-present). And if it doesn’t adapt very quickly, it will only keep losing market share in favor of technologies that can do a faster and more secure job with better integrated workflows.
在我看来，WordPress在2012年已经达到“ 峰值油 ”的状况(请参阅Google趋势：WordPress 2004年至今 )。 如果它不很Swift适应，它只会保留赞成，可以做更好的集成的工作流更快速，更稳定的工作技术失去市场份额。
Matt Mullenweg, creator of WP and CEO of Automattic, also acknowledged this when he started encouraging developers to “learn JavaScript deeply“, and in a bold move got rid of WP’s PHP back-end in favor of JavaScript with the introduction of Calypso (read his own reflection on the process). This sent shockwaves (and even panic) through the community, with rumors of WordPress ditching PHP altogether. And Gutenberg was nothing but another step in that direction.
WP的创建者兼Automattic的首席执行官Matt Mullenweg在开始鼓励开发人员“ 深入学习JavaScript ”时也承认了这一点，并大胆地放弃了WPPHP后端，并通过引入Calypso来支持JavaScript。 他对过程的反思 )。 这在整个社区引发了冲击波( 甚至引起了恐慌 )，有谣言称WordPress完全放弃了PHP 。 古腾堡不过是朝着这个方向迈出的又一步。
The king might keep its crown after all if it manages to reinvent itself. And if not, hey, having powered nearly a third of the Internet was no small feat — so long live the king! 👑
如果国王能够成功地改造自己，那么他最终可能会保留其王冠。 如果没有，嘿，为近三分之一的互联网提供动力绝非易事-国王万岁！ 👑
Read about how SitePoint moved its front end to Gatsby powered by a WordPress headless CMS in 2020.
了解如何在2020年将SitePoint的前端移动到采用WordPress无头CMS的盖茨比 。
Get up to speed with the Jamstack. Our Jamstack Foundations collection helps you take your first steps into the Jamstack and beyond, and we’re adding to it constantly. We’ll bring you the tutorials you need to become a pro. You can always refer to our index as it’s updated at the end of our Introduction to the Jamstack:
赶紧使用Jamstack。 我们的Jamstack Foundations系列可帮助您迈入Jamstack及其它领域之外的第一步，并且我们会不断对其进行补充。 我们将带给您成为专业人士所需的教程。 您可以随时参考我们的索引，因为它在Jamstack简介的末尾进行了更新：
➤ Jamstack Foundations
➤Jamstack基础
翻译自: https://www.sitepoint.com/migrate-wordpress-static-site-generator/
wordpress生成静态
相关资源：无需插件wordpress生成静态缓存文件的方法