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>

帖子