開源Jekyll助您構建你的網站

導讀	Jekyll 是一個開源的靜態網站生成器。你可以使用 Markdown 編寫內容，使用 HTML/CSS 來構建和展示，Jekyll 會將其編譯為靜態的 HTML。

Jekyll 是一個開源的靜態網站生成器。你可以使用 Markdown 編寫內容，使用 HTML/CSS 來構建和展示，Jekyll 會將其編譯為靜態的 HTML。

近年來開始流行靜態網站生成器和 JAMStack，而且理由很充分，它們不需要複雜的後端，只需要靜態的 HTML、CSS 和 Javascript。沒有後端意味著更好的安全性、更低的運營開銷和更便宜的託管。雙贏！

在本文中，我將討論 Jekyll。在撰寫本文時，我的個人網站使用的是 Jekyll。Jekyll 使用 Ruby 引擎將用 Markdown 編寫的文章轉換成 HTML。Sass 可以將複雜的 CSS 規則應用到普通文字檔案中。Liquid 允許對靜態內容進行程式設計控制。

Jekyll 網站 提供了  、MacOS 和 Windows 安裝說明。安裝完成之後，快速引導 將會安裝一個基礎的 Hello-World 專案。

現在在你的瀏覽器訪問 ，你可以看到你的預設“真棒”部落格。

這個預設站點包含以下的檔案和資料夾：

• _posts: 你的部落格文章。
• _site: 最終編譯成的靜態網站檔案。
• about.markdown: “關於頁”的內容。
• index.markdown: “主頁”的內容。
• 404.html: “404 頁”的內容。
• _config.yml: Jekyll 的全站配置檔案。

建立帖子很簡單。你需要做的就是在 _post 目錄下使用正確的格式和副檔名建立一個新檔案，這樣就完成了。

有效的檔名像 2021-08-29-welcome-to-jekyll.markdown 這樣。一個部落格檔案必須包含 Jekyll 所謂的 YAML 卷首塊Front Matter。它是檔案開頭的一個包含後設資料的特殊部分。如果你檢視預設的帖子，你可以看到以下內容：

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

Jekyll 會使用上面的後設資料，你也可以自定義 key: value 鍵值對。如果你需要一些提示，請檢視我的網站的卷首。除了前面的問題，你還可以 使用內建的 Jekyll 變數 來自定義你的網站。

讓我們建立一個新的帖子。在 _posts 資料夾下建立 2021-08-29-ayushsharma.markdown。內容如下：

---
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]()
 
This is my category:

如果 jekyll serve  仍在執行，重新整理頁面，你將看到下面的新帖子。

恭喜你建立了你的第一篇帖子！這個過程看起來很簡單，但是你可以通過 Jekyll 做很多事情。使用簡單的 Markdown，你可以歸檔部落格、高亮顯示程式碼片段以及分類管理帖子。

如果你還沒準備好釋出你的內容，你可以建立一個 _drafts 資料夾。此資料夾中的 Markdown 檔案僅通過傳遞 --drafts-- 引數來呈現。

請注意 _post 資料夾中兩篇文章的卷首塊，你將在其中看到 layout: post。_layout 資料夾中包含所有佈局。你不會在原始碼中找到它們，因為 Jekyll 預設載入它們。Jekyll 使用的預設原始碼在 這裡。如果你點選該連結，你可以看到 post 的佈局使用了預設（default）佈局。預設佈局包含的程式碼 {{ content }} 是注入內容的地方。佈局檔案還將包含 include 指令。它們從 include 資料夾 載入檔案，並使用不同的元件組成頁面。

總的來說，這就是佈局的工作方式：你在卷首塊定義它們並將你的內容注入其中。而包含則提供了頁面的其它部分以組成整個頁面。這是一種標準的網頁設計技術：定義頁首、頁尾、旁白和內容元素，然後在其中注入內容。這就是靜態站點生成器的真正威力，完全以程式設計的方式控制，將你的網站組裝起來並最終編譯成靜態的 HTML。

你網站上的所有內容並不都是文章或部落格。你需要“關於”頁面、“聯絡”頁面、“專案”頁面或“作品”頁面。這就是“頁面”的用武之地。它們的工作方式與“帖子”完全一樣，這意味著它們是帶有卷首塊的 Markdown 檔案。但它們不會放到 _posts 目錄。它們要麼保留在你的專案根目錄中，要麼保留在它們自己的資料夾中。對於佈局和包含，你可以使用與帖子相同的佈局或建立新帖子。 Jekyll 非常靈活，你可以隨心所欲地發揮你的創意！你的預設部落格已經有 index.markdown 和 about.markdown。請隨意自定義它們。

資料檔案位於 _data 目錄中，可以是 .yml、.json、.csv 等格式的檔案。例如，一個 _data/members.yml 檔案可能包含：

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

Jekyll 在網站生成的時候讀取這些內容。你可以通過 site.data.members 訪問它們。

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

你的 _config.yml 檔案定義了永久連結的格式。你可以使用各種預設變數來組合你自己的自定義永久連結。

 jekyll serve 非常適合本地測試。但是一旦你完成了本地測試，你將需要構建要釋出的最終工作。命令 jekyll build --source source_dir --destination destination_dir 將你的網站構建到 _site 資料夾中。請注意，此資料夾在每次構建之前都會被清理，所以不要將重要的東西放在那裡。生成內容後，你可以將其託管在你的靜態託管服務上。

你現在應該對 Jekyll 的功能以及主要部分的功能有一個全面的瞭解。如果你正在尋找靈感，官方 JAMStack 網站上有一些很棒的例子。

編碼快樂。

原文來自：