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

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

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

安裝 Jekyll

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

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

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

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

_posts: 你得博客文章。_site: 蕞終編譯成得靜態(tài)網(wǎng)站文件。about.markdown: “關(guān)于頁”得內(nèi)容。index.markdown: “主頁”得內(nèi)容。404.html: “404 頁”得內(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。它是文件開頭得一個(gè)包含元數(shù)據(jù)得特殊部分。如果你查看默認(rèn)得帖子，你可以看到以下內(nèi)容：

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

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

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

---layout: posttitle:  "Check out ayushsharma.in!"date:   2021-08-29 12:00:00 +0530categories: mycategory---This is my first post.# This is a heading.## This is another heading.This is a [link](

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

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

草稿

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

布局和包含

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

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

頁面

你網(wǎng)站上得所有內(nèi)容并不都是文章或博客。你需要“關(guān)于”頁面、“聯(lián)系”頁面、“項(xiàng)目”頁面或“作品”頁面。這就是“頁面”得用武之地。它們得工作方式與“帖子”完全一樣，這意味著它們是帶有卷首塊得 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)容。你可以通過 site.data.members訪問它們。

{ % for member in site.data.members % }        { { member.name } }  { % endfor %}

永久鏈接

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

構(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)站上有一些很棒得例子。

編碼快樂。

感謝首次于個(gè)人博客，經(jīng)授權(quán)改編。

via: opensource/article/21/9/build-website-jekyll

：Ayush Sharma選題：lujun9972譯者：perfiffer校對(duì)：wxy

感謝由 LCTT來自互聯(lián)網(wǎng)編譯，Linux華夏榮譽(yù)推出