使用Jekyll在Github上搭建我的博客（博客編寫）

時間 2019-11-07

原文原文鏈接

系列文章傳送門：javascript

這篇文章主要介紹博客內容的編寫及本地測試，內容主要來自Jekyll的文檔、Liquid的文檔html

##建立項目

到想要建立項目的文件夾下（如d:/），運行命令：java

jekyll new blog

這樣就會建立一個新文件夾d:/blog，其結構以下：
1. 文件夾_layouts：用於存放模板的文件夾，裏面有兩個模板，default.html和post.html
2. 文件夾_posts：用於存放博客文章的文件夾，裏面有一篇markdown格式的文章--2014-01-27-welcome-to-jekyll.markdown
3. 文件夾css：存放博客所用css的文件夾
4. .gitignore：能夠刪掉，後面會將項目添加到git項目，因此這個不須要了
5. _coinfig.yml：jekyll的配置文件，裏面能夠定義至關多的配置參數，具體配置參數能夠參照其官網
6. index.html：項目的首頁git

根據實際須要，可能還須要建立以下文件或文件夾：
1. _includes:用於存放一些固定的HTML代碼段，文件爲.html格式，能夠在模板中經過liquid標籤引入，經常使用來在各個模板中複用如導航條、標籤欄、側邊欄之類的在每一個頁面上都同樣不變的內容，須要注意的是，這個代碼段也能夠是未被編譯的，也就是說也可使用liquid標籤放在這些代碼段中
2. image和js等自定義文件夾：用來存放一些須要的資源文件，如圖片或者javascript文件，能夠任意命名
3. CNAME文件：用來在github上作域名綁定的，將在後面介紹
4. favicon.ico：網站的小圖標
5.
....github

建立完須要的文件夾以後，首先須要修改的就是jekyll的配置文件_config.yml，這個配置文件的內容至關多，詳細見官方文檔，若是沒有太多的額外需求，只須要設定兩個參數就好了，一個是編碼的字符集，一個是項目的路徑，我這裏是這麼設定的：chrome

baseurl: /
encoding: utf-8

這樣一個博客項目就建立完成了shell

##編寫博文

大體上jekyll生成html的流程，jekyll首先會讀取以下內容進入內存中：
1. _posts及文件夾下的全部文章，將其參數和文章內容組織保存在內存中，全部的文章的內容、參數都在site.posts對象（其餘文件夾下的文章不會放入site.posts中）
2. _layouts文件夾下的全部模板
3. _includes文件夾下的全部須要被引入的內容瀏覽器

而後根據每一篇須要編譯的文章選擇的其參數定義的模板來建立一個模板，並將當前文章的內容、參數等進行擴展後放在page對象、content對象中，而後進行模板的編譯，生成html文件，並按照必定規則放在_site文件夾下。也就是說在建立一篇文章時，其實全部文章的內容都已經被讀取出來了，這也爲文章相互之間的關聯提供了可能ruby

能夠看一下_posts下的jekyll給的例子：

---
layout: post
title:  "Welcome to Jekyll!"
date:   2014-01-27 21:57:11
categories: jekyll update
---

You'll find this post in your `_posts` directory - edit this post and re-build (or run with the `-w` switch) to see your changes!
To add new posts, simply add a file in the `_posts` directory that follows the convention: YYYY-MM-DD-name-of-post.ext.

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] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll's GitHub repo][jekyll-gh].

[jekyll-gh]: https://github.com/mojombo/jekyll
[jekyll]:    http://jekyllrb.com

能夠看到在博文的最上方有被兩個---包裹起來的一段，這裏就定義了文章的一些參數，更多參數在FrontMatter和Variables獲取，簡單的只須要關注幾個就好：
1. title：文章的標題
2. date：文章的日期
3. categories：定義了文章所屬的目錄，一個list，將會根據這個目錄的list來建立目錄並將文章html放在生成的目錄下，文章分類時候用，這裏就不使用了
4. layout：文章所使用的模板名稱，也就是_layouts中定義的模板的文件名去掉.html
5. tags：例子中沒有，定義了文章的標籤，也是一個list，文章分類時候用，這裏就不使用了

這裏就寫一個最簡單的文章，只是用其中的兩個參數：layout，title，以下：

---
layout: mylayout
title: hello-jekyll
---

Hello jekyll!

將這個寫完的文章保存爲「年-月-日-標題.markdown」的名字形式，由於若是不修改permlinks，jekyll會根據文章的標題來建立文件夾，如2014-01-27-hello會建立成/2014/01/27/hello.html。這裏就保存成2014-01-27-hello.markdown

ps：文章的文件名不要使用中文，不然會出現bug，由於在url中會escape，而服務器查找倒是按照escape後的字符串去查找
，就會出現找不到文章的狀況，使用英文代替就好，定義了title變量就無所謂文件名中標題的內容了

博客不能沒有主頁，因此咱們修改index.html文件以下：

---
layout: mylayout
title: Hello Jekyll!
---
<ul class="posts">
{% for post in site.posts %}
  <li><span>{{ post.date | date_to_string }}</span> &raquo; <a href="{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}
</ul>

仍是使用咱們剛纔的模板，這回編譯完成後生成的結果以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        Hello Jekyll!
        <ul class="posts">
          <li><span>27 Jan 2014</span> &raquo; <a href="/2014/01/27/hello.html">hello-jekyll</a></li>
        </ul>
    </body>
</html>

因爲index文件名中沒有時間，因此時間直接被忽略了，而內容段則經過liquid的for標籤進行了迭代，遍歷了_posts下的全部文章，將其文章的時間、路徑、標題組織成html文件，生成指向博文的鏈接

##建立模板

咱們能夠打開jekyll給的例子default.html看一看模板的結構:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>{{ page.title }}</title>
        <meta name="viewport" content="width=device-width">

        <!-- syntax highlighting CSS -->
        <link rel="stylesheet" href="/css/syntax.css">

        <!-- Custom CSS -->
        <link rel="stylesheet" href="/css/main.css">

    </head>
    <body>

        <div class="site">
          <div class="header">
            <h1 class="title"><a href="/">{{ site.name }}</a></h1>
            <a class="extra" href="/">home</a>
          </div>

          {{ content }}

          <div class="footer">
            <div class="contact">
              <p>
                Your Name<br />
                What You Are<br />
                you@example.com
              </p>
            </div>
            <div class="contact">
              <p>
                <a href="https://github.com/yourusername">github.com/yourusername</a><br />
                <a href="https://twitter.com/yourusername">twitter.com/yourusername</a><br />
              </p>
            </div>
          </div>
        </div>

    </body>
</html>

能夠看到，模板和普通的html文件幾乎是同樣的。jekyll使用的是一個叫liquid的模板引擎建立html文件，這個模板引擎也有詳細的文檔，如今就只關注其中比較核心的部分，文章的標題和文章的內容

能夠看到模板的有這麼兩句{{ page.title }}, {{ content }}，這兩句就分別是文章標題和文章內容的佔位符，若是有文章使用了這個模板，如過使用上面寫的那篇hello的文章，標題就是hello-jekyll，content就是Hello jekyll!，這裏定義一個本身的新模板，保存爲mylayout.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
          {{ page.title }}
          {{ page.date }}
          {{ content }}
    </body>
</html>

第一行是標題，而後是博文時間（在文件名中定義），而後是博文內容
這樣一個簡單的模板就建立好了

##調試

在博客文件夾下，在命令行中輸入jekyll build --trace就能夠將全部文章文件根據其模板進行編譯，生成結果，放在根目錄下的_site中，這裏咱們使用後，會出現以下結果：\blog\_site\2014\01\27文件夾下有一個hello.html，其內容爲：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
          hello-jekyll
          2014-01-27 00:00:00 +0800
          <p>Hello jekyll!</p>
    </body>
</html>

能夠看到，這就是編譯完的博文文件，如咱們設定的，第一行是標題，而後是文件名定義的時間，而後是博文內容，若是編譯錯誤，將會在命令行中看到一個錯誤棧，能夠方便調試，具體哪裏出錯了，若是不須要看錯誤棧，直接使用jekyll build就好了

若是想要在本地開啓一個服務器查看效果，可使用命令jekyll serve，這樣會開啓一個監聽端口4000的服務器，瀏覽器中查看localhost:4000，則會進入index.html的內容中，點擊文章的標題就能夠跳轉到具體的博文了