[[428335]]

Jekyll 是一個(gè)開(kāi)源的靜態(tài)網(wǎng)站生成器。你可以使用 Markdown 編寫(xiě)內(nèi)容，使用 HTML/CSS 來(lái)構(gòu)建和展示，Jekyll 會(huì)將其編譯為靜態(tài)的 HTML。

近年來(lái)開(kāi)始流行靜態(tài)網(wǎng)站生成器和 JAMStack，而且理由很充分，它們不需要復(fù)雜的后端，只需要靜態(tài)的 HTML、CSS 和 Javascript。沒(méi)有后端意味著更好的安全性、更低的運(yùn)營(yíng)開(kāi)銷(xiāo)和更便宜的托管。雙贏！

在本文中，我將討論 Jekyll。在撰寫(xiě)本文時(shí)，我的個(gè)人網(wǎng)站使用的是 Jekyll。Jekyll 使用 Ruby 引擎將用 Markdown 編寫(xiě)的文章轉(zhuǎn)換成 HTML。Sass 可以將復(fù)雜的 CSS 規(guī)則應(yīng)用到普通文本文件中。Liquid 允許對(duì)靜態(tài)內(nèi)容進(jìn)行編程控制。

安裝 Jekyll

Jekyll 網(wǎng)站 提供了 Linux、MacOS 和 Windows 安裝說(shuō)明。安裝完成之后，快速引導(dǎo) 將會(huì)安裝一個(gè)基礎(chǔ)的 Hello-World 項(xiàng)目。

現(xiàn)在在你的瀏覽器訪問(wèn) http://localhost:4000，你可以看到你的默認(rèn)“真棒”博客。

Default "awesome" blog

目錄結(jié)構(gòu)

這個(gè)默認(rèn)站點(diǎn)包含以下的文件和文件夾：

• _posts: 你的博客文章。
• _site: 最終編譯成的靜態(tài)網(wǎng)站文件。
• about.markdown: “關(guān)于頁(yè)”的內(nèi)容。
• index.markdown: “主頁(yè)”的內(nèi)容。
• 404.html: “404 頁(yè)”的內(nèi)容。
• _config.yml: Jekyll 的全站配置文件。

創(chuàng)建新的博客帖子

創(chuàng)建帖子很簡(jiǎn)單。你需要做的就是在 _post 目錄下使用正確的格式和擴(kuò)展名創(chuàng)建一個(gè)新文件，這樣就完成了。

有效的文件名像 2021-08-29-welcome-to-jekyll.markdown 這樣。一個(gè)博客文件必須包含 Jekyll 所謂的 YAML 卷首塊Front Matter。它是文件開(kāi)頭的一個(gè)包含元數(shù)據(jù)的特殊部分。如果你查看默認(rèn)的帖子，你可以看到以下內(nèi)容：

---
layout: post
title: "Welcome to Jekyll!"
date:  2021-08-29 11:28:12 +0530
categories: jekyll update
---

Jekyll 會(huì)使用上面的元數(shù)據(jù)，你也可以自定義 key: value 鍵值對(duì)。如果你需要一些提示，請(qǐng)查看我的網(wǎng)站的卷首。除了前面的問(wèn)題，你還可以 使用內(nèi)置的 Jekyll 變量 來(lái)自定義你的網(wǎng)站。

讓我們創(chuàng)建一個(gè)新的帖子。在 _posts 文件夾下創(chuàng)建 2021-08-29-ayushsharma.markdown。內(nèi)容如下：

---
layout: post
title:  "Check out ayushsharma.in!"
date:   2021-08-29 12:00:00 +0530
categories: mycategory
---
This is my first post.
 
# This is a heading.
 
## This is another heading.
 
This is a [link](<http://notes.ayushsharma.in>)
 
This is my category:

如果 jekyll serve 命令仍在運(yùn)行，刷新頁(yè)面，你將看到下面的新帖子。

New blog entry

恭喜你創(chuàng)建了你的第一篇帖子！這個(gè)過(guò)程看起來(lái)很簡(jiǎn)單，但是你可以通過(guò) Jekyll 做很多事情。使用簡(jiǎn)單的 Markdown，你可以歸檔博客、高亮顯示代碼片段以及分類(lèi)管理帖子。

草稿

如果你還沒(méi)準(zhǔn)備好發(fā)布你的內(nèi)容，你可以創(chuàng)建一個(gè) _drafts 文件夾。此文件夾中的 Markdown 文件僅通過(guò)傳遞 --drafts-- 參數(shù)來(lái)呈現(xiàn)。

布局和包含

請(qǐng)注意 _post 文件夾中兩篇文章的卷首塊，你將在其中看到 layout: post。_layout 文件夾中包含所有布局。你不會(huì)在源代碼中找到它們，因?yàn)?Jekyll 默認(rèn)加載它們。Jekyll 使用的默認(rèn)源代碼在 這里。如果你點(diǎn)擊該鏈接，你可以看到 post 的布局使用了默認(rèn)（default）布局。默認(rèn)布局包含的代碼 {{ content }} 是注入內(nèi)容的地方。布局文件還將包含 include 指令。它們從 include 文件夾 加載文件，并使用不同的組件組成頁(yè)面。

總的來(lái)說(shuō)，這就是布局的工作方式：你在卷首塊定義它們并將你的內(nèi)容注入其中。而包含則提供了頁(yè)面的其它部分以組成整個(gè)頁(yè)面。這是一種標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)技術(shù)：定義頁(yè)眉、頁(yè)腳、旁白和內(nèi)容元素，然后在其中注入內(nèi)容。這就是靜態(tài)站點(diǎn)生成器的真正威力，完全以編程的方式控制，將你的網(wǎng)站組裝起來(lái)并最終編譯成靜態(tài)的 HTML。

頁(yè)面

你網(wǎng)站上的所有內(nèi)容并不都是文章或博客。你需要“關(guān)于”頁(yè)面、“聯(lián)系”頁(yè)面、“項(xiàng)目”頁(yè)面或“作品”頁(yè)面。這就是“頁(yè)面”的用武之地。它們的工作方式與“帖子”完全一樣，這意味著它們是帶有卷首塊的 Markdown 文件。但它們不會(huì)放到 _posts 目錄。它們要么保留在你的項(xiàng)目根目錄中，要么保留在它們自己的文件夾中。對(duì)于布局和包含，你可以使用與帖子相同的布局或創(chuàng)建新帖子。 Jekyll 非常靈活，你可以隨心所欲地發(fā)揮你的創(chuàng)意！你的默認(rèn)博客已經(jīng)有 index.markdown 和 about.markdown。請(qǐng)隨意自定義它們。

數(shù)據(jù)文件

數(shù)據(jù)文件位于 _data 目錄中，可以是 .yml、.json、.csv 等格式的文件。例如，一個(gè) _data/members.yml 文件可能包含：

- name: A
 github: a@a
 
- name: B
 github: b@b
 
- name: C
 github: c@c

Jekyll 在網(wǎng)站生成的時(shí)候讀取這些內(nèi)容。你可以通過(guò) site.data.members 訪問(wèn)它們。

<ul>
{ % for member in site.data.members % }
 <li>
 <a href="https://github.com">
      { { member.name } } 
 </a>
 </li>
{ % endfor %}
</ul>

永久鏈接

你的 _config.yml 文件定義了永久鏈接的格式。你可以使用各種默認(rèn)變量來(lái)組合你自己的自定義永久鏈接。

構(gòu)建你最終的網(wǎng)站

命令 jekyll serve 非常適合本地測(cè)試。但是一旦你完成了本地測(cè)試，你將需要構(gòu)建要發(fā)布的最終工作。命令 jekyll build --source source_dir --destination destination_dir 將你的網(wǎng)站構(gòu)建到 _site 文件夾中。請(qǐng)注意，此文件夾在每次構(gòu)建之前都會(huì)被清理，所以不要將重要的東西放在那里。生成內(nèi)容后，你可以將其托管在你的靜態(tài)托管服務(wù)上。

你現(xiàn)在應(yīng)該對(duì) Jekyll 的功能以及主要部分的功能有一個(gè)全面的了解。如果你正在尋找靈感，官方 JAMStack 網(wǎng)站上有一些很棒的例子。

Example Jekyll sites from JAMStack

編碼快樂(lè)。