WordPress 开发者的 Jekyll

已发表: 2022-03-10

快速总结↬ Jekyll 作为 WordPress 的轻量级替代品越来越受欢迎。它经常被归类为开发人员用来构建个人博客的工具。这只是冰山一角——它还有更多功能！在本文中，我们将扮演一名网络开发人员的角色，为一家虚构的律师事务所构建网站。对于这样的网站，WordPress 是一个显而易见的选择，但它是我们应该考虑的唯一工具吗？让我们看一下使用 Jekyll 构建网站的完全不同的方式。

在本文中，我们将扮演一名网络开发人员的角色，为一家虚构的律师事务所构建网站。对于这样的网站，WordPress 是一个显而易见的选择，但它是我们应该考虑的唯一工具吗？让我们看一下使用 Jekyll 构建网站的完全不同的方式。

关于 SmashingMag 的进一步阅读：

使用 Jekyll 和 GitHub 页面构建博客
使用 Jekyll 进行内容建模
审查的静态站点生成器：Jekyll、Middleman、Roots、Hugo
为什么静态站点生成器是下一件大事

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

什么是杰基尔？

Jekyll 是一个静态网站生成器。 Jekyll 网站不是在我们的服务器上安装软件和数据库，它只是我们计算机上的一个文件目录。当我们在该目录上运行 Jekyll 时，它会生成一个静态网站，我们将其上传到托管服务提供商。

为什么是杰基尔？

在决定 Jekyll 是否适合某个项目时，我们需要考虑一些权衡。

杰基尔的优势

复杂性更低
Jekyll 网站本质上是一个带有模板语言的静态网站。它需要创建和维护的组件更少。在服务器上，我们只需要一个能够提供文件的 Web 服务器。
速度
当访问者查看 Jekyll 站点上的页面时，服务器会返回现有文件而不进行任何额外处理。这比在请求时动态生成页面的 WordPress 快得多。注意：WordPress 缓存插件可以消除这种性能差距。
稳定
WordPress 有更多组件协同工作，为访问者生成页面。如果某个组件出现故障，访问者可能无法查看该网站。当 Web 服务器只提供文件时，出错的可能性要小得多。
安全
Wordpress 在减轻 CSRF、XSS 或 SQL 注入攻击等安全风险方面做了很多工作，但它依赖于您始终拥有最新的更新。静态站点消除了这个问题，因为没有黑客可以利用的动态数据存储。
源代码控制
Jekyll 网站是一个文件目录，因此我们可以将整个网站存储在 Git 存储库中。使用存储库给我们带来了很多好处（尽管 VersionPress 正在开发中，并且为 WordPress 启用了这个工作流程）。

杰基尔的缺点

没有图形用户界面
客户可以注册 WordPress.com，选择主题并自行建立基本网站。 Jekyll 是一个命令行工具，它压倒了大多数非技术用户。 Jekyll 有第三方 GUI，包括 CloudCannon（免责声明：我是联合创始人）、Forestry、Jekyll Admin、Netlify CMS、Prose 和 Siteleaf。但是，这些需要在交给客户之前由开发人员设置。
构建时间
在我们的情况下，这不是问题，因为网站将在一秒钟内构建。但是，拥有 10,000 到 100,000 个帖子的大型网站可能需要几分钟才能构建。这在我们开发时很令人沮丧，因为我们必须等待网站构建好才能在浏览器中预览它。
主题
Jekyll 有一些可用的主题，但与 WordPress 可用的数千个主题相比，它微不足道。
可扩展性
如果我们需要向我们的 WordPress 网站添加自定义功能，我们可以编写自己的 PHP。我们可以为 Jekyll 创建自定义 Ruby 插件，但是，这些插件在构建时而不是请求时运行。
支持
WordPress 拥有庞大的专家社区和其他资源来提供帮助。 Jekyll 有类似的资源，但规模较小。

Jekyll 对于像这个项目这样的信息量很大的网站来说是一个很好的工具。如果项目更像是一个应用程序，我们可以使用 JavaScript 添加动态元素，但在某些时候我们可能需要像 WordPress' 这样的后端。

执行

WordPress 和 Jekyll 采用不同的方法来构建网站，但共享许多功能。让我们开始构建我们的 Jekyll 网站。

安装

典型的 WordPress 开发环境需要安装 Apache 或 NGINX、PHP 和 MySQL。然后，我们将安装 WordPress 并配置 Web 服务器。

对于 Jekyll，我们需要确保安装了 Ruby（有时这比听起来更难）。然后我们安装 Jekyll gem：

 gem install jekyll

如果您使用的是 macOS，请确保您首先安装了 Xcode 开发人员。

 xcode-select --install

跑步

运行 WordPress 站点通常包括启动数据库和 Web 服务器。

在 Jekyll 中，我们导航到终端中的站点文件（此时为空目录）并运行：

 jekyll serve

这会在端口4000上启动本地 Web 服务器，并在文件更改时重建站点。

页面

是时候创建我们的第一页了。让我们从主页开始。页面用于没有关联日期的独立内容。 WordPress 将页面内容存储在数据库中。

在 Jekyll 中，页面是 HTML 文件。我们将从纯 HTML 开始，然后根据需要添加 Jekyll 功能。这是当前状态的index.html ：

 <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="container"> <h1><a href="/">Justice</a></h1> <nav> <ul> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/advice/">Advice</a></li> </ul> </nav> </div> <section class="main"> <div class="container"> <p>Justice Law is professional representation. Practicing for over 50 years, our team have the knowledge and skills to get you results.</p> <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote> </div> </section> <footer> <p class="copyright"> &copy; 2016 </p> </footer> </body> </html>

液体

在 WordPress 中，我们几乎可以编写 PHP 来做任何事情。 Jekyll 采取了不同的方法。它没有提供完整的编程语言，而是使用名为 Liquid 的模板语言。（WordPress 也有模板语言，例如 Timber。）

 <p class="copyright"> &copy; 2016 </p>

我们不太可能记得每年都更新这个，所以让我们使用 Liquid 来输出当前年份：

 <p class="copyright"> &copy; {{ site.time | date: "%Y" }} </p>

我们正在 Jekyll 中建立一个静态网站，所以在我们重建网站之前，这个日期不会改变。如果我们希望更改日期而不需要重建网站，我们可以使用 JavaScript。

包括

index.html中的大部分 HTML 用于设置整体布局，不会在页面之间更改。这种重复会导致大量的维护，所以让我们减少它。

包含是我在 PHP 中学到的第一件事。使用包含，我们可以将页眉和页脚内容放在不同的文件中，然后在多个页面上包含相同的内容。

Jekyll 具有完全相同的功能。包含存储在名为_includes的文件夹中。我们使用 Liquid 将它们包含在index.html中：

 {% include header.html %} <p>Justice Law is professional representation. Practicing for over 50 years, our team have the knowledge and skills to get you results.</p> <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote> {% include footer.html %}

布局

包括减少了一些重复，但我们仍然在每一页上都有它们。 WordPress 通过将网站结构与其内容分开的模板文件解决了这个问题。

Jekyll 等价于模板文件是布局。布局是带有内容占位符的 HTML 文件。它们存储在_layouts目录中。我们将创建_layouts/default.html来包含一个基本的 HTML 布局：

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="container"> <h1><a href="/">Justice</a></h1> <nav> <ul> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/advice/">Advice</a></li> </ul> </nav> </div> <section class="main"> <div class="container"> {{ content }} </div> </section> <footer> <p class="copyright"> &copy; {{ site.time | date: "%Y-%m-%d" }} </p> </footer> </body> </html>

然后，通过指定布局替换index.html中的包含。我们使用 front matter 指定布局，它是位于文件顶部的两条三点划线之间的 YAML 片段（稍后会详细介绍）。

 --- layout: default --- <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote>

现在我们可以在所有页面上使用相同的布局。

前沿问题

在 WordPress 中，自定义字段允许我们在帖子上设置元数据。我们可以使用它们来设置 SEO 标签或显示和隐藏特定帖子的页面部分。

这个概念在 Jekyll 中被称为前端物质。之前，我们使用 front matter 来设置index.html的布局。我们现在可以设置自己的变量并使用 Liquid 访问它们。这进一步减少了我们网站上的重复。

让我们向index.html添加多个推荐。我们可以复制和粘贴 HTML，但这又一次导致维护增加。取而代之的是，让我们在前面添加推荐并使用 Liquid 对其进行迭代：

 --- layout: default testimonials: - message: We use Justice Law in all our endeavours. They offer an unparalleled service when it comes to running a business. image: "/images/joice.jpeg" name: Joice Carmold - message: Justice Law are the best of the best. Being local, they care about people and have strong ties to the community. image: "/images/peter.jpeg" name: Peter Rottenburg - message: Justice Law were everything we could have hoped for when buying our first home. Highly recommended to all. image: "/images/gibblesto.jpeg" name: D. and G. Gibbleston --- <div class="testimonials"> {% for testimonial in page.testimonials %} <blockquote class="testimonial"> <p class="testimonial-message">{{ testimonial.message }}</p> <p class="testimonial-author"> <img src="{{ testimonial.image }}" alt="Photo of {{ testimonial.name }}"> {{ testimonial.name }} </p> </blockquote> {% endfor %} </div>

帖子

WordPress 将帖子的 HTML 内容、日期和其他元数据存储在数据库中。

在 Jekyll 中，每个帖子都是存储在_posts目录中的静态文件。文件名包含帖子的发布日期和标题，例如_posts/2016-11-11-real-estate-flipping.md 。博客文章的源代码采用以下结构：

 --- layout: post categories: - Property --- ![House](/images/house.jpeg)

我们还可以使用front matter来设置类别和标签。

前面的内容是帖子的正文，用 Markdown 编写。 Markdown 是 HTML 的一种更简单的替代方案。

Jekyll 允许我们创建继承自其他布局的布局。您可能已经注意到这篇文章的布局为post 。 post布局继承自默认布局并添加日期和标题：

 --- layout: default --- <h3>{{ page.title }}</h3> <p>{{ page.date | date: '%B %d, %Y' }}</p> {{ content }}

让我们创建blog.html来迭代帖子并链接到它们：

 --- layout: default --- <ul> {% for post in site.posts %} <li><a href="{{ post.url }}">{{ post.title }}</a></li> {% endfor %} </ul>

收藏品

在 WordPress 中，自定义帖子类型对于管理内容组很有用。例如，您可以将自定义帖子类型用于推荐、产品或房地产列表。

Jekyll 有这个特性，称之为集合。

about.html页面显示工作人员的个人资料。我们可以在前端定义员工的元数据（姓名、图像、电话号码、简历），但我们只能在该页面上引用它。将来，我们希望使用相同的数据在博客文章中显示有关作者的信息。集合使我们能够在网站上的任何地方引用工作人员。

我们网站的配置位于_config.yml中。在这里，我们设置了一个新的集合：

 collections: staff_members: output: false

现在我们添加我们的员工。每个工作人员都表示在一个 Markdown 文件中，该文件存储在具有集合名称的文件夹中；例如， _staff_members/jane-doe.md 。

我们在 front matter 中添加元数据，在 body 中添加简介：

 --- name: Jane Doe image: "/images/jane.jpeg" phone: "1234567" --- Jane has 19 years of experience in law, and specialises in property and business.

与帖子类似，我们可以遍历about.html中的集合以显示每个员工：

 --- layout: default --- <ul> {% for member in site.staff_members %} <li> <div><img src="{{ member.image }}" alt="Staff photo for {{ member.name }}"></div> <p>{{ member.name }} - {{ member.phone }}</p> <p>{{ member.content | markdownify }}</p> </li> {% endfor %} </ul>

搜索

WordPress 具有强大的内置搜索和更强大的搜索插件。

Jekyll 没有内置搜索功能，但有一些解决方案：

使用诸如 Lunr.js 之类的 JavaScript 库的客户端搜索（Jekyll.tips 有一个关于如何设置它的教程）；
第三方解决方案，例如用于高性能搜索的 Algolia；
插入式解决方案，例如 Google 自定义搜索。

插件

插件是 WordPress 的一个吸引人的部分。加载功能很容易让 WordPress 做几乎任何事情。

在我们的 Jekyll 网站上，不需要许多流行的 WordPress 插件：

iThemes 安全
我们的 Jekyll 网站与运行它的 Web 服务器一样安全。
后备守卫
我们的 Jekyll 网站将存在于一个存储库中，让我们可以访问整个更改历史。
WP 超级缓存
我们的 Jekyll 网站已经是静态的。

其他 WordPress 插件具有我们可以放入网站的第三方等效插件：

联系表单插件（例如 Contact Form 7）可以替换为 Formspree、FormKeep 或 Wufoo。
对于一个简单的商店，WP eCommerce 可以替换为 Snipcart、Gumroad 或 Stripe。
您可以使用 Disqus、Facebook 评论或 IntenseDebate，而不是使用 Akismet 进行 WordPress 评论。

一些 WordPress 插件可以用核心 Jekyll 来模拟。这是一个使用 front matter 和 Liquid 的照片库：

 --- layout: default images: - image_path: /images/bill.jpg title: Bill - image_path: /images/burt.jpg title: Burt - image_path: /images/gary.jpg title: Gary - image_path: /images/tina.jpg title: Tina - image_path: /images/suzy.jpg title: Suzy --- <ul class="photo-gallery"> {% for image in page.images %} <li><img src="{{ image.image_path }}" alt="{{ image.title }}"/></li> {% endfor %} </ul>

我们只需要添加我们自己的 JavaScript 和 CSS 来完成它。

Jekyll 插件可以模拟其他 WordPress 插件的功能。请记住，Jekyll 插件仅在网站生成时运行——它们不添加实时功能：

使用 Jekyll Sitemap Generator 插件代替 One Click XML Sitemap。
Jekyll SEO Tag 为您提供了一些 SEO Wizard 的功能。
使用 Jekyll 语言插件代替 WPGlobus 用于多语言网站。

版本控制

使用像 Jekyll 这样的静态站点生成器的主要好处之一是整个站点和内容可以存在于 Git 中。在基本层面上，Git 为您提供网站上所有更改的历史记录。对于团队来说，它开启了各种工作流程和审批流程。

GitHub 为学习 Git 的初学者提供了一个很棒的交互式教程。

客户交接

这涵盖了创建网站的具体细节。如果您想了解整个 Jekyll 网站是如何组合在一起的，请查看 Justice 模板。这是一个免费的 MIT 许可的 Jekyll 模板。上面的片段基于此模板。

WordPress CMS 内置于平台中，因此我们需要为客户设置一个帐户。

通过我们的 Jekyll 网站，我们将 Git 存储库链接到前面提到的 Jekyll GUI 之一。这个工作流程的好处之一是客户端更改被提交回存储库。作为开发人员，即使非开发人员更新网站，我们也可以继续使用本地工作流程。

一些 Jekyll GUI 提供托管，而另一些则可以输出到 Amazon S3 存储桶或 GitHub Pages。

概括

至此，我们的 Jekyll 网站已经上线并可供客户编辑。如果我们需要对网站进行任何更改，我们只需推送到存储库，它就会自动实时部署。

<div class=“testimonials”> {% for testimonial in page.testimonials %} <blockquote class=“testimonial”> <p class=“testimonial-message”>{{ testimonial.message }}</p> <p class =“testimonial-author”> <img src=“{{ testimonial.image }}” alt=“{{ testimonial.name }} 的照片”> {{ testimonial.name }} </p> </blockquote> { % endfor %} </div>

帖子