Jekyll 教程：如何創建靜態網站

已發表: 2023-05-18

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

這就是靜態站點生成器 (SSG) 的用武之地——它們可以輕鬆創建美觀、加載速度快的網站，而無需複雜的後端系統或數據庫。

在本文中，您將了解一種流行的 SSG——Jekyll，了解它的工作原理，以及如何使用它創建靜態網站。

這是您將使用 Jekyll 構建的博客站點的現場演示。

如果您想仔細查看，可以訪問該項目的 GitHub 存儲庫。

什麼是傑基爾？

Jekyll 是一種免費的開源 SSG，它基於 Ruby 編程語言構建和運行。您無需了解 Ruby 的工作原理即可使用 Jekyll；你只需要在你的機器上安裝 Ruby。

Jekyll 可用於構建各種類型的靜態站點，例如個人博客、投資組合網站和文檔網站，而無需數據庫或使用 WordPress 等內容管理系統。

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

易於使用：Jekyll 使用純文本文件和 markdown 語法來創建和管理內容，這意味著您無需具備 HTML 或 CSS 知識即可上手。
快速安全： Jekyll 不處理任何服務器端數據庫或腳本，這意味著存在漏洞和攻擊的風險較小。它生成靜態 HTML 文件，使您的網站非常快速和安全。
可定制： Jekyll 是高度可定制的，允許您使用佈局和模板，甚至創建插件來擴展功能。
易於部署：Jekyll 生成靜態 HTML 文件，無需動態內容管理系統即可部署到 Web 服務器或託管服務提供商。
由大型社區支持： Jekyll 擁有龐大的用戶和開發人員社區，這意味著如果您需要幫助或想要擴展站點的功能，可以使用大量資源。

創建新網站可能很痛苦！以下是 Jekyll 如何讓它變得更容易和更快。點擊鳴叫

如何安裝 Jekyll

您首先需要在您的機器上安裝 Ruby，然後才能按照 Jekyll 文檔中的說明繼續安裝 Jekyll。

如何在 macOS 上安裝 Jekyll

默認情況下，Ruby 預裝在 macOS 中，但不建議您使用此類版本的 Ruby 來安裝 Jekyll，因為它太舊了。例如，在 Apple 最新的操作系統 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 下載並使用默認安裝選項下載並安裝Ruby+Devkit版本來完成。

在安裝嚮導的最後階段，運行ridk install步驟——用於安裝 gems。通過 RubyInstaller 文檔閱讀更多內容。

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

 gem install jekyll bundler

如何驗證 Jekyll 是否安裝正確

要驗證 Jekyll 是否已正確安裝在您的計算機上，請打開您的終端並運行以下命令：

 jekyll -v

如果您看到版本號，則表示 Jekyll 已安裝並在您的系統上正常工作。您現在可以使用 Jekyll 了！

Jekyll 命令和配置

在我們開始使用 Jekyll 創建和自定義靜態站點之前，最好熟悉它的各種 CLI 命令和配置文件參數。

傑基爾 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 配置文件是一個名為_config.yml的 YAML 文件，其中包含 Jekyll 站點的設置和選項。它用於配置站點的各個方面，包括站點標題、描述、URL 和其他設置。

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

標題：您網站的標題。
描述：您網站的簡短描述。
url：您網站的基本 URL。
baseurl：如果站點位於域的子目錄中，則為站點的子目錄。
永久鏈接：您的帖子和頁面的 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 站點結構，其中包括如下目錄和文件：

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

以下是每個目錄和文件的用途：

_config.yml：包含站點設置和選項的 Jekyll 配置文件。
_posts：包含站點內容（可以是博客文章）的目錄。這些可以是具有特定文件命名約定的 Markdown 或 HTML 文件： YEAR-MONTH-DAY-title.MARKUP 。
Gemfile 和 Gemfile.lock： Bundler 使用這些文件來管理您的站點所依賴的 Ruby gem。
index.md：您網站的默認主頁，由 Markdown 或 HTML 文件生成。

但是還有更多文件/文件夾可用於自定義您的 Jekyll 網站。這些文件夾包括：

_includes：包含可重用的 HTML 片段的目錄，這些片段可以包含在您的佈局和頁面中。如導航欄、頁腳等
_layouts：包含定義頁面結構的 HTML 佈局模板的目錄。
assets：包含站點使用的任何文件的目錄，例如圖像和 CSS 文件。
_sass：包含可用於為您的站點生成 CSS 的 Sass 文件的目錄。

此文件結構為 Jekyll 項目提供了堅實的基礎，但您可以根據需要修改它以滿足項目的特定需求。

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

作為使用 Jekyll CLI 啟動項目的替代方法，您可以使用 GitHub 上的 Kinsta 的“Hello World”Jekyll 模板創建 Git 存儲庫。選擇使用此模板>創建新存儲庫，將起始代碼複製到您自己的 GitHub 帳戶內的新存儲庫中。

如何預覽 Jekyll 站點

你現在有了一個 Jekyll 網站，但是在你開始定制它以滿足你的需要之前，你如何預覽網站以查看它的外觀呢？打開終端並進入項目目錄，然後運行以下命令：

 jekyll serve

這將生成一個_site文件夾，其中包含從您的項目生成的所有靜態文件。它還將啟動 Jekyll 服務器，您可以通過http://localhost:4000預覽您的站點。

如果您在 Web 瀏覽器中訪問該 URL，您應該會看到帶有 minima 主題的 Jekyll 站點：

如何自定義 Jekyll 站點

當您使用 Jekyll 創建站點並使用主題時，您可以自定義站點以滿足您的需要。例如，您可能想要添加新頁面、更改頁面佈局或調整某些項目的顯示方式。使用 Jekyll 所有這些都是可能的。

Jekyll 中的 Front Matter 是如何工作的

當您打開項目文件夾的每個頁面或博客文章時，您會注意到頁面頂部三個破折號 (—) 內的信息塊。這被稱為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 ---

在上面的例子中，front matter 包括變量，例如帖子的標題、描述和日期。這些變量可用於頁面或帖子的佈局或內容。

Jekyll 解析前端內容並使用它為您的站點生成輸出 HTML。您可以使用 front matter 來指定各種選項，例如佈局、永久鏈接、發布狀態等。

如何配置默認前題

你也可以配置默認的front matter，這樣你就不需要為類似的文件定義相同的front matter。例如，如果每篇博文都使用相同的作者姓名和佈局。你可以在你的_config.yml文件中定義一個自定義的 front matter 來服務你所有的博客文章。

它的結構方式有點複雜，但它看起來像這樣。將此粘貼到_config.yml文件中的最後一個配置下方：

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

當你現在運行jekyll serve命令時，你會注意到即使你沒有在每個帖子上定義佈局和作者，你仍然可以在你的文件中訪問它們。

注意：當您不定義路徑時，所有文件都將使用定義的 front matter 值。

在 Jekyll 中創建頁面

當您在項目的根目錄中創建文件時，它被視為一個頁面。您為文件指定的名稱大部分時間都用在 URL 中，因此您將為每個頁面文件命名一個能引起共鳴的名稱。

例如，如果您要創建一個 URL 為https://example.com/about 的頁面，請創建一個名為about.htm l 或about.md的文件。文件擴展名決定了頁面內容使用的標記語言（HTML 或 Markdown）。

創建文件後，添加適當的前言和內容。保存文件並在瀏覽器中刷新 Jekyll 站點。現在應該可以通過與文件名對應的 URL 訪問新頁面。

在 Jekyll 中創建佈局

您可以使用佈局來定義站點頁面和帖子的結構和設計。這通常主要通過 HTML 代碼完成。您可以在頁面的元數據中包含頁眉、頁腳和元信息。

第一步是在項目的根目錄中創建一個_layouts文件夾。然後為每個佈局創建一個文件——該文件應該有一個反映佈局目的的描述性名稱。例如，您可以創建一個名為page.htm l 的文件來定義站點上所有頁面的頁面佈局。

最好使用 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 作為其 front matter 佈局值的頁面或帖子都將具有此佈局。您可以在_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 文件。主要目的是通過允許您在站點中重複使用代碼來保持代碼乾爽（不要重複自己）。

在 Jekyll 中遍歷帖子

您可能想要創建一個專門的博客頁面來保存您所有的博客文章，這意味著您想要獲取您網站上的所有文章並循環瀏覽它們。使用 Jekyll，使用{% for %}標籤很容易實現。

任何 Jekyll 網站上的所有帖子都存儲在site.posts變量中。您可以遍歷並使用{{ post.title }} Liquid 變量以這種方式輸出每個帖子的標題：

 {% 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 %}

請注意，在上面的示例中，日期 Liquid 過濾器將每個帖子的日期格式化為更易於閱讀的格式。

現在，您已經了解了可以對 Jekyll 站點進行的一些基本格式化。但是您可能不需要使用所有這些從頭開始構建 Jekyll 站點，因為您始終可以搜索滿足您需要的主題並將其添加到您的 Jekyll 站點。

如何為 Jekyll 站點添加主題

有各種易於添加的主題，但好處是對於每個主題，在 GitHub 上的自述文件中總是有關於如何安裝它們的明確信息。您可以決定克隆主題，或者如果它是基於 gem 的主題，則該過程會更容易。

對於本文，您將安裝一個博客主題並自定義它以將博客站點部署到 Kinsta。這是一個基於 gen 的主題，您可以在 GitHub 上訪問其源代碼和說明。

要添加基於 gem 的主題，請打開您站點的 Gemfile 並為您要使用的主題添加 gem。我們將使用的主題是jekyll-theme-clean-blog 。您可以替換 Gemfile 中的默認最小主題：

 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 站點現在應該使用您添加的新的基於 gem 的主題。您可以通過在站點的_layouts目錄中修改其佈局來進一步自定義主題。

自定義 Jekyll 主題

您現在已將主題添加到您的站點，下一步是自定義站點以滿足您的需求並按預期工作。例如，不顯示每個頁面和帖子的圖像，而是顯示灰色背景。

您可以通過為每個頁面添加一個前言選項來解決這個問題，並通過指定您希望使用的圖像的路徑來發布。在 Jekyll 中，圖像等資產存儲在assets文件夾中。在此文件夾中，您可以決定創建子文件夾來組織您的圖像。

您現在可以將背景選項添加到 front matter 塊及其圖像的路徑。例如，在關於頁面上，這是前面的內容：

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

對所有頁面和帖子執行此操作，您的頁面將如下所示：

您可以做的另一個自定義是調整導航欄選項。例如，您可能不需要聯繫頁面，這意味著您應該從導航欄選項中刪除它的鏈接。為此，您可以研究主題的源代碼，注意負責導航鏈接的文件，並在您的項目中準確複製該文件，刪除不需要的選項。

導航鏈接位於 _includes 文件夾的 navbar.html 文件中。您可以創建此文件，粘貼源代碼中的代碼，然後刪除聯繫人選項或添加您想要的任何新選項。

保存項目時，您會注意到導航選項將被自定義：

最後，最後一項定制是創建一個帖子頁面，該頁面將包含您所有的博客帖子——這意味著您將循環瀏覽此頁面上的所有帖子。

創建文件posts.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 文件夾中。每個內容都存儲在一個文件中，該文件具有類似的命名約定YYYY-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 語法將您的內容添加到 front matter 塊下方。

保存文件，Jekyll 將自動構建並將其包含在您的站點中。

如何在 Kinsta 上部署你的 Jekyll 站點

Kinsta 是一個雲平台，允許您託管靜態網站，包括 Jekyll。這可以通過設置一些配置，將代碼推送到 GitHub，最後部署到 Kinsta 來完成。

先決條件：配置您的 Jekyll 站點

檢查您的Gemfile.lock文件並確保它包含適用於所有設備的平台。為確保所有平台均已正確配置，請運行以下命令：

 bundle lock --add-platform arm64-darwin-22 x64-mingw-ucrt x86_64-linux

然後您可以繼續創建一個Procfile — 此文件指定在您的站點部署時執行的命令。此文件會自動更新要在 MyKinsta 的“進程”選項卡中執行的命令。這是要添加到您的 Procfile 的命令：

 web: bundle exec jekyll build && ruby -run -e httpd _site

將你的 Jekyll 站點推送到 GitHub

對於本文，讓我們使用 Git 命令將您的代碼推送到 GitHub。首先，在GitHub上創建一個倉庫；這將使您能夠訪問存儲庫的 URL。

您現在可以通過打開終端、導航到包含項目的目錄並運行以下命令來初始化本地 Git 存儲庫：

 git init

現在使用以下命令將代碼添加到本地 Git 存儲庫：

 git add

您現在可以使用以下命令提交更改：

 git commit -m "my first commit"

注意：您可以用描述您的更改的簡短消息替換“我的第一次提交”。

最後，使用以下命令將代碼推送到 GitHub：

 git remote add origin [repository URL] git push -u origin master

注意：確保將“[存儲庫 URL]”替換為您自己的 GitHub 存儲庫 URL。

完成這些步驟後，您的代碼將被推送到 GitHub 並可通過存儲庫的 URL 訪問。您現在可以部署到 Kinsta！

將您的 Jekyll 站點部署到 Kinsta

只需幾分鐘即可部署到 Kinsta。從 My Kinsta 儀表板開始登錄或創建您的帳戶。接下來，您將在 GitHub 上授權 Kinsta。

然後，您可以按照以下步驟部署您的 Jekyll 站點：

單擊左側欄中的應用程序
點擊添加服務
從下拉列表中單擊應用程序

將出現一個模式，您可以通過它選擇要部署的存儲庫。如果您的存儲庫中有多個分支，請選擇您希望部署的分支。

然後您可以為該應用程序指定一個名稱。在可用的 25 個數據中心位置中選擇一個位置，然後 Procfile 將自動提供 web 進程命令。

您的應用程序將開始部署。幾分鐘後，將提供一個鏈接以訪問您網站的已部署版本。在這種情況下，它是： https ://myblog-84b54.kinsta.app/

沒有更多的網站建設壓力 - 探索 Jekyll 的無憂方法！點擊鳴叫

概括

到目前為止，您已經了解了 Jekyll 的工作原理以及您可以使用 Jekyll 進行的各種定制。由於 Jekyll 的簡單性、靈活性和強大的功能，現在可以安全地同意 Jekyll 是創建靜態網站的優秀工具。

Jekyll 直觀的模板系統、流式模板以及對 markdown 和其他標記語言的內置支持使快速創建和管理內容豐富的站點變得容易。

隨意使用 Kinsta 的應用程序託管免費託管您所有的靜態網站，如果您願意，請選擇我們的 Hobby Tier 計劃，起價為每月 7 美元。

你對傑基爾有什麼看法？ 你用過 Jekyll 來構建任何東西嗎？ 請隨時在下面的評論部分與我們分享您的項目和經驗。