静态站点生成器是将模板编译成静态 HTML 页面的系统。如果这听起来很有效——是的，确实如此。没有服务器处理或渲染，因此静态网站往往非常快速和轻量级，为您和您的用户节省宝贵的时间和带宽。这种效率的提高体现在成本的降低和潜在的收入增加上。
从优化 WordPress 到静态化
说到高效的收入来源，我想到了 WordPress。它为 28% 的互联网提供动力，是一个强大的平台，具有许多强大的功能，包括由一系列插件、主题、API 等支持的广泛的用户和内容管理。
即使是我们行业的大玩家也使用WordPress。像Smashing Magazine和CSS-Tricks这样的网站使用 WordPress，尽管在这两种情况下都使用了显着的自定义实例。但是，使用 WordPress 可能是一项乏味的任务，尤其是在自定义和优化性能时。
我在 2015 年创办了一个小型博客。我的第一直觉是使用 WordPress。它给了我一个快速启动，因为我已经在使用 WordPress。我在DigitalOcean上创建了一个新的 droplet作为服务器，将Vesta设置为托管控制面板，并将 WordPress 安装为博客平台。最终，我设计并开发了一个全新的 WordPress 主题。唯一缺少的是内容。
我知道我想分享一些关于 Atom 的技巧，因为当时我正在使用这个很棒的编辑器。我发表了一些关于它的文章并与社区分享。
起初，我并没有太关注性能，因为我太专注于内容。过了一会儿，我注意到了一些性能问题。Google PageSpeed Insights 的分数很差，所以我努力修复和优化我的网站，获得了几乎完美的 99/100 分：
- 我从 Nginx+Apache 切换到 Nginx+PHP-FPM。
- 我使用 CloudFlare 来提高速度和保护。
- 我使用 Cloudinary 来托管图像。
- 我调整了我的主题并使用了关键 CSS。
唯一的警告是针对我当时不知道如何解决的 Google Analytics 缓存问题。
但是，如果 99/100 或 100/100 仍然无法获得您想要的性能怎么办？这就是静态页面生成器参与竞争的地方。
进入静态页面生成器和 Hexo
那么什么是静态站点生成器？
顾名思义，静态网站生成器是一个生成静态 HTML 文件的系统。提供静态 HTML 文件比动态创建页面要快得多。没有服务器渲染或编译，这通常会导致页面加载延迟。
在谈论性能时，必须考虑缓存。尽管缓存 WordPress 有多种技术，但与缓存静态文件不同，这通常不是一项简单的任务。提供缓存文件比从服务器提供实际文件性能更高，并且可以在加载网站时节省时间。
今年 6 月，Smashing Magazine 的 Vitaly Friedman 在我所在城市的一个研讨会上介绍了JAMstack。我从来没有听说过它，我很感兴趣。研讨会结束后，我研究了一下这个新概念，我意识到它是多么的棒。我意识到我的网站不需要 WordPress。
第一步是决定使用哪个静态页面生成器。我不知道有多少。我决定尝试一下Hexo 博客框架。它可以部署到Netlify，有一个从 WordPress 迁移的插件，并且使用我熟悉的 Node.js，这与分别基于 Ruby 和 Go 的 Jekyll 和 Hugo 不同。而且，正如我后来发现的那样，它的速度非常快。
将 WordPress 迁移到 Hexo
Hexo 安装非常简单。使用 npm 全局安装hexo-cli，运行hexo init命令，安装 npm 依赖项，然后瞧：
npm i -g hexo-cli hexo init <blog-name> cd <blog-name> npm install
要进行迁移，请安装hexo-migrator-wordpress 插件。此插件需要 XML 文件作为源。XML 文件可以通过 WordPress 导出工具导出，该工具可以在管理面板的Tools -> Export -> WordPress下找到。最后，输入hexo migrate命令完成导入。
hexo migrate wordpress <source>
剩下要做的就是检查结果。运行hexo server命令启动服务器并在给定地址打开浏览器。
hexo server
Markdown 及其局限性
Hexo 开箱即用地支持 Markdown。Markdown 是一种标记语言，许多人使用它来格式化 README 文件、评论和帖子。但它也可以用来写你的文章。它的语法直观且易于学习。
Markdown 的另一个优点是它可以生成干净且有效的 HTML。这允许开发人员创建干净且可维护的 CSS 规则来设置博客文章和页面的样式。
开发人员的生活绝非易事。我们经常遇到可能导致我们花时间在意想不到的事情上的问题。如果我们在此过程中学到了一些东西，那么我们就不会浪费这个时间，这是一件好事。同样的事情发生在我身上。我以为一切都很顺利，因为没有编译错误，但后来我注意到有些事情没有按预期工作。
例如，Codepen 演示没有加载。我搜索了一个 Hexo 插件，找到了一个。不幸的是，这个插件不是官方的，它会产生不可接受的 HTML 错误。我想贡献并解决问题，但最新的拉取请求已经有一年半多没有解决了。我决定更容易分叉存储库，解决问题，并在 Hexo 页面上发布插件，以便任何人都可以使用它。该插件被接受，我更新了内容，Codepen 演示就像一个魅力。
CanIUse 嵌入也出现了类似的问题。既然我知道如何创建一个 Hexo 插件，就没有理由不这样做了。我的hexo-caniuse 插件也发布了，我的hexo -cloudinary 插件也发布了，用于从 Cloudinary CDN 加载的响应式图像。
重新设计和优化
网站的设计是相当基础的。Hexo 在官方网站上免费提供了一些主题，但我想为我的 Hexo 网站提供一个独特的主题。在阅读了文档并学习了如何自定义 Hexo 之后，我开始从头开始开发一个原创主题。
为了创建新模板，我决定使用EJS 进行模板化。由于从未使用过 EJS，我将其视为学习新模板语法的机会。如果你不喜欢 EJS，Hexo 通过插件为你提供 Swig 、 Haml或pug支持。
在重新设计过程中，我密切关注性能。通过遵循最佳实践，我们可以进一步加快我们的静态网站。将 JavaScript 文件放在文档底部并使用关键 CSS 技术为您的受众创造最佳体验。
SEO 优化对于谷歌等搜索引擎上的博客可见性至关重要。Hexo 有一个用于插入 Open Graph 数据的内置助手。Hexo 使用 YAML 文件来存储站点和主题配置。我使用主题配置文件来配置站点名称、描述和各种社交 ID。
将 Gulp 或 Webpack 添加到您的构建过程中总是很有帮助和推荐的。我使用 Gulp 压缩和压缩 CSS 和 JavaScript 文件，一切就绪。我可以部署它。
网络化
Netlify 是一个为网站和应用程序提供托管的平台，具有极快的性能。它将自己推销为一个统一的平台，可以自动化代码以创建高性能且易于维护的网站。
“只需推送您的代码，剩下的交给我们。”
如您所料，配置网站很简单：
- 设置域。
- 更改 DNS 记录。
- 设置构建和部署。
- 打开 SSL。
一切准备就绪后，我运行了一些基本测试来查看分数，包括Pingdom 网站速度测试、网页测试和Testmysite.io。结果非常好，因为该网站在每个工具上都获得了最高分。
CloudFlare
尽管分数很高，我还是想试试 CloudFlare，看看它还能在多大程度上加快网站速度。CloudFlare 一开始可能会让人不知所措，但学习如何使用它是基础。配置 CloudFlare 后，我重新运行了测试，结果甚至更好。
最后的测试是Google PageSpeed Insights。移动版和桌面版的得分几乎为 100%。问题是谷歌分析浏览器缓存。我设法通过使用 CloudFlare App for Google Analytics 解决了这个问题。
它要多少钱？
在带有 CloudFlare 的 Netlify 上使用 Hexo 无需任何费用。
Hexo 是一个开源平台，因此无论您决定如何使用它都是免费的。它拥有一个庞大的社区，并且是根据 StaticGen 排名第三的最流行的开源静态页面生成器。
Netlify 有一个开放的计划，它为我们的托管提供了很好的选择。图像也托管在 Cloudinary 的开放式计划中。CloudFlare 的免费计划允许我们配置大量规则，可以加快您已经快速的网站。它还允许我们修复 Google Analytics（分析）浏览器缓存问题。我也没有为域名付费，因为我使用了政府提供的免费个人域名。
这个项目设置将我的预算减少到最低限度。如果您的项目需要更高级的功能，静态页面生成器仍然可以为您节省几块钱。
提供缓存文件意味着 CPU 和带宽的使用会减少，这反过来意味着您可以使用更便宜的托管计划和不太强大的硬件。不仅如此，您的网站将更快，这意味着您的用户将喜欢在移动和桌面设备上浏览。而且，由于页面加载速度会影响 Google 搜索排名，因此您的网站排名会更高，从而获得更多访问者。
所有这一切意味着您可以将部分预算花在其他地方——例如，宣传您的网站或创建额外的内容，这将有助于获得更多收入。
静态站点生成器的案例
从 WordPress 迁移到静态页面生成器并非易事，而且绝对不是每个 WordPress 用户都应该做的事情。然而，由于它的插件、优秀的文档和简单的 API，Hexo 使这种转变相对轻松。
在决定是否要将产品迁移到静态解决方案之前，您需要了解静态页面生成器带来的限制，例如内容限制、Markdown 学习曲线和版本控制。
您还应该知道 Hexo 是一个博客框架。它非常适合知道如何使用文本编辑器和终端的开发人员和技术人员。如果您喜欢使用 Web 界面来管理您的内容，那么还有一个插件可以提供该功能。它被称为hexo-admin，非常流行。
如果您已经在使用 WordPress，那么您应该停下来思考一下您现在正在使用 WordPress 的哪些功能，以及哪些功能是必不可少的。你有复杂的内容结构吗？你在使用用户管理吗？您是否在 WordPress 实例上使用了很多插件，它们都是必需的吗？您对网站的性能满意吗？
如果大多数或所有这些问题的答案是否定的，那么您已经准备好使用静态页面生成器来增强您的网站。根据用例和您的要求，静态页面可以帮助最大限度地提高效率，同时最大限度地降低成本。另一方面，如果您需要 WordPress 的灵活性，您可能甚至不会考虑采取这样的举措。
顾名思义，动态站点是在后端、服务器上动态生成的。这意味着在每个请求上都会生成一个页面，这对于性能来说并不是最佳的。
与动态网站不同，静态网站仅提供静态文件。当用户发出请求时，静态文件由服务器提供，没有任何后端逻辑。
静态站点生成器是一个从模板创建静态文件的系统。最终输出是一组带有资产的 HTML 页面，通常是 CSS 和 JavaScript 文件。
a-guide-to-static-site-generators-using-hexo-and-wordpress-e6c0b17285cb
