Jekyll教程：如何建立一個靜態的網站

在今天的數字時代，擁有一個網站對於建立一個線上存在、推廣你的品牌和接觸潛在客戶是至關重要的。然而，建立一個網站可能是一項艱鉅的任務。

這就是靜態網站生成器（SSG）的作用–它們使建立漂亮、快速載入的網站變得容易，而不需要複雜的後臺系統或資料庫。

在這篇文章中，我們將向你介紹流行的SSG之一–Jekyll，瞭解它是如何工作的，以及你如何用它建立一個靜態網站。

1. 什麼是Jekyll？
2. 如何安裝Jekyll
3. Jekyll的命令和配置
4. 如何在Jekyll上建立一個靜態網站？
5. 如何預覽一個Jekyll網站
6. 如何定製一個Jekyll網站
7. 如何在Jekyll網站上新增主題
8. 如何在Jekyll網站上新增內容

用Jekyll建立的部落格網站

如果你想仔細看看，你可以訪問這個專案的GitHub倉庫。

什麼是Jekyll？

Jekyll是一個免費的開源SSG，它是在Ruby程式語言上建立和執行的。你不需要了解Ruby的工作原理來使用Jekyll，你只需要在你的機器上安裝Ruby。

Jekyll可以用來建立各種型別的靜態網站，如個人部落格、投資組合網站和文件網站，而不需要資料庫或使用WordPress等內容管理系統。

以下是Jekyll在SSG中脫穎而出的原因：

1. 易於使用：Jekyll使用純文字檔案和markdown語法來建立和管理內容，這意味著你不需要有HTML或CSS的知識就可以開始使用。
2. 快速和安全：Jekyll不處理任何伺服器端的資料庫或指令碼，這意味著漏洞和攻擊的風險較小。它生成靜態HTML檔案，使你的網站難以置信地快速和安全。
3. 可定製：Jekyll是高度可定製的，允許你使用佈局和模板，甚至建立外掛來擴充套件功能。
4. 易於部署：Jekyll生成的靜態HTML檔案可以部署到網路伺服器或主機提供商，而不需要動態內容管理系統。
5. 有大型社羣的支援：Jekyll有一個龐大的使用者和開發人員社羣，這意味著如果你需要幫助或想擴充套件你的網站功能，可以獲得大量的資源。

如何安裝Jekyll

你首先需要在你的機器上安裝Ruby，然後才能繼續安裝Jekyll，正如Jekyll文件中所述。

如何在macOS上安裝Jekyll

預設情況下，Ruby預裝在macOS中，但不建議你使用這樣的Ruby版本來安裝Jekyll，因為它很舊。例如，在蘋果最新的作業系統Ventura上，預裝的Ruby版本是2.6.10，其中最新的版本是3.1.3（截止到本文寫作時）。

要解決這個問題，你需要使用chruby等版本管理器正確安裝Ruby。你需要先在你的Mac上安裝Homebrew，在終端使用以下命令：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

一旦安裝成功，退出並重啟終端，然後通過執行這個命令檢查Homebrew是否準備好了：

brew doctor

如果你得到 “Your system is ready to brew“，你現在可以繼續用下面的命令安裝 chruby 和ruby-install：

brew install chruby ruby-install

你現在可以使用你剛剛安裝的 ruby-install 軟體包安裝ruby的最新版本，即3.1.3：

ruby-install 3.1.3

這將需要幾分鐘的時間。一旦成功，用下面的命令將你的shell配置為自動使用 chruby ：

echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc
echo "chruby ruby-3.1.3" >> ~/.zshrc

現在你可以退出並重新啟動你的終端，然後通過執行這個命令檢查一切是否正常：

ruby -v

它應該顯示ruby 3.1.3。

現在你的機器上已經安裝了Ruby的最新版本。現在你可以繼續安裝最新的Jekyll和bundler gem：

gem install jekyll bundler

如何在Windows上安裝Jekyll

要在Windows機器上安裝Ruby和Jekyll，你需要使用RubyInstaller。這可以通過從RubyInstaller Downloads下載並安裝Ruby+Devkit版本，並使用預設的安裝選項來完成。

在安裝嚮導的最後階段，運 ridk install 步驟–它是用來安裝寶石的。通過RubyInstaller文件閱讀更多內容。

從選項中，選擇MSYS2和MINGW開發工具鏈。開啟一個新的命令提示符視窗，使用下面的命令安裝Jekyll和Bundler：

gem install jekyll bundler

如何驗證Jekyll的安裝是否正確

為了驗證Jekyll是否正確地安裝在你的機器上，請開啟你的終端並執行以下命令：

jekyll -v

如果你看到版本號，說明Jekyll已經安裝並在你的系統上正常工作。你現在可以使用Jekyll了!

Jekyll的命令和配置

在我們開始用Jekyll建立和定製靜態網站之前，最好先熟悉一下它的各種CLI命令和配置檔案引數。

Jekyll CLI命令

下面是一些常用的Jekyll CLI命令。你不需要記住它們，只需要知道它們的存在，當你注意到它們在本文後面的用法時，可以隨時回頭檢視它們的作用。

• jekyll build：生成_site目錄下的靜態網站。
• jekyll serve：構建網站並在你的本地機器上啟動一個Web伺服器，允許你在瀏覽器中預覽網站，http://localhost:4000。
• jekyll new [site name]：在一個新的目錄中建立一個新的Jekyll站點，並指定站點名稱。
• jekyll doctor：輸出任何可能存在的配置或依賴性問題。
• jekyll clean：刪除_site目錄，它是生成的站點檔案的存放地。
• jekyll help：輸出Jekyll的幫助文件。
• jekyll serve --draft：生成並提供你的Jekyll站點，包括_drafts目錄中的任何文章。

你也可以在這些命令中附加一些選項。請參閱Jekyll文件中的Jekyll命令和選項的完整列表。

Jekyll配置檔案

Jekyll配置檔案是一個名為_config.yml的YAML檔案，包含Jekyll網站的設定和選項。它用於配置你網站的各個方面，包括網站的標題、描述、URL和其他設定。

下面是一些最常用的配置選項：

• title：你的網站的標題。
• description：你的網站的簡短描述。
• url：你的網站的基本URL。
• baseurl：你的網站的子目錄，如果它被託管在一個域名的子目錄中。
• permalink：你的文章和頁面的URL結構。
• exclude：要從網站生成過程中排除的檔案或目錄的列表。
• include：在網站生成過程中要包括的檔案或目錄的列表。
• paginate：使用分頁時每頁要顯示的文章數量。
• plugins：要載入的Jekyll外掛的列表。
• theme：預設情況下，這被設定為 minima。你可以通過設定它的名字和實施我們將在本文後面瞭解的其他設定來使用任何其他主題。

你也可以在你的配置檔案中建立自定義變數，並在你的網站的模板、佈局和包括中使用它們。例如，你可以建立一個名為 author_name 的變數，然後在你的模板中這樣使用它：{{ site.author_name }}。

要修改你的Jekyll配置檔案，請在文字編輯器中開啟Jekyll專案目錄中的_config.yml檔案並進行修改。

注意：你對配置檔案所做的任何修改都會在你下次用 jekyll build 或 jekyll serve 生成網站時生效。

如何在Jekyll上建立一個靜態網站？

現在你已經在你的機器上安裝了Jekyll，現在可以用一個命令在幾秒鐘內建立一個Jekyll靜態網站。開啟你的終端，執行這個命令：

jekyll new joels-blog

確保你把 “joels-blog “替換成你喜歡的網站名稱。

Jekyll靜態網站

接下來，導航到網站資料夾。你會注意到一個基本的Jekyll網站結構，包括像這樣的目錄和檔案：

├── _config.yml
├── _posts
├── Gemfile
├── Gemfile.lock
├── index.md
└── README.md

以下是這些目錄和檔案的用途：

• _config.yml：Jekyll配置檔案，包含你的網站的設定和選項。
• _posts：一個包含你的網站內容的目錄（可以是部落格文章）。這些可以是Markdown或HTML檔案，有特定的檔案命名規則：YEAR-MONTH-DAY-title.MARKUP。
• Gemfile和Gemfile.lock：捆綁程式使用這些檔案來管理你的網站所依賴的Ruby gems。
• index.md：你網站的預設主頁，由Markdown或HTML檔案生成。

但是還有更多的檔案/資料夾可以用來定製你的Jekyll網站。這些資料夾包括：

• _includes：一個包含可重複使用的HTML片段的目錄，可以包含在你的佈局和頁面中。如導航條、頁尾等。
• _layouts：一個包含HTML佈局模板的目錄，它定義了你的頁面結構。
• assets：一個包含你的網站所使用的任何檔案的目錄，如圖片和CSS檔案。
• _sass：一個包含Sass檔案的目錄，可用於為你的網站生成CSS。

這個檔案結構為Jekyll專案提供了一個堅實的基礎，但你可以根據需要修改它以適應你的專案的具體需要。

快速入門選項：使用我們的GitHub模板

作為使用Jekyll CLI啟動專案的替代方案，你可以使用這個在GitHub上的 “Hello World” Jekyll模板建立一個Git倉庫。選擇Use this template > Create a new repository，將啟動程式碼複製到你自己的GitHub賬戶中的一個新倉庫。

如何預覽一個Jekyll網站

你現在有了一個Jekyll網站，但在你可能開始定製它以滿足你的需要之前，你如何預覽該網站，看看它是什麼樣子的？開啟你的終端，進入你的專案目錄，然後執行以下命令：

jekyll serve

這將產生一個_site資料夾，其中包括從你的專案中產生的所有靜態檔案。它還將啟動Jekyll伺服器，你可以通過http://localhost:4000，預覽你的網站。

如果你在你的瀏覽器中訪問這個URL，你應該看到你的Jekyll網站和minima主題：

預設外觀

如何定製一個Jekyll網站

當你用Jekyll建立一個網站並使用一個主題時，你可以根據你的需要來定製網站。例如，你可能想新增新的頁面，改變頁面的佈局，或者調整某些專案的顯示方式。所有這些都可以通過Jekyll實現。

前面的內容如何在Jekyll中工作

當你開啟你的專案資料夾中的每個頁面或部落格文章時，你會注意到頁面頂部的三個破折號（-）內有一個資訊塊。這被稱為front matter。

它是Jekyll中使用的一種後設資料格式，用來儲存頁面或文章的資訊–它可以用YAML或JSON編寫。

---
title:  "Welcome to Jekyll!"
description: "Introduction to what Jekyll is about and how it works"
date:   2023-03-07 16:54:37 +0100
---

在上面的例子中，前面的內容包括一些變數，如文章的標題、描述和日期。這些變數可以在頁面或文章的佈局或內容中使用。

Jekyll會解析前言，並使用它來為你的網站生成輸出的HTML。你可以使用前述內容來指定各種選項，如佈局、固定連結、釋出狀態等。

如何配置預設的front matter

你也可以配置預設前題，這樣你就不需要為類似的檔案定義相同的前題。例如，如果每篇部落格文章使用相同的作者姓名和佈局。你可以在你的_config.yml檔案中定義一個自定義的前置事項，以服務於你所有的部落格文章。

它的結構方式有點複雜，但這裡是它的模樣。把這個貼上在你的_config.yml檔案的最後一個配置下面：

defaults:
-
scope:
path: "posts" # empty string means all files
values:
layout: "post"
author: "John Doe"

當你現在執行 jekyll serve 命令時，你會注意到，即使你不在每個文章上定義版面和作者，你仍然可以在檔案中訪問它們。

注意：當你不定義路徑時，所有的檔案都將使用定義的前題值。

在Jekyll中建立頁面

當你在專案的根目錄下建立一個檔案時，它被認為是一個頁面。你給檔案起的名字多數時候是用在URL中的，所以你要給每個頁面檔案起一個能引起共鳴的名字。

例如，如果你想建立一個網址為https://example.com/about的頁面，就建立一個名為about.html或about.md的檔案。檔案的副檔名決定了頁面內容要使用的標記語言（HTML或Markdown）。

一旦你建立了一個檔案，新增適當的前題和內容。儲存檔案並在瀏覽器中重新整理你的Jekyll網站。現在應該可以通過檔名對應的URL訪問新的頁面。

前言和內容

在Jekyll中建立Layouts

你可以使用Layouts來定義你網站的頁面和文章的結構和設計。這通常主要是通過HTML程式碼完成的。你可以在頁面的後設資料中加入頁首、頁尾、元資訊。

第一步是在你專案的根目錄下建立一個_layouts資料夾。然後為每個佈局建立一個檔案–該檔案應該有一個描述性的名字，以反映佈局的目的。例如，你可以建立一個名為page.html的檔案來定義你網站上所有頁面的佈局。

最好是用HTML或其他標記語言來定義佈局的整體結構。

你可以為任何將被插入佈局的動態內容包括佔位符，如頁面標題、內容和後設資料。例如，你可以建立一個基本的佈局，包括一個頁首、頁尾和內容區，像這樣：

<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</title>
</head>
<body>
<header>
<!-- Navigation menu goes here -->
</header>
<main>{{ content }}</main>
<footer>
<!-- Footer content goes here -->
</footer>
</body>
</html>

在這個例子中， {{ page.title }} 和 {{ content }} 佔位符將被替換為被渲染的頁面的實際標題和內容。

在這一點上，任何在前臺使用page作為佈局值的頁面或文章都會有這種佈局。你可以在_layouts資料夾中建立多個佈局，並以你喜歡的方式設計你的佈局。你也可以通過定義一個具有類似名稱的佈局來覆蓋一個主題的佈局。

_includes資料夾如何在Jekyll中工作

_includes資料夾包含可重複使用的程式碼片段，你可以將其包含在網站的不同部分。例如，你可以在你的includes資料夾中建立一個navbar.html檔案，並使用 {% include %} 標籤將其新增到page.html佈局檔案。

<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }} </title>
</head>
<body>
<header>{% include navbar.html %} </header>
<main>{{ content }} </main>
<footer>
<!-- Footer content goes here -->
</footer>
</body>
</html>

在構建時，Jekyll會用navbar.html的內容替換該標籤。

_includes資料夾可以包含任何型別的檔案，如HTML、Markdown或Liquid檔案。其主要目的是通過允許你在你的網站上重複使用程式碼來保持你的程式碼DRY（Don’t Repeat Yourself）。

迴圈瀏覽Jekyll中的文章

你可能想建立一個專門的部落格頁面來存放你的所有部落格文章，這意味著你想獲取你網站上的所有文章並迴圈瀏覽它們。在Jekyll中，使用 {% for %} 標籤很容易實現。

任何Jekyll網站上的所有文章都儲存在 site.post 變數中。你可以迴圈瀏覽並使用 {{post.title }}} 液體變數來輸出每個文章的標題。液態變數來輸出每個文章的標題，這種方式：

{% for post in site.posts %}
<h2>{{ post.title }}</h2>
{% endfor %}

你還可以使用額外的Liquid變數來輸出每個文章的其他資訊，如文章的日期或作者：

{% for post in site.posts %}
<h2>{{ post.title }}</h2>
<p>Published on {{ post.date | date: "%B %-d, %Y" }} by {{ post.author }}</p>
{% endfor %}

請注意，在上面的例子中，date Liquid過濾器將每個文章的日期格式化為更容易讓人理解的格式。

現在，你對可以對你的Jekyll網站進行的一些基本格式化有了一個概念。但你可能不需要使用所有這些來從頭開始建立一個Jekyll網站，因為你可以隨時搜尋符合你需要的主題，並將其新增到你的Jekyll網站。

如何向Jekyll網站新增主題

有各種易於新增的主題，但好在每個主題在GitHub上的ReadMe檔案中都有關於如何安裝它們的明確資訊。你可以決定克隆主題，如果是基於gem的主題，這個過程就比較簡單。

在這篇文章中，你將安裝一個部落格主題，並對其進行定製，以便部署一個部落格網站。這是一個基於基因的主題，你可以在GitHub上獲取其原始碼和說明。

要新增一個基於基因的主題，請開啟你網站的Gemfile，新增你要使用的主題的基因。我們將使用的主題是jekyll-theme-clean-blog。你可以在Gemfile中替換預設的minima主題：

gem "jekyll-theme-clean-blog"

在你的網站目錄中執行 bundle install 命令，以安裝主題的gem及其依賴項。

在你網站的_config.yml檔案中，新增以下一行來指定你要使用的主題：

theme: jekyll-theme-clean-blog

在這一點上，你的主題已經可以使用了。

你要刪除_layouts目錄下的所有佈局，以避免它們覆蓋主題的佈局。

然後你可以在主題的文件中找到你的檔案的佈局名稱。例如，如果你使用的是jekyll-theme-clean-blog主題，index.html檔案的佈局名稱是home，其他頁面是page，而所有文章是post。

最後，執行 jekyll serve ，使用新的主題建立和服務你的網站。

Jekyll部落格靜態網站

這就是了! 你的Jekyll站點現在應該使用你新增的基於寶石的新主題。你可以通過在你的站點的_layouts目錄中修改其佈局來進一步定製該主題。

定製一個Jekyll主題

你現在已經把你的主題新增到了你的網站上，下一步的行動將是定製網站，以滿足你的需求，並按照它的意圖來工作。例如，每個頁面和文章的圖片都沒有顯示，而是顯示一個灰色的背景。

你可以通過在每個頁面和文章中新增一個前臺選項，指定你希望使用的圖片的路徑來解決這個問題。在Jekyll中，影象等資產被儲存在assets資料夾中。在這個資料夾中，你可以決定建立子資料夾來組織你的圖片。

影象資料夾

現在，你可以為正面內容塊新增一個背景選項，併為其圖片新增一個路徑。例如，在 “關於” 頁面上，這就是正面內容：

---
layout: page
title: About
description: This is the page description. 
permalink: /about/
background: '/assets/images/about-page.jpeg'
---

對所有頁面和文章都這樣做，你的頁面將看起來像這樣：

背景圖片顯示在關於頁面上

你可以做的另一個定製是調整導航欄選項。例如，你可能不需要聯絡頁面，這意味著你應該從導航欄選項中刪除其連結。你可以通過研究主題的原始碼來做到這一點，注意到負責導航連結的檔案，並在你的專案中完全複製該檔案，刪除你不需要的選項。

導航連結在_includes資料夾的navbar.html檔案中。你可以建立這個檔案，從你的原始碼中貼上程式碼，並刪除聯絡選項或新增任何你想要的新選項。

自定義Jekyll主題的導航條

當你儲存你的專案時，你會發現導航選項將被定製：

完全定製的導航條

最後，最後一個定製將是建立一個文章頁面，它將容納你所有的部落格文章–這意味著你將在這個頁面上迴圈瀏覽所有的文章。

建立一個檔案，post.html並貼上以下程式碼：

---
layout: page
title: Blog
description: Expand your knowledge and stay informed with our engaging blog posts.
background: '/assets/images/blog-page.jpeg'
---
{% for post in site.posts %}
<article class="post-preview">
<a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}">
<h2 class="post-title">{{ post.title }}</h2>
{% if post.subtitle %}
<h3 class="post-subtitle">{{ post.subtitle }}</h3>
{% else %}
<h3 class="post-subtitle">
{{ post.excerpt | strip_html | truncatewords: 15 }}
</h3>
{% endif %}
</a>
<p class="post-meta">
Posted by {% if post.author %} {{ post.author }} {% else %} {{ site.author
}} {% endif %} on {{ post.date | date: '%B %d, %Y' }} · {% include
read_time.html content=post.content %}
</p>
</article>
<hr />
{% endfor %}

請隨意調整背景圖片以反映你儲存的圖片。在上面的程式碼中，你正在迴圈瀏覽所有的文章，以顯示這個頁面上的所有文章。這就是儲存後的文章頁面的樣子。

文章頁面

如何向Jekyll網站新增內容

你現在已經建立了一個Jekyll網站，並根據你的需要配置了該網站。最後一步是新增內容或瞭解如何將內容新增到Jekyll站點。

所有的內容都儲存在_posts資料夾中。每個內容都儲存在一個檔案中，其命名規則類似於YYY-MM-DD-title.md（或HTML檔案的.html）。例如，如果你想建立一個名為 “我的第一篇文章 “的文章，在_posts目錄下建立一個2023-03-08-my-first-post.md。

接下來，對於每個文章/內容檔案，確保你在頂部新增關於文章的正面內容。這將包括佈局、標題、描述、日期和其他資訊。

---
layout: post
title: "How to Read Books: Tips and Strategies for Maximum Learning"
subtitle: "Reading books is one of the most powerful ways to learn new information, gain new perspectives, and expand your knowledge."
date: 2023-03-02 23:45:13 -0400
background: '/assets/images/blog/books.jpeg'
---

然後你可以用HTML標籤或markdown語法將你的內容新增到前面的事項塊下面。

在_posts資料夾中新增新的文章

儲存該檔案，Jekyll會自動建立並將其包含在你的網站中。

小結

到目前為止，你已經瞭解了Jekyll的工作原理以及你可以用Jekyll進行的各種定製。現在可以肯定的是，由於Jekyll的簡單性、靈活性和強大的功能，它是一個建立靜態網站的優秀工具。

Jekyll的直觀模板系統、liquid模板以及對markdown和其他標記語言的內建支援，使得它可以輕鬆地快速建立和管理內容豐富的網站。