Jekyll 是一個網(wǎng)站生成工具，可以用來將帶有一定格式的文本（如：MarkDown）轉(zhuǎn)換成靜態(tài)的HTML頁面，
并提供了Liquid模板引擎進行頁面渲染，然后可以將生成的靜態(tài)網(wǎng)站發(fā)布到如 Github Page類似的托管網(wǎng)站上，
實現(xiàn)自己的項目頁面，個人博客等。

安裝

一般使用 RubyGems 來安裝 Jekyll，小白的機器是 CentOS 7
（Windows環(huán)境下安裝可以參考 windows文檔），
首先安裝以下環(huán)境：

• Ruby

• RubyGems

  $ sudo yum install ruby

• NodeJS，或者其他JavaScript運行環(huán)境

  $ curl --silent --location https://rpm.nodesource.com/setup_6.x | bash - $ yum -y install nodejs

• Python2.7 （Jekyll2 或更早版本需要，Linux一般自帶）

然后安裝 Jekyll：

$ gem install jekyll

注意：
小白在安裝時遇到以下報錯：

Building native extensions. This could take a while... ERROR: Error installing jekyll:ERROR: Failed to build gem native extension./usr/bin/ruby extconf.rb mkmf.rb can't find header files for ruby at /usr/share/include/ruby.hGem files will remain installed in /home/bai/.gem/ruby/gems/ffi-1.9.14 for inspection. Results logged to /home/bai/.gem/ruby/gems/ffi-1.9.14/ext/ffi_c/gem_make.out

原來還需要安裝 ruby development軟件包，執(zhí)行 sudo yum install ruby-devel

基本使用

新建一個最簡單的示例網(wǎng)站

$ jekyll new myblog

這會在當前目錄下創(chuàng)建一個 myblog 目錄，里面包含一個示例的網(wǎng)站

注意：

Dependency Error: Yikes! It looks like you don't have bundler or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such file -- bundler' If you run into trouble, you can find helpful resources at http://jekyllrb.com/help/!

缺少bundler包，執(zhí)行 gem install bundler 命令安裝

切換到 myblog 目錄下，構(gòu)建剛剛生成的網(wǎng)站

$ cd myblog $ jekyll build

默認會將網(wǎng)站生成到 ./_site 目錄下，生成目錄可以通過配置文件 ./_config.yml
或命令行參數(shù) --destination 設(shè)置

然后，將網(wǎng)站運行起來，在本地進行預(yù)覽

$ jekyll server

然后可以在瀏覽器中 http://127.0.0.1:4000 來訪問，顯示如下界面

編輯博客

在剛剛預(yù)覽的網(wǎng)站中可以看到一篇叫做 Welcome to Jekyll! 的博文（Post），
這是 Jekyll 示例網(wǎng)站的自帶的文章，
其源碼為 ./_posts/2016-10-21-welcome-to-jekyll.markdown

./_posts 目錄用來放置博文，文件名稱格式為 <date>-<title>.<extension>，
文件內(nèi)容如下：

--- layout: post title: "Welcome to Jekyll!" date: 2016-10-21 00:43:30 -0700 categories: jekyll update --- You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.Jekyll also offers powerful support for code snippets:{% highlight ruby %} def print_hi(name)puts "Hi, #{name}" end print_hi('Tom') #=> prints 'Hi, Tom' to STDOUT. {% endhighlight %}Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].

文件開頭由 --- 包含的部分被稱為“頭信息”，設(shè)置一些文檔的相關(guān)屬性：

• layout: 表示博文使用的模板名稱，對應(yīng) ./_layouts/<name>.html 文件
• title, date, categories: 分別設(shè)置了博文的標題、日期、分類等信息

其余的部分是博文正文，對應(yīng)下圖中紅色的部分，圖中其他的部分皆是在模板中定義的

模板、主題

上面說到我們的博文模板對應(yīng)的是 ./_layouts/post.html 文件，
但是我們的當前目錄下并沒有 ./layouts 目錄啊？

其實為了方便重復利用模板， Jekyll提供了主題功能，可以在 ./_config.yml
中看到如下配置：

theme: minima

主題實際上是一個gem包，可以通過 bundle show minima 查看主題包所在的位置：

$ budnle show minima ~/.gem/ruby/gems/minima-2.0.0$ cd ~/.gem/ruby/gems/minima-2.0.0 $ ls assets _includes _layouts LICENSE.txt README.md _sass$ cd _layouts $ ls default.html home.html page.html post.html

可以看到主題目錄下的 _layouts 目錄里有 post.html 模板文件，
這個就是上述博文所用的模板文件，當然，我們也可以在自己的 ./_layouts 目錄下
新建 post.html 文件來覆蓋主題默認的模板文件。

先來看一下這個模板文件的內(nèi)容：

--- layout: default --- <article class="post" itemscope itemtype="http://schema.org/BlogPosting"><header class="post-header"><h1 class="post-title" itemprop="name headline">{{ page.title | escape }}</h1><p class="post-meta"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time>{% if page.author %} ? <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>{% endif %}</p></header><div class="post-content" itemprop="articleBody">{{ content }}</div>{% if site.disqus.shortname %}{% include disqus_comments.html %}{% endif %} </article>

同樣，頭信息部分 layout 指示模板文件，可以看出post模板之上還有一個網(wǎng)站的默認模板，
然后，模板中有各種 {{ var | filter }} 標簽，Jekyll 使用 Liquid 模板引擎，
這種結(jié)構(gòu)就是模板標記， var 表示變量名稱， filter 表示要在變量上應(yīng)用的過濾器，
相當于我們通常所說的格式化字符串

例如 {{ page.date | date: "%b %-d, %Y" }} 表示將日期格式化成“月 日，年”的形式，
其中 page.date, page.title 都是在前面博文頭信息中定義的變量，
在模板里可以通過 page 對象來訪問。

另外，還有 {% if page.author %}...{% endif %}條件控制結(jié)構(gòu)，
表示如果有 page.author 變量，則顯示出來，否則不顯示，
之前的Welcome博文頭信息中并沒有配置 author 屬性，現(xiàn)在我們來配置一下，
修改 ./_posts/2016-10-21-welcome-to-jekyll.markdown 頭信息：

--- layout: post title: "Welcome to Jekyll!" date: 2016-10-21 00:43:30 -0700 categories: jekyll update author: baiyangcao ---

注意：
執(zhí)行了 jekyll server 命令啟動預(yù)覽網(wǎng)站之后，
修改了的博文可以自動重新生成，而不用重新啟動網(wǎng)站。

然后再打開博文看一下效果，顯示出來了文章作者：

接著，我們就可以在 _layouts 下新建自己的模板，
在 _posts 目錄下創(chuàng)建自己的博文。

發(fā)布

我們可以將使用 Jekyll 生成的網(wǎng)站發(fā)布到 Github 上，
使用 Github Pages 功能展示出頁面，因為 Github Pages 集成了 Jekyll 構(gòu)建功能，
所以我們只需要將源碼推送到 Github 倉庫即可

在網(wǎng)站根目錄下新增 .gitignore 文件，將你的網(wǎng)站生成目錄添加到里面，
默認應(yīng)該是 _site 文件夾。

將網(wǎng)站推送到 Github 倉庫后，然后設(shè)置對應(yīng)的 Github Pages 即可，
具體可參見 利用Github Pages建立倉庫“門面”

擴展

其實我們也可以為網(wǎng)站指定其他主題，雖然官網(wǎng)文檔上說主題通過 RubyGems 分發(fā)，
但是我們一般在網(wǎng)站搜索到的主題并不一定在 RubyGems 上發(fā)布，
所以有時我們可以直接將主題源文件直接拷貝到自己的網(wǎng)站根目錄來使用。
官方 Github 倉庫的 Wiki 頁面中有個主題
列表，大家有興趣可以看一下。

參考鏈接：
http://jekyllcn.com/docs/home/

轉(zhuǎn)載于:https://www.cnblogs.com/baiyangcao/p/jekyll_basic.html

總結(jié)

以上是生活随笔為你收集整理的Jekyll 使用入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。