使用Hexo和WordPress的静态网站生成器指南

本文概述

• 从优化WordPress到静态化
• 输入静态页面生成器和Hexo
• 将WordPress迁移到Hexo
• 降价及其局限性
• 重新设计和优化
• Netlify
• CloudFlare
• 它要多少钱？
• 静态站点生成器的案例

静态站点生成器是将模板编译成静态HTML页面的系统。如果听起来有效, 是的。没有服务器处理或渲染, 因此静态网站往往非常快速且轻巧, 从而为你和你的用户节省了宝贵的时间和带宽。效率的提高体现在较低的成本以及潜在的较高收入中。

从优化WordPress到静态化

谈到有效的收入来源, WordPress浮现在脑海。它为28％的互联网提供动力, 是一个强大的平台, 具有许多出色的功能, 包括由一系列插件, 主题, API等支持的广泛的用户和内容管理。

甚至我们行业中的大公司都使用WordPress。诸如Smashing Magazine和CSS-Tricks之类的网站都使用WordPress, 尽管在这两种情况下都大量定制了实例。但是, 使用WordPress可能是一项繁琐的任务, 尤其是在自定义和优化性能时。

我在2015年创建了一个小型博客。我的第一个直觉是使用WordPress。当我已经在使用WordPress时, 它给了我一个快速入门。我在DigitalOcean上作为服务器创建了一个新的Droplet, 将Vesta设置为Hosting Control Panel, 并安装了WordPress作为博客平台。最终, 我设计并开发了一个全新的WordPress主题。唯一缺少的是内容。

我知道我想分享一些有关Atom的技巧, 因为那时我正在使用这个出色的编辑器。我发表了一些关于它的文章, 并与社区分享。

刚开始时, 我并没有太在意效果, 因为我太关注内容了。一段时间后, 我注意到了一些性能问题。 Google PageSpeed Insights的得分很差, 所以我努力修复和优化我的网站, 获得了近乎完美的99/100得分：

• 我从Nginx + Apache切换到Nginx + PHP-FPM。

• 我将CloudFlare用于速度和保护。

• 我使用Cloudinary托管图像。

• 我调整了主题并使用了Critical 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导出工具导出, 可以在管理面板的”工具”->”导出”->” WordPress”下找到。最后, 键入hexo migration命令以完成导入。

hexo migrate wordpress <source> 

剩下要做的唯一一件事就是检查结果。运行hexo server命令以启动服务器并在给定地址打开浏览器。

hexo server

降价及其局限性

Hexo开箱即用地支持Markdown。 Markdown是一种标记语言, 许多人使用它来格式化README文件, 注释和帖子。但是它也可以用于撰写你的文章。它的语法直观易学。

Markdown的另一个优点是它可以生成干净有效的HTML。这使开发人员可以创建干净且可维护的CSS规则来样式化博客文章和页面。

开发人员的生活绝非易事。我们经常遇到可能导致我们将时间花在意外事情上的问题。如果我们沿途学习一些东西, 那么我们就不会浪费时间, 那是一件好事。我也一样。我以为一切顺利, 因为没有编译错误, 但是后来我发现有些事情没有按预期进行。

例如, 未加载Codepen演示。我搜索了一个Hexo插件, 找到了一个。不幸的是, 这个插件不是官方的, 它产生了无法接受的HTML错误。我想做出贡献并解决问题, 但是最新的拉取请求在一年半以上的时间内仍未解决。我认为分叉存储库, 解决问题并在Hexo页面上发布插件会更容易, 这样任何人都可以使用它。插件被接受了, 我更新了内容, Codepen演示像个魅力一样发挥了作用。

CanIUse嵌入发生类似的问题。现在, 我知道如何创建一个Hexo插件, 没有理由不这样做。我的hexo-caniuse插件以及从Cloudinary CDN加载的响应图像的hexo-cloudinary插件也已发布。

重新设计和优化

网站的设计非常基础。 Hexo在官方网站上免费提供了一些主题, 但是我希望Hexo网站具有独特的主题。阅读文档并学习如何自定义Hexo之后, 我开始从头开始开发原始主题。

为了创建新模板, 我决定使用EJS进行模板制作。从未使用过EJS, 我将其视为学习新模板语法的机会。如果你不喜欢EJS, Hexo会通过插件为你提供Swig, Haml或哈巴狗支持。

在重新设计过程中, 我一直在关注性能。通过遵循最佳做法, 我们可以进一步加快静态网站的速度。将JavaScript文件放在文档底部, 并使用Critical CSS技术可为你的听众创造最佳体验。

SEO优化对于在Google等搜索引擎上的博客可见性至关重要。 Hexo具有用于插入Open Graph数据的内置帮助器。 Hexo使用YAML文件存储站点和主题配置。我使用主题配置文件来配置站点名称, 描述和各种社交ID。

将Gulp或Webpack添加到你的构建过程中总是有帮助和推荐的。我使用Gulp压缩和压缩CSS和JavaScript文件, 一切准备就绪。我可以部署它。

Netlify

Netlify是一个平台, 可为网站和应用程序提供超快的性能。它将自己作为一个统一的平台进行营销, 该平台可以自动执行代码以创建高性能且易于维护的网站。

只需推送你的代码, 让我们处理其余的工作。

如你所料, 配置网站非常简单：

1. 设置域。

2. 更改DNS记录。

3. 设置构建和部署。

4. 开启SSL。

一切设置完成后, 我运行了一些基本测试来查看得分, 包括Pingdom网站速度测试, Web页面测试和Testmysite.io。结果非常好, 因为该网站在每种工具上得分最高。

CloudFlare

尽管得分很高, 但我还是想尝试CloudFlare, 只是为了看看它能额外提高网站速度。一开始, CloudFlare可能让人不知所措, 但是学习如何使用它却是基础。配置CloudFlare之后, 我重新运行了测试, 结果更好。

最终测试是Google PageSpeed Insights。移动版和台式机版的得分均接近100％。问题是Google Analytics(分析)浏览器缓存。通过使用CloudFlare App for Google Analytics(分析), 我设法解决了该问题。

它要多少钱？

在Netlify上与CloudFlare一起使用Hexo无需花费任何费用。

Hexo是一个开源平台, 因此无论你决定如何使用它都是免费的。它拥有一个庞大的社区, 并且是根据StaticGen排名第三的最受欢迎的开源静态页面生成器。

Netlify有一个开放计划, 可为我们提供出色的托管选择。图片也托管在Cloudinary的开放式计划中。 CloudFlare的免费计划允许我们配置大量规则, 这些规则可以加快你本来就快的网站的速度。它还使我们能够解决Google Analytics(分析)浏览器的缓存问题。我也没有为该域名付费, 因为我使用了政府提供的免费个人域名。

该项目设置将我的预算降低到最低限度。如果你的项目需要更多高级功能, 则静态页面生成器仍可以为你节省几美元。

提供缓存的文件意味着减少CPU和带宽的使用, 这反过来又意味着你可以使用功能较弱的硬件使用更便宜的托管计划。不仅如此, 你的网站将更快, 这意味着你的用户将可以在移动设备和台式机设备上进行浏览。而且, 由于页面加载速度会影响Google搜索排名, 因此你的网站排名将会更高, 从而获得更多的访问者。

所有这些意味着你可以将部分预算花费在其他地方, 例如, 用于推广网站或创建其他内容, 这将有助于获得更多收入。

静态站点生成器的案例

从WordPress迁移到静态页面生成器绝非易事, 而且绝对不是每个WordPress用户都应该做的事情。但是, 由于Hexo的插件, 出色的文档和简单的API, 它使这种过渡变得相对轻松。

在决定是否要将产品迁移到静态解决方案之前, 你需要了解静态页面生成器附带的限制, 例如内容限制, Markdown学习曲线和版本控制。

你还应该知道Hexo是一个博客框架。非常适合知道如何使用文本编辑器和终端的开发人员和技术人员。如果你喜欢使用Web界面来管理内容, 则可以使用一个插件来提供该功能。它称为hexo-admin, 非常受欢迎。

如果你已经在使用WordPress, 则应该停下来思考一下你现在正在使用WordPress的哪些功能, 哪些功能是必不可少的。你是否有复杂的内容结构？你正在使用用户管理吗？你是否在WordPress实例上使用了很多插件, 它们都是必需的吗？你对网站的性能满意吗？

如果大多数或所有这些问题的答案为否, 那么你准备好使用静态页面生成器来增强你的网站的性能。根据用例和你的要求, 静态页面可以帮助最大程度地提高效率, 同时将成本降至最低。另一方面, 如果你需要WordPress的灵活性, 那么你甚至可能根本没有考虑这样做。