使用 Jekyll 構建你的網站
近年來開始流行靜態網站生成器和 JAMStack,而且理由很充分,它們不需要複雜的後端,只需要靜態的 HTML、CSS 和 Javascript。沒有後端意味著更好的安全性、更低的運營開銷和更便宜的託管。雙贏!
在本文中,我將討論 Jekyll。在撰寫本文時,我的個人網站使用的是 Jekyll。Jekyll 使用 Ruby 引擎將用 Markdown 編寫的文章轉換成 HTML。Sass 可以將複雜的 CSS 規則應用到普通文本文件中。Liquid 允許對靜態內容進行編程式控制制。
安裝 Jekyll
Jekyll 網站 提供了 Linux、MacOS 和 Windows 安裝說明。安裝完成之後,快速引導 將會安裝一個基礎的 Hello-World 項目。
現在在你的瀏覽器訪問 http://localhost:4000
,你可以看到你的默認「真棒」博客。
![Default "awesome" blog](/data/attachment/album/202110/12/145400v2l2ezesct52f2e6.png "Default "awesome" blog")
目錄結構
這個默認站點包含以下的文件和文件夾:
_posts
: 你的博客文章。_site
: 最終編譯成的靜態網站文件。about.markdown
: 「關於頁」的內容。index.markdown
: 「主頁」的內容。404.html
: 「404 頁」的內容。_config.yml
: Jekyll 的全站配置文件。
創建新的博客帖子
創建帖子很簡單。你需要做的就是在 _post
目錄下使用正確的格式和擴展名創建一個新文件,這樣就完成了。
有效的文件名像 2021-08-29-welcome-to-jekyll.markdown
這樣。一個博客文件必須包含 Jekyll 所謂的 YAML 卷首塊 。它是文件開頭的一個包含元數據的特殊部分。如果你查看默認的帖子,你可以看到以下內容:
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](<http://notes.ayushsharma.in>)
This is my category:
如果 jekyll serve
命令仍在運行,刷新頁面,你將看到下面的新帖子。
![New blog entry](/data/attachment/album/202110/12/145401thuu8avakvu8hes5.png "New blog entry")
恭喜你創建了你的第一篇帖子!這個過程看起來很簡單,但是你可以通過 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
訪問它們。
<ul>
{ % for member in site.data.members % }
<li>
<a href="https://github.com">
{ { member.name } }
</a>
</li>
{ % endfor %}
</ul>
永久鏈接
你的 _config.yml
文件定義了永久鏈接的格式。你可以使用各種默認變數來組合你自己的自定義永久鏈接。
構建你最終的網站
命令 jekyll serve
非常適合本地測試。但是一旦你完成了本地測試,你將需要構建要發布的最終工作。命令 jekyll build --source source_dir --destination destination_dir
將你的網站構建到 _site
文件夾中。請注意,此文件夾在每次構建之前都會被清理,所以不要將重要的東西放在那裡。生成內容後,你可以將其託管在你的靜態託管服務上。
你現在應該對 Jekyll 的功能以及主要部分的功能有一個全面的了解。如果你正在尋找靈感,官方 JAMStack 網站上有一些很棒的例子。
![Example Jekyll sites from JAMStack](/data/attachment/album/202110/12/145402i2000sr0y2002gnt.png "Example Jekyll sites from JAMStack")
編碼快樂。
本文首發於作者個人博客,經授權改編。
via: https://opensource.com/article/21/9/build-website-jekyll
作者:Ayush Sharma 選題:lujun9972 譯者:perfiffer 校對:wxy
本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive